:root {
  --ink: #f5f5f7;
  --muted: #a1a1a8;
  --line: rgba(255, 255, 255, 0.11);
  --surface: #0b0b0f;
  --panel: rgba(28, 28, 32, 0.86);
  --panel-2: rgba(38, 38, 44, 0.94);
  --brand-wine: rgb(176, 42, 56);
  --brand-red: rgb(255, 92, 103);
  --brand-gold: rgb(94, 168, 255);
  --brand-blue: rgb(27, 79, 111);
  --accent: var(--brand-gold);
  --accent-dark: #a5a2fa;
  --warn: var(--brand-gold);
  --danger: #ff5f6f;
  --soft: rgba(94, 168, 255, 0.14);
  --field: rgba(44, 44, 50, 0.78);
  --sidebar: rgba(18, 18, 22, 0.92);
  --radius: 22px;
  --radius-sm: 16px;
  --control-height: 40px;
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.04), 0 22px 58px rgba(0, 0, 0, 0.24);
  --font-ui: "Inter", "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", sans-serif;
  --font-display: "Manrope", "Inter", "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", sans-serif;
  --font-number: "Inter", "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", sans-serif;
  font-family: var(--font-ui);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: var(--surface);
  font-family: var(--font-ui);
  overflow-x: hidden;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  border-radius: var(--radius-sm);
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, opacity 0.16s ease;
}

button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid rgba(183, 199, 168, 0.65);
  outline-offset: 2px;
}

.app-shell {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 28px 20px;
  background: var(--sidebar);
  color: var(--ink);
  border-right: 1px solid var(--line);
  backdrop-filter: blur(26px);
}

.brand {
  display: grid;
  gap: 10px;
}

.brand span {
  color: var(--muted);
  font-size: 13px;
  font-family: var(--font-display);
  font-weight: 650;
}

.brand-logo {
  display: block;
  width: min(100%, 174px);
  height: auto;
}

.nav {
  display: grid;
  gap: 8px;
}

.nav-item {
  width: 100%;
  border: 0;
  min-height: var(--control-height);
  padding: 0 14px;
  border-radius: var(--radius-sm);
  color: rgba(245, 245, 247, 0.72);
  background: transparent;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 640;
  cursor: pointer;
}

.nav-item.active,
.nav-item:hover {
  color: var(--ink);
  background: var(--soft);
}

.workspace {
  min-width: 0;
  padding: 28px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}

.role-controls {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.role-controls label {
  min-width: 150px;
}

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

h1 {
  margin-bottom: 0;
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 760;
  letter-spacing: 0;
}

h2 {
  margin-bottom: 16px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 720;
}

.primary-action,
.ghost-action {
  border: 1px solid transparent;
  min-height: var(--control-height);
  padding: 0 16px;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 650;
}

.primary-action {
  color: #ffffff;
  background: var(--accent);
}

.primary-action:hover {
  background: #2997ff;
}

.ghost-action {
  border: 1px solid var(--line);
  color: var(--accent-dark);
  background: var(--field);
}

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

.danger-action,
.ghost-action.danger-action {
  color: var(--danger);
  background: rgba(226, 120, 120, 0.12);
}

.danger-action:hover,
.ghost-action.danger-action:hover {
  border-color: rgba(226, 120, 120, 0.5);
}

.hidden {
  display: none !important;
}

.view {
  display: none;
}

.view.active {
  display: block;
}

.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.dashboard-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(28, 28, 32, 0.64);
  box-shadow: var(--shadow);
  backdrop-filter: blur(22px);
}

.dashboard-toolbar span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.2;
}

.dashboard-toolbar strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 760;
}

.segmented-control {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.04);
}

.segmented-control button {
  min-height: 30px;
  padding: 0 11px;
  border-color: transparent;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
}

.segmented-control button.active,
.segmented-control button:hover {
  color: var(--ink);
  background: rgba(94, 168, 255, 0.16);
  border-color: rgba(94, 168, 255, 0.32);
}

.dashboard-trend-panel {
  margin-bottom: 18px;
}

.dashboard-trend {
  display: grid;
  gap: 8px;
}

.trend-row {
  display: grid;
  grid-template-columns: minmax(120px, 0.45fr) minmax(0, 1.5fr) minmax(130px, 0.42fr);
  gap: 12px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.035);
}

.trend-month strong,
.trend-result strong {
  display: block;
  color: var(--ink);
  font-size: 13px;
  font-weight: 720;
  font-variant-numeric: tabular-nums;
}

.trend-month span,
.trend-result span,
.trend-bar-line span {
  color: var(--muted);
  font-size: 11px;
}

.trend-bars {
  display: grid;
  gap: 5px;
}

.trend-bar-line {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 92px;
  gap: 8px;
  align-items: center;
}

.trend-track {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
}

.trend-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
}

.trend-income {
  background: linear-gradient(90deg, rgb(27, 79, 111), rgb(94, 168, 255));
}

.trend-cost {
  background: linear-gradient(90deg, rgba(176, 42, 56, 0.85), rgb(255, 92, 103));
}

.trend-bar-line strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 680;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.trend-result {
  justify-self: end;
  text-align: right;
}

.trend-row.is-positive .trend-result strong {
  color: rgba(202, 214, 190, 0.95);
}

.trend-row.is-negative .trend-result strong {
  color: #ff9aaa;
}

.metric,
.panel,
.project-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
  backdrop-filter: blur(22px);
}

.metric {
  padding: 16px;
}

.metric span {
  color: var(--muted);
  font-size: 13px;
}

.metric strong {
  display: block;
  margin-top: 6px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

.metric small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
}

.metric small em {
  display: block;
  font-style: normal;
}

.split-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
  gap: 18px;
  align-items: start;
}

.split-layout {
  grid-template-columns: minmax(300px, 390px) minmax(0, 1fr);
}

.project-layout {
  grid-template-columns: minmax(0, 1fr);
}

.time-page-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.coordination-page {
  display: grid;
  gap: 14px;
}

.coordination-context-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.coordination-context-card {
  display: grid;
  min-height: 112px;
  align-content: space-between;
  gap: 7px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  background: rgba(255, 255, 255, 0.035);
  text-align: left;
}

.coordination-context-card.active,
.coordination-context-card:hover {
  border-color: rgba(94, 168, 255, 0.46);
  background: rgba(94, 168, 255, 0.105);
}

.coordination-card-number {
  color: rgb(94, 168, 255);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 760;
}

.coordination-context-card strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.coordination-context-card small,
.coordination-context-card em {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.coordination-card-progress {
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.075);
}

.coordination-card-progress div {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(94, 168, 255, 0.95), rgba(142, 163, 125, 0.95));
}

.coordination-controls,
.coordination-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr));
  gap: 10px;
  align-items: end;
}

.coordination-control-panel .coordination-controls {
  grid-template-columns: minmax(0, 1fr);
  justify-content: start;
}

.coordination-context-field {
  grid-column: span 2;
}

.coordination-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.coordination-status-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

.coordination-status-panel,
.coordination-timeline-panel {
  min-height: 100%;
}

.coordination-list-panel .panel-head {
  align-items: center;
}

.coordination-list-panel .panel-head .ghost-action {
  justify-self: end;
  min-width: 132px;
}

.coordination-progress-card,
.coordination-metric,
.coordination-timeline-item,
.coordination-item {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.035);
}

.coordination-progress-card,
.coordination-metric {
  padding: 11px 12px;
}

.coordination-progress-card {
  grid-column: 1 / -1;
  display: grid;
  align-content: center;
  gap: 9px;
}

.coordination-selected-project {
  display: grid;
  gap: 2px;
}

.coordination-selected-project span {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.coordination-selected-project strong {
  overflow: hidden;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.coordination-progress-head,
.coordination-progress-foot {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.coordination-progress-head span,
.coordination-progress-foot,
.coordination-progress-head em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.coordination-progress-head strong {
  display: block;
  margin-top: 2px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 780;
}

.coordination-progress-track {
  height: 9px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.065);
}

.coordination-progress-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(94, 168, 255, 0.95), rgba(142, 163, 125, 0.95));
  box-shadow: 0 0 20px rgba(94, 168, 255, 0.18);
}

.coordination-progress-foot {
  align-items: center;
  font-size: 11px;
}

.coordination-metric span,
.coordination-metric small,
.coordination-timeline-item span,
.coordination-timeline-item small {
  color: var(--muted);
  font-size: 12px;
}

.coordination-metric strong {
  display: block;
  margin: 4px 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 780;
}

.coordination-timeline {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.coordination-timeline-item {
  display: grid;
  gap: 4px;
  padding: 10px;
}

.coordination-timeline-item strong {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.25;
}

.coordination-list {
  display: grid;
  gap: 6px;
}

.coordination-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 96px;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
}

.coordination-check {
  width: 24px;
  height: 24px;
  min-height: 24px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.04);
  font-size: 13px;
  font-weight: 780;
}

.coordination-check:hover {
  border-color: rgba(142, 163, 125, 0.72);
  background: rgba(142, 163, 125, 0.14);
}

.coordination-item.is-done {
  border-color: rgba(142, 163, 125, 0.34);
  background: rgba(142, 163, 125, 0.105);
}

.coordination-item.is-done .coordination-check {
  border-color: rgba(142, 163, 125, 0.6);
  background: rgba(142, 163, 125, 0.24);
}

.coordination-item.is-late,
.coordination-timeline-item.is-late {
  border-color: rgba(255, 92, 103, 0.32);
  background: rgba(255, 92, 103, 0.09);
}

.coordination-type,
.coordination-status {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.04);
  font-size: 10px;
  font-weight: 720;
}

.coordination-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px 9px;
  margin-top: 6px;
}

.coordination-meta span {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.coordination-meta b {
  display: block;
  color: var(--muted-strong);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.coordination-main p {
  display: -webkit-box;
  overflow: hidden;
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.coordination-note-field {
  grid-column: span 3;
}

.work-entry-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 22px;
}

.work-entry-layout .time-form-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.work-entry-layout .time-form-note-row {
  grid-template-columns: minmax(0, 1fr) 148px;
}

.hours-month-calendar {
  display: grid;
  gap: 8px;
  padding: 2px 0;
}

.hours-calendar-head {
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  align-items: center;
  gap: 10px;
}

.hours-calendar-head > div {
  display: grid;
  gap: 2px;
  text-align: center;
}

.hours-calendar-head span,
.hours-calendar-weekdays {
  color: var(--muted);
  font-size: 11px;
}

.hours-calendar-head strong {
  font-family: var(--font-display);
  font-size: 17px;
}

.hours-calendar-head button {
  width: 36px;
  height: 36px;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0;
  color: var(--ink);
  background: var(--field);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.hours-calendar-head button:hover {
  border-color: rgba(94, 168, 255, 0.55);
  background: rgba(94, 168, 255, 0.16);
}

.hours-calendar-weekdays,
.hours-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.hours-calendar-weekdays span {
  text-align: center;
}

.hours-calendar-grid {
  grid-auto-rows: 58px;
}

.hours-calendar-day {
  display: grid;
  align-content: space-between;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.025);
  color: inherit;
  font: inherit;
  text-align: left;
}

.hours-calendar-day strong {
  color: var(--muted);
  font-size: 12px;
}

.hours-calendar-day span {
  color: var(--ink);
  font-family: var(--font-number);
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.hours-calendar-day.has-hours {
  border-color: rgba(94, 168, 255, 0.42);
  background: rgba(94, 168, 255, 0.12);
}

.hours-calendar-day.is-today {
  box-shadow: inset 0 0 0 1px rgba(255, 214, 10, 0.68);
}

.hours-calendar-day.is-selected {
  border-color: var(--apple-blue);
  box-shadow: inset 0 0 0 1px rgba(100, 210, 255, 0.6);
}

.hours-calendar-day.is-selectable {
  cursor: pointer;
}

.hours-calendar-day.is-selectable:hover {
  border-color: rgba(94, 168, 255, 0.7);
  background: rgba(94, 168, 255, 0.2);
}

.hours-calendar-day.is-empty {
  border-color: transparent;
  background: transparent;
}

#timeForm {
  display: grid;
  gap: 16px;
}

#timeForm .panel-head {
  margin-bottom: 0;
}

.time-form-fields {
  display: grid;
  grid-template-columns: minmax(170px, 0.8fr) minmax(220px, 1.35fr) minmax(190px, 1.05fr) minmax(120px, 0.5fr);
  gap: 14px;
  align-items: end;
}

.time-form-note-row {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(150px, 190px);
  gap: 14px;
  align-items: stretch;
}

#timeForm label {
  gap: 8px;
}

#timeForm input,
#timeForm select {
  height: 42px;
}

#timeForm textarea {
  height: 72px;
  min-height: 72px;
  max-height: 72px;
  resize: none;
  line-height: 1.35;
}

#timeForm .primary-action {
  align-self: end;
  height: 72px;
  min-height: 72px;
}

#timeForm .field-note {
  margin: -4px 0 0;
  line-height: 1.45;
}

#timeForm .field-note + .field-note {
  margin-top: -10px;
}

#timeForm input[name="person"] {
  display: none;
}

.time-entry-list {
  display: grid;
  gap: 4px;
}

.time-entry-item {
  display: grid;
  grid-template-columns: 92px minmax(170px, 1.4fr) minmax(140px, 1fr) 70px minmax(180px, 1.4fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.035);
}

.time-entry-item span,
.time-entry-item strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.time-entry-item span {
  color: var(--muted);
  font-size: 12px;
}

.time-entry-item strong {
  color: var(--ink);
  font-size: 13px;
}

.time-entry-item strong:nth-of-type(2) {
  justify-self: end;
  font-variant-numeric: tabular-nums;
}

.time-entry-actions {
  justify-self: end;
  flex-wrap: nowrap;
  gap: 6px;
  margin: 0;
}

.time-form-actions {
  display: grid;
  gap: 8px;
}

.time-form-actions button {
  width: 100%;
}

.meetings-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  align-items: start;
}

.meetings-layout .form-panel {
  grid-column: auto;
}

.meeting-list-panel {
  grid-column: 1 / -1;
}

.meeting-calendar-panel {
  min-height: 0;
}

.meeting-list-panel .meeting-list {
  gap: 10px;
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

@media (max-width: 980px) {
  .meeting-list-panel .meeting-list {
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }
}

.panel {
  min-width: 0;
  padding: 18px;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.panel-head h2 {
  margin: 0;
  font-family: var(--font-display);
}

.panel-head span {
  color: var(--muted);
  font-size: 13px;
}

.project-list,
.entry-list,
.meeting-list {
  display: grid;
  gap: 12px;
}

.project-card {
  padding: 14px;
}

.project-card header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.project-card h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 16px;
}

.meeting-actions {
  justify-content: flex-start;
  margin-top: 12px;
}

.status {
  align-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  width: fit-content;
  border: 1px solid rgba(142, 163, 125, 0.25);
  border-radius: var(--radius-sm);
  padding: 0 8px;
  color: var(--accent-dark);
  background: var(--soft);
  font-size: 12px;
}

.project-bars {
  display: grid;
  gap: 10px;
  margin: 12px 0;
}

.bar-row {
  display: grid;
  gap: 6px;
}

.bar-label {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 12px;
}

.bar,
.timeline-bar {
  position: relative;
  overflow: hidden;
  height: 8px;
  border-radius: 999px;
  background: #2a3027;
}

.bar-fill {
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

.bar-fill.over {
  background: var(--warn);
}

.timeline-fill {
  height: 100%;
  border-radius: inherit;
  background: #55624d;
}

.timeline-dot {
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  border: 2px solid var(--panel);
  border-radius: 999px;
  background: var(--accent-dark);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 1px rgba(241, 243, 234, 0.16);
}

.card-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  color: var(--muted);
  font-size: 13px;
}

.card-stats strong {
  display: block;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.time-people-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
}

.time-person-card {
  min-height: 78px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
  color: var(--ink);
  background: var(--field);
  text-align: left;
  cursor: pointer;
}

.time-person-card:hover,
.time-person-card.active {
  border-color: rgba(94, 168, 255, 0.7);
  background: rgba(94, 168, 255, 0.14);
}

.time-person-card span,
.time-person-card small {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.time-person-card strong {
  display: block;
  margin: 4px 0;
  font-size: 17px;
}

.employee-months {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.month-chip {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  color: var(--muted);
  background: var(--field);
  text-align: left;
  cursor: pointer;
}

.month-chip strong {
  color: var(--ink);
  font-size: 18px;
}

.month-chip.active,
.month-chip:hover {
  border-color: var(--accent);
  background: var(--soft);
}

form {
  display: grid;
  gap: 14px;
}

label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
}

.field-note {
  margin: -4px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.compact-label {
  min-width: 170px;
}

.closing-controls {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: 10px;
}

.closing-time-detail {
  margin-top: -4px;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  min-height: var(--control-height);
  padding: 10px 12px;
  color: var(--ink);
  background: var(--field);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

input:hover,
select:hover,
textarea:hover {
  border-color: rgba(94, 168, 255, 0.48);
}

input:disabled {
  color: var(--muted);
  background: rgba(70, 70, 76, 0.36);
}

input::placeholder,
textarea::placeholder {
  color: rgba(235, 235, 245, 0.36);
}

input[data-picker] {
  cursor: pointer;
}

input:disabled {
  color: var(--muted);
  background: #1b1f18;
}

input::placeholder,
textarea::placeholder {
  color: #737a6e;
}

textarea {
  resize: vertical;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

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

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

.project-form-name-pair {
  grid-template-columns: minmax(84px, 0.45fr) minmax(0, 1fr);
}

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

@media (max-width: 980px) {
  .project-form-split,
  .project-form-finance-grid,
  .finance-filter-fields,
  .coordination-controls,
  .coordination-form,
  .coordination-metrics,
  .coordination-status-layout,
  .coordination-meta {
    grid-template-columns: 1fr;
  }

  .coordination-note-field {
    grid-column: auto;
  }

  .coordination-context-field {
    grid-column: auto;
  }

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

  .coordination-control-panel .coordination-controls {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .project-form-pair,
  .project-form-name-pair {
    grid-template-columns: 1fr;
  }

  .coordination-context-grid {
    grid-template-columns: 1fr;
  }
}

.form-actions,
.row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.finance-extra-panel,
.owner-balance-panel {
  margin-top: 18px;
}

.owner-balance-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.owner-balance-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  background: var(--field);
}

.owner-balance-summary {
  grid-column: 1 / -1;
  border: 1px solid rgba(94, 168, 255, 0.35);
  border-radius: var(--radius);
  padding: 16px;
  background: var(--soft);
}

.owner-balance-summary span {
  color: var(--muted);
  font-size: 12px;
}

.owner-balance-summary strong {
  display: block;
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: 24px;
  font-variant-numeric: tabular-nums;
}

.owner-balance-summary p {
  margin: 8px 0 0;
  color: var(--muted);
}

.owner-balance-card > div {
  margin-bottom: 12px;
}

.owner-balance-card span,
.owner-balance-card dt {
  color: var(--muted);
  font-size: 12px;
}

.owner-balance-card strong {
  display: block;
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}

.owner-balance-card dl {
  display: grid;
  gap: 8px;
  margin: 0;
}

.owner-balance-card dl div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.owner-balance-card dd {
  margin: 0;
  color: var(--ink);
  font-weight: 700;
}

.money-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 12px;
  align-items: end;
}

.money-form label {
  min-width: 0;
}

.money-name-field {
  grid-column: span 2;
}

.money-form .form-note {
  grid-column: span 3;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.finance-filter-bar {
  display: grid;
  gap: 10px;
  margin: 12px 0;
}

.finance-type-filter {
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
}

.finance-filter-fields {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 10px;
}

.finance-filter-fields label {
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
}

.finance-filter-fields select,
.finance-filter-fields input {
  min-height: 34px;
  margin-top: 4px;
  padding: 7px 9px;
  font-size: 12px;
}

.finance-filter-summary {
  color: var(--muted);
  font-size: 12px;
}

.money-list {
  display: grid;
  gap: 6px;
  max-height: 560px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)),
    rgba(6, 6, 9, 0.28);
}

.money-header,
.money-item {
  display: grid;
  grid-template-columns:
    108px
    minmax(240px, 1.9fr)
    minmax(132px, 0.9fr)
    minmax(145px, 1fr)
    92px
    126px
    68px;
  align-items: center;
  gap: 12px;
}

.money-header {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 2px 12px 4px 18px;
  color: var(--muted);
  background: rgba(13, 13, 17, 0.96);
  font-size: 10px;
  text-transform: uppercase;
  font-family: var(--font-display);
  font-weight: 720;
  letter-spacing: 0;
}

.money-item {
  position: relative;
  min-height: 44px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 12px;
  padding: 7px 10px 7px 18px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
    rgba(22, 22, 26, 0.86);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.money-item::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--accent);
}

.money-item.income::before {
  background: rgb(27, 79, 111);
}

.money-item.project-expense::before {
  background: rgb(94, 168, 255);
}

.money-item.overhead::before {
  background: rgb(94, 168, 255);
}

.money-item.payroll::before {
  background: rgb(255, 92, 103);
}

.money-item.settlement::before {
  background: rgb(176, 42, 56);
}

.money-item strong {
  display: block;
  line-height: 1.15;
  font-size: 14px;
}

.money-description,
.money-owner,
.money-place,
.money-date {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  line-height: 1.2;
}

.money-description,
.money-place,
.money-date {
  color: var(--muted);
}

.money-owner {
  color: var(--ink);
}

.money-type {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-width: 78px;
  padding: 4px 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  color: #a5a2fa;
  background: rgba(94, 168, 255, 0.13);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 720;
  line-height: 1;
  white-space: nowrap;
}

.money-item.income .money-type {
  color: #b9def2;
  background: rgba(27, 79, 111, 0.28);
  border-color: rgba(27, 79, 111, 0.48);
}

.money-item.overhead .money-type {
  color: #fff2a5;
  background: rgba(94, 168, 255, 0.18);
  border-color: rgba(94, 168, 255, 0.36);
}

.money-item.project-expense .money-type {
  color: #ffe3bd;
  background: rgba(94, 168, 255, 0.18);
  border-color: rgba(94, 168, 255, 0.36);
}

.money-item.payroll .money-type {
  color: #ffc1cb;
  background: rgba(255, 92, 103, 0.16);
  border-color: rgba(255, 92, 103, 0.34);
}

.money-item.settlement .money-type {
  color: #f0ddff;
  background: rgba(191, 90, 242, 0.17);
  border-color: rgba(191, 90, 242, 0.32);
}

.money-amount {
  justify-self: end;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  color: var(--ink);
  font-family: var(--font-number);
  font-size: 14px;
  font-weight: 760;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.money-item .inline-action {
  width: 100%;
  justify-content: center;
  min-height: 28px;
  padding: 5px 8px;
  border-radius: 999px;
}

.money-amount.positive {
  color: #b9def2;
  background: rgba(27, 79, 111, 0.22);
}

.money-amount.negative {
  color: #a5a2fa;
  background: rgba(94, 168, 255, 0.16);
}

.calendar-field {
  position: relative;
}

.calendar-display-value {
  position: absolute;
  right: 12px;
  bottom: 10px;
  left: 12px;
  z-index: 1;
  overflow: hidden;
  color: var(--ink);
  pointer-events: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-display-input {
  color: transparent !important;
  caret-color: transparent;
}

.calendar-popover {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 20;
  width: min(300px, 86vw);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  background: var(--panel-2);
  box-shadow: var(--shadow);
  backdrop-filter: blur(24px);
}

.global-calendar {
  position: absolute;
  z-index: 1000;
}

.calendar-head,
.calendar-weekdays,
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.calendar-head {
  grid-template-columns: 34px 1fr 34px;
  align-items: center;
  margin-bottom: 10px;
}

.calendar-head strong {
  text-align: center;
}

.calendar-head button,
.calendar-grid button {
  border: 1px solid var(--line);
  min-height: 34px;
  color: var(--ink);
  background: var(--field);
  cursor: pointer;
}

.calendar-grid button:disabled {
  opacity: 0.35;
  color: var(--muted);
  background: var(--field);
  cursor: not-allowed;
}

.calendar-head button {
  color: var(--accent-dark);
  background: var(--soft);
}

.calendar-weekdays {
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 11px;
  text-align: center;
}

.calendar-grid span {
  min-height: 34px;
}

.calendar-grid button.active,
.calendar-grid button:hover,
.calendar-head button:hover {
  border-color: var(--accent);
  color: #ffffff;
  background: var(--accent);
}

.calendar-grid button:disabled:hover {
  border-color: var(--line);
  color: var(--muted);
  background: var(--field);
}

.month-picker-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.month-picker-grid button {
  border: 1px solid var(--line);
  min-height: 38px;
  color: var(--ink);
  background: var(--field);
  cursor: pointer;
}

.month-picker-grid button.active,
.month-picker-grid button:hover {
  border-color: var(--accent);
  color: #ffffff;
  background: var(--accent);
}

.calendar-day {
  display: grid;
  align-content: start;
  gap: 6px;
  min-height: 112px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px;
  background: var(--field);
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease;
}

.calendar-day:hover {
  border-color: rgba(94, 168, 255, 0.45);
  background: rgba(94, 168, 255, 0.08);
}

.calendar-day.muted {
  opacity: 0.35;
}

.calendar-day strong {
  color: var(--muted);
  font-size: 12px;
}

.calendar-day button {
  border: 1px solid rgba(142, 163, 125, 0.18);
  border-radius: var(--radius-sm);
  padding: 6px;
  color: #ffffff;
  background: var(--accent);
  text-align: left;
  cursor: pointer;
}

.calendar-day button:hover {
  background: var(--accent-dark);
}

.row-actions button {
  border: 1px solid var(--line);
  min-height: 34px;
  padding: 0 10px;
  color: var(--ink);
  background: var(--field);
  cursor: pointer;
}

.row-actions button:hover {
  border-color: var(--accent);
  background: var(--soft);
}

.row-actions .danger-action,
.danger-inline {
  color: var(--danger);
  background: rgba(226, 120, 120, 0.12);
}

.row-actions .danger-action:hover,
.danger-inline:hover {
  border-color: rgba(226, 120, 120, 0.5);
  background: rgba(226, 120, 120, 0.18);
}

.inline-action {
  border: 1px solid var(--line);
  min-height: 28px;
  margin-left: 8px;
  padding: 0 8px;
  color: var(--accent-dark);
  background: var(--field);
  cursor: pointer;
}

.inline-action:hover {
  border-color: var(--accent);
  background: var(--soft);
}

.detail-row td {
  padding-top: 0;
  background: #171a14;
}

.profession-detail {
  display: grid;
  gap: 10px;
  color: var(--muted);
  line-height: 1.6;
}

.phase-detail {
  display: grid;
  gap: 2px;
  padding: 8px 0;
}

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

.phase-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.phase-detail + .phase-detail {
  border-top: 1px solid var(--line);
}

.phase-detail strong {
  color: var(--ink);
}

.phase-detail-bars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 8px 0 4px;
}

.phase-detail-bars .mini-progress {
  min-width: 0;
}

.phase-status {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 6px;
  color: var(--muted);
  background: var(--soft);
  font-size: 12px;
  font-weight: 500;
}

.form-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.form-section-head h3 {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
}

.profession-editor {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--field);
}

.profession-rows {
  display: grid;
  gap: 8px;
}

.profession-row,
.team-row,
.phase-template-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 130px;
  gap: 8px;
}

.team-row {
  grid-template-columns: minmax(0, 1fr) 100px 140px 130px;
}

.phase-template-row {
  grid-template-columns: minmax(150px, 1fr) 140px 96px 96px minmax(110px, 0.8fr);
}

.small-action {
  border: 1px solid var(--line);
  min-height: 34px;
  padding: 0 10px;
  color: var(--accent-dark);
  background: var(--field);
  cursor: pointer;
}

.small-action:hover {
  border-color: var(--accent);
  background: var(--soft);
}

.table-wrap {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
}

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--panel);
}

th,
td {
  border-bottom: 1px solid var(--line);
  padding: 11px 10px;
  text-align: left;
  vertical-align: top;
  background: var(--panel);
}

th {
  position: sticky;
  top: 0;
  z-index: 3;
  color: var(--muted);
  background: var(--panel-2);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

th:first-child,
td:first-child {
  background: var(--panel);
}

th:first-child {
  background: var(--panel-2);
}

.cell-stack {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.cell-stack span {
  color: var(--muted);
}

.cell-stack strong {
  color: var(--ink);
}

.project-main-cell {
  min-width: 0;
}

.status-cell {
  min-width: 0;
}

#projectsView table,
#archiveView table {
  table-layout: fixed;
  min-width: 1180px;
}

#projectsView th:nth-child(1),
#projectsView td:nth-child(1) {
  width: 34%;
}

#projectsView th:nth-child(2),
#projectsView td:nth-child(2) {
  width: 50%;
}

#projectsView th:nth-child(3),
#projectsView td:nth-child(3) {
  width: 16%;
}

.project-main-cell > strong {
  display: block;
  margin-bottom: 6px;
  color: var(--ink);
  font-size: 14px;
}

.project-main-cell > span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.phase-state-list {
  display: grid;
  gap: 3px;
  margin-top: 6px;
}

.phase-state-list span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.phase-state-list strong {
  display: block;
  margin-bottom: 1px;
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.project-column-list {
  gap: 7px;
}

.project-column-list span {
  line-height: 1.35;
}

.external-cost-inline-detail {
  margin-top: -1px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.14);
}

.mini-progress {
  display: grid;
  gap: 5px;
  margin-top: 2px;
}

.mini-progress .bar,
.mini-progress .timeline-bar {
  height: 7px;
  background: rgba(255, 255, 255, 0.075);
}

.mini-progress .timeline-dot {
  width: 10px;
  height: 10px;
}

.project-column-list .inline-action {
  margin-left: 6px;
}

.status-cell .row-actions {
  gap: 6px;
}

.status-cell .row-actions button {
  min-height: 28px;
  padding: 0 8px;
}

.empty {
  padding: 24px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--muted);
  background: var(--field);
  text-align: center;
}

@media (max-width: 980px) {
  .app-shell,
.meetings-layout,
.split-layout,
.work-entry-layout,
#timeForm,
.time-form-fields,
.time-form-note-row,
.time-entry-item,
.metrics {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 16px;
  }

  .nav {
    grid-template-columns: repeat(6, 1fr);
  }

  .topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  #timeForm .primary-action {
    height: var(--control-height);
    min-height: var(--control-height);
  }
}

@media (max-width: 640px) {
  .hours-calendar-weekdays,
  .hours-calendar-grid {
    gap: 4px;
  }

  .hours-calendar-grid {
    grid-auto-rows: 46px;
  }

  .hours-calendar-day {
    padding: 5px;
  }

  .hours-calendar-day span {
    font-size: 11px;
  }

  .workspace {
    padding: 18px;
  }

  .form-row,
  .money-form,
  .owner-balance-grid,
  .profession-row,
  .team-row,
  .phase-template-row,
  .card-stats {
    grid-template-columns: 1fr;
  }

  .money-name-field,
  .money-form .form-note {
    grid-column: auto;
  }

  .money-item {
    align-items: flex-start;
    grid-template-columns: 1fr;
  }

  .money-header {
    display: none;
  }

  .money-amount {
    text-align: left;
  }

  .nav {
    grid-template-columns: 1fr;
  }
}

/* Modern iOS-style polish */
.topbar {
  position: sticky;
  top: 0;
  z-index: 12;
  margin: -8px 0 24px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)),
    rgba(18, 18, 23, 0.62);
  backdrop-filter: blur(28px);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18);
}

.role-controls {
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(28, 28, 32, 0.58);
}

.role-controls label {
  min-width: 156px;
  font-size: 12px;
}

.metric,
.panel,
.project-card,
.money-item,
.owner-balance-card,
.profession-editor,
.table-wrap {
  background: rgba(28, 28, 32, 0.78);
}

.metric:hover,
.project-card:hover,
.money-item:hover {
  border-color: rgba(255, 255, 255, 0.18);
}

.panel-head {
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.panel-head h2,
.project-card h3 {
  font-weight: 700;
}

.status,
.phase-status,
.money-type {
  font-weight: 650;
  letter-spacing: 0;
}

table {
  background: rgba(28, 28, 32, 0.72);
}

th {
  background: rgba(44, 44, 50, 0.96);
  letter-spacing: 0;
}

td {
  background: transparent;
}

tr:hover td {
  background: rgba(255, 255, 255, 0.025);
}

th:first-child,
td:first-child,
th:first-child {
  background: transparent;
}

th:first-child {
  background: rgba(44, 44, 50, 0.96);
}

.detail-row td {
  background: rgba(20, 20, 24, 0.78);
}

.bar,
.timeline-bar {
  background: rgba(255, 255, 255, 0.09);
}

.bar-fill {
  background: var(--accent);
}

.timeline-fill {
  background: rgba(94, 168, 255, 0.42);
}

.timeline-dot {
  border-color: rgba(28, 28, 32, 0.96);
  background: #ffffff;
  box-shadow: 0 0 0 2px rgba(94, 168, 255, 0.55);
}

.calendar-day {
  background: rgba(44, 44, 50, 0.58);
}

.calendar-day.muted {
  opacity: 0.24;
}

.empty {
  background: rgba(44, 44, 50, 0.46);
}

@media (max-width: 980px) {
  .topbar {
    position: static;
  }

  .sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
}

/* kurecka_kral color material pass */
body {
  background:
    linear-gradient(135deg, rgba(176, 42, 56, 0.28) 0%, rgba(11, 11, 15, 0.86) 30%, rgba(27, 79, 111, 0.22) 100%),
    #09090d;
}

.sidebar {
  background:
    linear-gradient(180deg, rgba(176, 42, 56, 0.26), rgba(12, 12, 16, 0.93) 34%, rgba(27, 79, 111, 0.2)),
    rgba(13, 13, 18, 0.94);
}

.brand {
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.nav {
  gap: 6px;
}

.nav-item {
  position: relative;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 12px;
}

.nav-item.active,
.nav-item:hover {
  border-color: rgba(94, 168, 255, 0.34);
  background:
    linear-gradient(90deg, rgba(94, 168, 255, 0.2), rgba(27, 79, 111, 0.12)),
    rgba(255, 255, 255, 0.035);
}

.nav-item.active::before {
  content: "";
  position: absolute;
  inset: 8px auto 8px 0;
  width: 3px;
  border-radius: 0 999px 999px 0;
  background: rgb(94, 168, 255);
}

.topbar {
  background:
    linear-gradient(135deg, rgba(94, 168, 255, 0.11), rgba(27, 79, 111, 0.09)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.018)),
    rgba(12, 12, 17, 0.62);
}

.role-controls,
.metric,
.panel,
.project-card,
.owner-balance-card,
.profession-editor,
.table-wrap {
  border-color: rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
    rgba(24, 24, 29, 0.78);
}

.metric {
  position: relative;
  overflow: hidden;
}

.metric::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, rgb(94, 168, 255), rgb(255, 92, 103), rgb(27, 79, 111));
  opacity: 0.7;
}

.primary-action {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0)),
    rgb(94, 168, 255);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 10px 28px rgba(94, 168, 255, 0.18);
}

.primary-action:hover {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0)),
    rgb(90, 87, 230);
}

.ghost-action:hover,
.inline-action:hover {
  border-color: rgba(94, 168, 255, 0.48);
  background: rgba(94, 168, 255, 0.12);
}

.ghost-action,
.inline-action {
  color: #a5a2fa;
}

input:hover,
select:hover,
textarea:hover,
input:focus,
select:focus,
textarea:focus {
  border-color: rgba(94, 168, 255, 0.48);
}

.status,
.phase-status {
  border-color: rgba(94, 168, 255, 0.28);
  color: #a5a2fa;
  background: rgba(94, 168, 255, 0.11);
}

.bar-fill {
  background: linear-gradient(90deg, rgb(27, 79, 111), rgb(94, 168, 255));
}

.bar-fill.over {
  background: rgb(255, 92, 103);
}

.timeline-fill {
  background: linear-gradient(90deg, rgb(27, 79, 111), rgb(94, 168, 255));
}

.timeline-dot {
  border-color: rgba(9, 9, 13, 0.95);
  background: #ffffff;
  box-shadow: 0 0 0 2px rgba(94, 168, 255, 0.45);
}

.owner-balance-summary {
  border-color: rgba(255, 92, 103, 0.28);
  background:
    linear-gradient(135deg, rgba(176, 42, 56, 0.22), rgba(27, 79, 111, 0.14)),
    rgba(255, 255, 255, 0.035);
}

.money-list {
  background:
    linear-gradient(180deg, rgba(176, 42, 56, 0.12), rgba(27, 79, 111, 0.1)),
    rgba(5, 5, 8, 0.36);
}

.money-item {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.018)),
    rgba(22, 22, 27, 0.92);
}

.money-item.income::before {
  background: rgb(27, 79, 111);
}

.money-item.project-expense::before,
.money-item.overhead::before {
  background: rgb(94, 168, 255);
}

.money-item.payroll::before {
  background: rgb(255, 92, 103);
}

.money-item.settlement::before {
  background: rgb(176, 42, 56);
}

.money-item.income .money-type {
  color: #b9def2;
  background: rgba(27, 79, 111, 0.28);
  border-color: rgba(27, 79, 111, 0.48);
}

.money-item.project-expense .money-type,
.money-item.overhead .money-type {
  color: #a5a2fa;
  background: rgba(94, 168, 255, 0.18);
  border-color: rgba(94, 168, 255, 0.36);
}

.money-item.payroll .money-type,
.money-item.settlement .money-type {
  color: #ffc1cb;
  background: rgba(255, 92, 103, 0.16);
  border-color: rgba(255, 92, 103, 0.34);
}

.money-amount.positive {
  color: #b9def2;
  background: rgba(27, 79, 111, 0.22);
}

.money-amount.negative {
  color: #a5a2fa;
  background: rgba(94, 168, 255, 0.16);
}

.calendar-day button,
.calendar-popover button.active,
.month-chip.active,
.time-person-card.active {
  border-color: rgba(94, 168, 255, 0.5);
  background: rgba(94, 168, 255, 0.14);
}

/* Interface system pass */
:root {
  --ink: #f7f7f8;
  --muted: rgba(235, 235, 245, 0.58);
  --muted-strong: rgba(235, 235, 245, 0.72);
  --line: rgba(255, 255, 255, 0.105);
  --surface: #090a0d;
  --panel: rgba(22, 23, 28, 0.78);
  --panel-2: rgba(31, 32, 38, 0.9);
  --field: rgba(255, 255, 255, 0.055);
  --soft: rgba(94, 168, 255, 0.13);
  --control-height: 42px;
  --radius: 22px;
  --radius-sm: 16px;
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.04), 0 18px 54px rgba(0, 0, 0, 0.28);
}

body {
  background:
    linear-gradient(155deg, rgba(176, 42, 56, 0.22), rgba(9, 10, 13, 0.86) 38%, rgba(27, 79, 111, 0.2)),
    linear-gradient(180deg, #111217, #08090c);
  font-feature-settings: "ss01" 1, "tnum" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.workspace {
  padding: 30px;
}

.sidebar {
  gap: 24px;
  padding: 28px 18px;
  background:
    linear-gradient(180deg, rgba(24, 24, 30, 0.96), rgba(12, 12, 16, 0.94)),
    rgba(13, 13, 18, 0.94);
}

.brand span,
label,
.panel-head span,
.time-person-card span,
.time-person-card small,
.month-chip span,
th {
  letter-spacing: 0;
}

h1 {
  font-size: 31px;
  font-weight: 680;
}

h2,
.panel-head h2 {
  font-size: 17px;
  font-weight: 680;
}

.nav {
  gap: 7px;
}

.nav-item {
  min-height: 42px;
  padding: 0 13px 0 16px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 640;
}

.nav-item.active,
.nav-item:hover {
  border-color: rgba(94, 168, 255, 0.28);
  background:
    linear-gradient(90deg, rgba(94, 168, 255, 0.18), rgba(255, 255, 255, 0.035)),
    rgba(255, 255, 255, 0.035);
}

.topbar {
  margin: -10px 0 22px;
  padding: 14px 16px;
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.072), rgba(255, 255, 255, 0.025)),
    rgba(16, 17, 21, 0.72);
}

.role-controls {
  min-height: 58px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.045);
}

.metric,
.panel,
.project-card,
.owner-balance-card,
.owner-balance-summary,
.profession-editor,
.table-wrap {
  border-radius: var(--radius);
  border-color: var(--line);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.066), rgba(255, 255, 255, 0.022)),
    var(--panel);
  box-shadow: var(--shadow);
}

.panel {
  padding: 18px;
}

.panel-head {
  min-height: 44px;
  margin-bottom: 14px;
  padding-bottom: 12px;
}

.metric {
  min-height: 112px;
  padding: 15px 16px;
}

.metric span {
  color: var(--muted);
  font-size: 12px;
}

.metric small {
  margin-top: 8px;
  color: var(--muted);
}

.primary-action,
.ghost-action,
.small-action,
.row-actions button,
.inline-action {
  min-height: var(--control-height);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 650;
}

.inline-action,
.money-item .inline-action {
  min-height: 30px;
}

input,
select,
textarea {
  min-height: var(--control-height);
  border-radius: var(--radius-sm);
  border-color: rgba(255, 255, 255, 0.11);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.022)),
    rgba(255, 255, 255, 0.045);
}

input::placeholder,
textarea::placeholder {
  color: rgba(235, 235, 245, 0.38);
}

input:disabled {
  background: rgba(255, 255, 255, 0.035);
}

.meetings-layout,
.project-list,
.entry-list,
.meeting-list {
  gap: 14px;
}

.time-people-list {
  grid-template-columns: repeat(auto-fill, minmax(186px, 1fr));
  gap: 10px;
}

.time-person-card {
  display: grid;
  grid-template-rows: 16px 24px 18px;
  gap: 4px;
  height: 90px;
  min-height: 90px;
  border-radius: var(--radius);
  padding: 11px 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.062), rgba(255, 255, 255, 0.022)),
    rgba(255, 255, 255, 0.045);
}

.time-person-card span,
.time-person-card strong,
.time-person-card small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.time-person-card span,
.time-person-card small {
  color: var(--muted);
  font-size: 11px;
}

.time-person-card strong {
  margin: 0;
  font-size: 16px;
  font-weight: 680;
}

.time-person-card.active,
.time-person-card:hover {
  border-color: rgba(94, 168, 255, 0.42);
  background:
    linear-gradient(180deg, rgba(94, 168, 255, 0.18), rgba(94, 168, 255, 0.07)),
    rgba(255, 255, 255, 0.04);
}

.month-chip {
  height: 62px;
  min-height: 62px;
  border-radius: var(--radius);
  padding: 10px 11px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
    rgba(255, 255, 255, 0.04);
}

.month-chip span {
  color: var(--muted);
  font-size: 11px;
}

.month-chip strong {
  font-size: 15px;
  font-weight: 690;
}

.time-form-fields {
  grid-template-columns: minmax(210px, 1.35fr) minmax(180px, 1fr) minmax(150px, 0.78fr) 112px;
  gap: 12px;
}

.time-form-note-row {
  grid-template-columns: minmax(0, 1fr) 178px;
  gap: 12px;
}

#timeForm input,
#timeForm select {
  height: var(--control-height);
}

#timeForm textarea,
#timeForm .primary-action {
  height: 70px;
  min-height: 70px;
  max-height: 70px;
}

.time-entry-item,
.money-item {
  border-radius: var(--radius);
}

.money-list {
  gap: 7px;
  padding: 8px;
  border-radius: var(--radius);
}

.money-header,
.money-item {
  grid-template-columns:
    104px
    minmax(230px, 1.9fr)
    minmax(128px, 0.9fr)
    minmax(140px, 1fr)
    92px
    124px
    70px;
}

.money-item {
  min-height: 42px;
  padding: 7px 10px 7px 16px;
}

.money-type {
  min-width: 76px;
  padding: 4px 8px;
}

.money-amount {
  min-width: 102px;
}

.table-wrap {
  border-radius: var(--radius);
}

th,
td {
  padding: 10px 12px;
}

th {
  height: 42px;
  color: var(--muted-strong);
  font-size: 11px;
  font-weight: 690;
}

td {
  font-size: 13px;
}

.project-card {
  padding: 14px;
}

.project-card header {
  min-height: 36px;
}

.calendar-popover,
.calendar-day {
  border-radius: var(--radius);
}

.calendar-day {
  min-height: 112px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.016)),
    rgba(255, 255, 255, 0.04);
}

@media (max-width: 980px) {
  .workspace {
    padding: 18px;
  }

  .topbar {
    margin: 0 0 18px;
  }

  .time-person-card,
  .month-chip {
    height: auto;
  }
}

/* Apple-inspired color pass + native menu fix */
:root {
  color-scheme: dark;
  --apple-blue: #635EEC;
  --apple-blue-2: #64d2ff;
  --apple-green: #30d158;
  --apple-yellow: #ffd60a;
  --apple-orange: #ff9f0a;
  --apple-red: #ff453a;
  --apple-purple: #bf5af2;
  --apple-gray: #8e8e93;
  --ink: #f5f5f7;
  --muted: rgba(235, 235, 245, 0.6);
  --muted-strong: rgba(235, 235, 245, 0.76);
  --surface: #08090d;
  --panel: rgba(24, 24, 28, 0.76);
  --panel-2: rgba(36, 36, 42, 0.92);
  --field: rgba(255, 255, 255, 0.058);
  --line: rgba(255, 255, 255, 0.105);
  --accent: var(--apple-blue);
  --accent-dark: #c6e2ff;
  --warn: var(--apple-orange);
  --danger: var(--apple-red);
  --soft: rgba(94, 168, 255, 0.14);
}

body {
  color-scheme: dark;
  background:
    linear-gradient(145deg, rgba(94, 168, 255, 0.16), rgba(8, 9, 13, 0.88) 42%, rgba(191, 90, 242, 0.12)),
    linear-gradient(180deg, #111217, #07080b);
}

.sidebar {
  background:
    linear-gradient(180deg, rgba(26, 28, 34, 0.98), rgba(9, 10, 14, 0.96)),
    #0b0c10;
}

.topbar,
.role-controls,
.metric,
.panel,
.project-card,
.owner-balance-card,
.profession-editor,
.table-wrap {
  border-color: rgba(255, 255, 255, 0.105);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.022)),
    rgba(22, 23, 28, 0.78);
}

.metric::before {
  background: linear-gradient(90deg, var(--apple-blue), var(--apple-green), var(--apple-purple));
}

.nav-item.active,
.nav-item:hover {
  border-color: rgba(94, 168, 255, 0.36);
  background:
    linear-gradient(90deg, rgba(94, 168, 255, 0.18), rgba(100, 210, 255, 0.08)),
    rgba(255, 255, 255, 0.035);
}

.nav-item.active::before {
  background: var(--apple-blue);
}

.primary-action {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0)),
    var(--apple-blue);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 12px 28px rgba(94, 168, 255, 0.2);
}

.primary-action:hover {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0)),
    #409cff;
}

/* Compact actions keep repeated lists calm while primary actions remain prominent. */
@media (min-width: 981px) {
  .meetings-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.meeting-list-panel .meeting-list {
  gap: 4px;
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

.meeting-list-panel .meeting-actions {
  grid-column: auto;
  justify-self: end;
  flex-wrap: nowrap;
  gap: 6px;
  margin: 0;
}

@media (max-width: 980px) {

  .meeting-list-panel .meeting-actions {
    grid-column: 2;
    grid-row: 1 / span 4;
    align-self: center;
  }
}

.meeting-calendar-day {
  gap: 4px;
  cursor: pointer;
}

.meeting-calendar-day:hover {
  border-color: rgba(94, 168, 255, 0.7);
  background: rgba(94, 168, 255, 0.2);
}

.meetings-layout .form-panel {
  grid-column: auto;
}

.meeting-list-panel {
  grid-column: 1 / -1;
}

#meetingForm {
  display: grid;
  gap: 16px;
}

#meetingForm .panel-head {
  margin-bottom: 0;
}

.meeting-form-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: end;
}

.meeting-form-note-row {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) 148px;
  gap: 14px;
  align-items: stretch;
}

#meetingForm label {
  gap: 8px;
}

#meetingForm input {
  height: 42px;
}

#meetingForm textarea {
  height: 72px;
  min-height: 72px;
  max-height: 72px;
  resize: none;
  line-height: 1.35;
}

.meeting-form-actions {
  display: grid;
  gap: 8px;
}

.meeting-form-actions .primary-action {
  align-self: end;
  height: 72px;
  min-height: 72px;
}

.row-actions button,
.small-action,
.inline-action {
  min-height: 30px;
  padding: 0 9px;
  font-size: 12px;
  font-weight: 620;
}

.ghost-action,
.inline-action,
.small-action {
  color: var(--accent-dark);
}

.ghost-action:hover,
.inline-action:hover,
.small-action:hover,
.row-actions button:hover {
  border-color: rgba(94, 168, 255, 0.48);
  background: rgba(94, 168, 255, 0.12);
}

input,
select,
textarea {
  color-scheme: dark;
  color: var(--ink);
  border-color: rgba(255, 255, 255, 0.12);
  caret-color: var(--apple-blue);
  accent-color: var(--apple-blue);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.066), rgba(255, 255, 255, 0.022)),
    rgba(255, 255, 255, 0.052);
}

select {
  color-scheme: dark;
  appearance: auto;
}

select option,
select optgroup {
  color: #f5f5f7;
  background-color: #1c1c1e;
}

select option:checked,
select option:hover,
select option:focus {
  color: #ffffff;
  background-color: var(--apple-blue);
}

input:hover,
select:hover,
textarea:hover,
input:focus,
select:focus,
textarea:focus {
  border-color: rgba(94, 168, 255, 0.55);
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline-color: rgba(94, 168, 255, 0.72);
}

.status,
.phase-status {
  border-color: rgba(94, 168, 255, 0.3);
  color: #c6e2ff;
  background: rgba(94, 168, 255, 0.12);
}

.time-person-card.active,
.time-person-card:hover,
.month-chip.active,
.month-chip:hover,
.calendar-day button,
.calendar-popover button.active {
  border-color: rgba(94, 168, 255, 0.46);
  background:
    linear-gradient(180deg, rgba(94, 168, 255, 0.17), rgba(94, 168, 255, 0.07)),
    rgba(255, 255, 255, 0.04);
}

.calendar-grid button.active,
.calendar-grid button:hover,
.calendar-head button:hover,
.month-picker-grid button.active,
.month-picker-grid button:hover {
  border-color: var(--apple-blue);
  background: var(--apple-blue);
}

.owner-balance-summary {
  border-color: rgba(191, 90, 242, 0.3);
  background:
    linear-gradient(135deg, rgba(191, 90, 242, 0.17), rgba(94, 168, 255, 0.1)),
    rgba(255, 255, 255, 0.035);
}

.money-item.income::before {
  background: var(--apple-green);
}

.money-item.project-expense::before,
.money-item.overhead::before {
  background: var(--apple-orange);
}

.money-item.payroll::before {
  background: var(--apple-red);
}

.money-item.settlement::before {
  background: var(--apple-purple);
}

.money-item.income .money-type,
.money-amount.positive {
  color: #b7f7c8;
  background: rgba(48, 209, 88, 0.16);
  border-color: rgba(48, 209, 88, 0.32);
}

.money-item.project-expense .money-type,
.money-item.overhead .money-type,
.money-amount.negative {
  color: #ffd7a1;
  background: rgba(255, 159, 10, 0.16);
  border-color: rgba(255, 159, 10, 0.32);
}

.money-item.payroll .money-type {
  color: #ffbab5;
  background: rgba(255, 69, 58, 0.15);
  border-color: rgba(255, 69, 58, 0.3);
}

.money-item.settlement .money-type {
  color: #e7c7ff;
  background: rgba(191, 90, 242, 0.16);
  border-color: rgba(191, 90, 242, 0.32);
}

.bar-fill,
.timeline-fill {
  background: linear-gradient(90deg, var(--apple-blue), var(--apple-green));
}

.bar-fill.over {
  background: var(--apple-red);
}

.timeline-dot {
  box-shadow: 0 0 0 2px rgba(94, 168, 255, 0.45);
}

.view-title-group {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  font-family: var(--font-ui);
}

.view-title-group h1 {
  line-height: 1.1;
}

.time-top-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--ink);
  font-family: inherit;
  font-size: 31px;
  font-weight: 680;
  line-height: 1.1;
}

.time-top-summary::before,
.time-top-summary strong + strong::before {
  color: var(--muted);
  font-weight: 520;
}

.time-top-summary::before {
  content: "|";
}

.time-top-summary strong {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.time-top-summary strong + strong::before {
  content: "|";
}

#timeForm .field-note {
  display: none;
}

.meeting-form-note-row,
.time-form-note-row {
  grid-template-columns: minmax(0, 1fr) 178px;
  gap: 12px;
  align-items: stretch;
}

#meetingForm textarea,
#timeForm textarea,
.meeting-form-actions .primary-action,
.time-form-actions .primary-action {
  height: 70px;
  min-height: 70px;
  max-height: 70px;
}

.meeting-form-actions,
.time-form-actions {
  align-self: end;
}

#meetingForm,
#timeForm {
  align-content: start;
}

.work-entry-layout .time-form-note-row,
.meeting-form-note-row {
  grid-template-columns: minmax(0, 1fr) 178px;
}

.work-entry-layout {
  align-items: stretch;
}

.meetings-layout {
  align-items: stretch;
}

.work-entry-layout > #timeForm,
.work-entry-layout > .hours-month-calendar,
.meetings-layout > #meetingForm,
.meetings-layout > .meeting-calendar-panel {
  min-height: 100%;
}

.meeting-calendar-panel {
  display: grid;
  align-self: stretch;
}

.meeting-calendar-panel > .hours-month-calendar {
  min-height: 100%;
}

.hours-month-calendar {
  grid-template-rows: auto auto minmax(0, 1fr);
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.105);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.022)),
    rgba(22, 23, 28, 0.78);
  box-shadow: var(--shadow);
  backdrop-filter: blur(22px);
}

.hours-calendar-grid {
  min-height: 0;
  grid-auto-rows: minmax(46px, 1fr);
}

.time-entry-item {
  grid-template-columns: 92px minmax(170px, 1.4fr) minmax(140px, 1fr) 70px minmax(180px, 1.4fr) 132px;
}

.meeting-actions,
.time-entry-actions {
  width: 132px;
  min-width: 132px;
}

.meeting-actions,
.time-entry-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 6px;
}

.meeting-actions button,
.time-entry-actions button {
  flex: 0 0 auto;
}

@media (max-width: 980px) {
  .view-title-group {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .time-top-summary {
    flex-wrap: wrap;
  }

  .time-entry-item {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

@media (min-width: 981px) {
  .work-entry-layout > #timeForm,
  .work-entry-layout > .hours-month-calendar,
  .meetings-layout > #meetingForm,
  .meeting-calendar-panel > .hours-month-calendar {
    min-height: 440px;
  }
}

/* Final alignment pass for Projects, Práce and Schůzky. */
#projectsView table,
#archiveView table {
  min-width: 1180px;
}

#archiveView table {
  min-width: 1180px;
}

#projectsView th:nth-child(1),
#projectsView td:nth-child(1),
#archiveView th:nth-child(1),
#archiveView td:nth-child(1) {
  width: 31%;
}

#projectsView th:nth-child(2),
#projectsView td:nth-child(2),
#archiveView th:nth-child(2),
#archiveView td:nth-child(2) {
  width: 27%;
}

#projectsView th:nth-child(3),
#projectsView td:nth-child(3),
#archiveView th:nth-child(3),
#archiveView td:nth-child(3) {
  width: 29%;
}

#projectsView th:nth-child(4),
#projectsView td:nth-child(4),
#archiveView th:nth-child(4),
#archiveView td:nth-child(4) {
  width: 13%;
}

#projectsView th:nth-child(1),
#projectsView td:nth-child(1) {
  width: 34%;
}

#projectsView th:nth-child(2),
#projectsView td:nth-child(2) {
  width: 50%;
}

#projectsView th:nth-child(3),
#projectsView td:nth-child(3) {
  width: 16%;
}

#projectsView th:nth-child(3) {
  text-align: left;
}

#archiveView th:nth-child(1),
#archiveView td:nth-child(1) {
  width: 30%;
}

#archiveView th:nth-child(2),
#archiveView td:nth-child(2) {
  width: 44%;
}

#archiveView th:nth-child(3),
#archiveView td:nth-child(3) {
  width: 26%;
}

/* Final standalone card layout for Projects and Archive. */
#projectsView .table-wrap,
#archiveView .table-wrap {
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow-x: auto;
  padding: 0 2px 2px;
}

#projectsView table,
#archiveView table {
  display: block;
  min-width: 1180px;
  border-collapse: separate;
  border-spacing: 0;
  background: transparent;
}

#projectsView thead,
#archiveView thead {
  position: sticky;
  top: 0;
  z-index: 6;
  display: block;
  margin-bottom: 10px;
}

#projectsView tbody,
#archiveView tbody {
  display: grid;
  gap: 12px;
}

#projectsView thead tr,
#projectsView tbody tr,
#archiveView thead tr,
#archiveView tbody tr {
  display: grid;
  align-items: stretch;
}

#projectsView thead tr,
#projectsView tbody tr {
  grid-template-columns: 34% 50% 16%;
}

#archiveView thead tr,
#archiveView tbody tr {
  grid-template-columns: 34% 40% 26%;
}

#projectsView tbody tr,
#archiveView tbody tr {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.018)),
    rgba(28, 28, 32, 0.88);
  box-shadow: var(--shadow);
  filter: none;
}

#projectsView th,
#archiveView th {
  position: static;
  display: block;
  width: auto !important;
  border: 0;
  background: rgba(38, 38, 44, 0.96);
}

#projectsView th:first-child,
#archiveView th:first-child {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

#projectsView th:last-child,
#archiveView th:last-child {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

#projectsView td,
#archiveView td,
#projectsView tbody td,
#archiveView tbody td,
#projectsView tbody td:first-child,
#archiveView tbody td:first-child,
#projectsView tbody td:last-child,
#archiveView tbody td:last-child {
  display: block;
  width: auto !important;
  border: 0;
  border-radius: 0;
  background: transparent;
}

/* Design unification pass 01: shared rhythm for panels, controls, lists and dense cards. */
:root {
  --ui-gap: 12px;
  --ui-gap-sm: 8px;
  --ui-pad: 14px;
  --ui-pad-lg: 18px;
  --ui-control-sm: 30px;
  --ui-card-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.046), rgba(255, 255, 255, 0.018)),
    rgba(28, 28, 32, 0.88);
  --ui-row-bg:
    linear-gradient(90deg, rgba(255, 255, 255, 0.048), rgba(255, 255, 255, 0.018)),
    rgba(22, 22, 26, 0.86);
  --ui-good-bg: rgba(142, 163, 125, 0.12);
  --ui-good-line: rgba(142, 163, 125, 0.34);
  --ui-warn-bg: rgba(94, 168, 255, 0.105);
  --ui-warn-line: rgba(94, 168, 255, 0.36);
  --ui-bad-bg: rgba(255, 92, 103, 0.09);
  --ui-bad-line: rgba(255, 92, 103, 0.32);
}

.panel {
  padding: var(--ui-pad-lg);
}

.panel,
.metric,
.project-card,
.coordination-context-card,
.coordination-progress-card,
.coordination-metric,
.coordination-timeline-item,
.coordination-item,
.owner-balance-card,
.owner-balance-summary,
.money-list,
.money-item {
  border-color: var(--line);
  border-radius: var(--radius);
}

.panel-head {
  min-height: 44px;
  align-items: center;
  gap: var(--ui-gap);
  margin-bottom: var(--ui-gap);
}

.panel-head h2 {
  font-size: 18px;
  font-weight: 740;
  line-height: 1.12;
}

.panel-head span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.metrics {
  gap: var(--ui-gap);
  margin-bottom: var(--ui-pad-lg);
}

.metric {
  min-height: 112px;
  padding: var(--ui-pad);
}

.metric span,
.owner-balance-card span,
.owner-balance-card dt,
.coordination-metric span,
.coordination-metric small,
.coordination-timeline-item span,
.coordination-timeline-item small {
  font-size: 12px;
  line-height: 1.3;
}

.metric strong,
.owner-balance-summary strong,
.owner-balance-card strong,
.coordination-metric strong {
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.12;
}

.primary-action,
.ghost-action {
  min-height: 34px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 680;
  line-height: 1;
}

.inline-action,
.danger-action,
.status,
.archive-state-label,
.coordination-type,
.coordination-status,
.money-type {
  min-height: 26px;
  border-radius: var(--radius-sm);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 680;
  line-height: 1;
}

.inline-action,
.danger-action {
  padding: 0 9px;
}

.segmented-control {
  gap: 3px;
  padding: 3px;
  border-radius: var(--radius-sm);
}

.segmented-control button {
  min-height: 28px;
  padding: 0 10px;
  border-radius: calc(var(--radius-sm) - 1px);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 650;
}

label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 620;
  line-height: 1.25;
}

input,
select,
textarea {
  min-height: 36px;
  border-radius: var(--radius-sm);
  font-size: 13px;
}

.money-form,
.coordination-controls,
.coordination-form,
.finance-filter-fields,
.project-form-split,
.project-form-pair,
.project-form-finance-grid,
.form-row {
  gap: var(--ui-gap);
}

.project-list,
.entry-list,
.meeting-list,
.coordination-page,
.coordination-list,
.time-entry-list,
.meeting-list-panel .meeting-list,
.money-list {
  gap: var(--ui-gap-sm);
}

.project-card,
.coordination-timeline-item,
.coordination-item,
.money-item {
  background: var(--ui-row-bg);
}

.coordination-item,
.money-item {
  min-height: 42px;
}

.project-card header {
  align-items: center;
  gap: var(--ui-gap);
  margin-bottom: var(--ui-gap-sm);
}

.project-card h3 {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 720;
  line-height: 1.25;
}

.coordination-context-grid {
  gap: var(--ui-gap);
}

.coordination-context-card {
  min-height: 108px;
  padding: var(--ui-pad);
  background: rgba(255, 255, 255, 0.035);
}

.coordination-context-card.active,
.coordination-context-card:hover {
  border-color: var(--ui-warn-line);
  background: var(--ui-warn-bg);
}

.coordination-progress-card,
.coordination-metric,
.coordination-timeline-item,
.coordination-item {
  background: rgba(255, 255, 255, 0.035);
}

.coordination-item {
  grid-template-columns: 28px minmax(0, 1fr) auto;
  padding: 8px 10px;
}

.coordination-item.is-done {
  border-color: var(--ui-good-line);
  background: var(--ui-good-bg);
}

.coordination-item.is-late,
.coordination-timeline-item.is-late {
  border-color: var(--ui-bad-line);
  background: var(--ui-bad-bg);
}

.money-list {
  border-radius: var(--radius);
  padding: var(--ui-gap-sm);
}

.money-header,
.money-item {
  gap: var(--ui-gap);
}

.money-header {
  padding: 4px 12px 6px 18px;
  border-radius: var(--radius-sm);
}

.money-item {
  min-height: 42px;
  padding: 7px 10px 7px 18px;
  border-radius: var(--radius-sm);
}

.money-type {
  min-width: 78px;
  padding: 0 8px;
}

.money-amount {
  border-radius: var(--radius-sm);
}

#projectsView tbody,
#archiveView tbody {
  gap: var(--ui-gap);
}

#projectsView tbody tr,
#archiveView tbody tr {
  border-radius: var(--radius);
  background: var(--ui-card-bg);
}

#projectsView th,
#archiveView th {
  padding: 10px 14px;
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 720;
  letter-spacing: 0;
}

#projectsView td,
#archiveView td {
  padding: 14px;
}

#projectsView .status-cell .status,
#projectsView .status-cell .pin-action,
#projectsView .status-cell .project-detail-action,
#projectsView .status-cell .row-actions button,
#projectsView .status-cell .coordination-phase-action,
#archiveView .archive-right-actions button,
#archiveView .archive-state-label,
#archiveView .archive-detail-action,
#archiveView .status-cell .row-actions button {
  min-height: 28px;
  border-radius: var(--radius-sm);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 680;
}

#projectsView .performance-metrics,
#archiveView .performance-metrics,
#archiveView .archive-result-grid {
  gap: var(--ui-gap-sm);
}

#projectsView .performance-metrics span,
#archiveView .performance-metrics span,
.archive-result-pill,
.performance-detail-row {
  border-radius: var(--radius-sm);
}

.archive-state-label {
  border-color: var(--ui-good-line);
  background: var(--ui-good-bg);
}

.archive-result-pill.is-good {
  border-color: var(--ui-good-line);
  background: var(--ui-good-bg);
}

.archive-result-pill.is-bad {
  border-color: var(--ui-bad-line);
  background: var(--ui-bad-bg);
}

@media (max-width: 980px) {
  .panel {
    padding: var(--ui-pad);
  }

  .panel-head {
    align-items: flex-start;
  }

  .money-header {
    display: none;
  }
}

/* Design unification pass 02: calmer Apple-like surface hierarchy and denser operations UI. */
:root {
  --surface-glass:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.018)),
    rgba(25, 25, 30, 0.9);
  --surface-row:
    linear-gradient(90deg, rgba(255, 255, 255, 0.046), rgba(255, 255, 255, 0.014)),
    rgba(20, 20, 24, 0.9);
  --action-blue: #5e9dff;
  --action-gold: rgb(94, 168, 255);
  --action-gold-soft: rgba(94, 168, 255, 0.16);
}

.workspace {
  padding: 26px;
}

.topbar,
.panel,
.metric,
.table-wrap,
.owner-balance-card,
.owner-balance-summary,
#projectsView tbody tr,
#archiveView tbody tr {
  background: var(--surface-glass);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 82px;
  margin: -8px 0 18px;
  padding: 14px 16px;
  backdrop-filter: blur(28px);
}

.view-title-group {
  min-width: 0;
}

h1,
#viewTitle {
  font-size: 30px;
  font-weight: 720;
  line-height: 1.08;
}

.time-top-summary {
  margin-top: 4px;
  gap: 7px;
}

.time-top-summary strong {
  border: 0;
  padding: 0;
  color: var(--muted);
  background: transparent;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 680;
}

.time-top-summary strong + strong::before {
  content: "|";
  margin: 0 7px 0 0;
  color: rgba(255, 255, 255, 0.22);
}

.role-controls {
  display: grid;
  grid-template-columns: 150px 170px auto;
  align-items: end;
  gap: 9px;
  min-height: 0;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.035);
}

.role-controls label {
  min-width: 0;
  font-size: 10px;
}

.role-controls select {
  min-height: 34px;
  font-size: 12px;
}

.role-controls .primary-action {
  min-height: 34px;
  white-space: nowrap;
}

.nav {
  gap: 6px;
}

.nav-item {
  min-height: 38px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: rgba(245, 245, 247, 0.66);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 650;
}

.nav-item.active {
  border-color: rgba(94, 168, 255, 0.52);
  color: var(--ink);
  background:
    linear-gradient(90deg, rgba(94, 168, 255, 0.18), rgba(94, 168, 255, 0.08)),
    rgba(255, 255, 255, 0.045);
  box-shadow: inset 3px 0 0 var(--action-blue);
}

.nav-item:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.05);
}

.primary-action {
  border-color: rgba(94, 168, 255, 0.48);
  color: #111113;
  background:
    linear-gradient(180deg, rgba(165, 162, 250, 0.98), rgba(94, 168, 255, 0.96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 10px 24px rgba(94, 168, 255, 0.14);
}

.primary-action:hover {
  border-color: rgba(165, 162, 250, 0.72);
  color: #0f1012;
  background:
    linear-gradient(180deg, rgba(165, 162, 250, 1), rgba(90, 87, 230, 0.98));
}

.ghost-action,
.small-action,
.inline-action,
.danger-action {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.11);
}

.ghost-action:hover,
.small-action:hover,
.inline-action:hover {
  border-color: rgba(94, 168, 255, 0.38);
  background: var(--action-gold-soft);
}

.danger-action,
.ghost-action.danger-action,
.danger-inline {
  border-color: rgba(255, 92, 103, 0.22);
  color: #ffb8c2;
  background: rgba(255, 92, 103, 0.09);
}

.danger-action:hover,
.ghost-action.danger-action:hover,
.danger-inline:hover {
  border-color: rgba(255, 92, 103, 0.42);
  background: rgba(255, 92, 103, 0.15);
}

.panel {
  padding: 16px;
}

.panel + .panel,
.finance-extra-panel,
.owner-balance-panel {
  margin-top: 16px;
}

.panel-head {
  min-height: 40px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.panel-head h2 {
  font-size: 17px;
  font-weight: 720;
}

.panel-head span {
  font-size: 12px;
}

.metric {
  min-height: 104px;
  padding: 14px;
}

.metric small {
  margin-top: 7px;
  line-height: 1.35;
}

form {
  gap: 12px;
}

label {
  gap: 6px;
  font-size: 11px;
}

input,
select,
textarea {
  min-height: 36px;
  padding: 8px 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.022)),
    rgba(34, 34, 40, 0.82);
}

textarea {
  line-height: 1.38;
}

.money-form,
.coordination-controls,
.coordination-form,
.finance-filter-fields,
.team-row,
.phase-template-row,
.profession-row {
  gap: 9px;
}

.finance-filter-bar {
  gap: 9px;
  margin: 10px 0 12px;
}

.finance-type-filter {
  width: fit-content;
  max-width: 100%;
}

.finance-filter-fields {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.finance-filter-summary {
  font-size: 12px;
}

.money-list {
  max-height: 520px;
  padding: 7px;
  border-radius: var(--radius);
}

.money-header,
.money-item {
  grid-template-columns:
    104px
    minmax(230px, 1.8fr)
    minmax(128px, 0.9fr)
    minmax(132px, 0.95fr)
    92px
    120px
    64px;
  gap: 10px;
}

.money-header {
  padding: 5px 10px 6px 18px;
  font-size: 10px;
}

.money-item {
  min-height: 40px;
  padding: 6px 9px 6px 18px;
}

.money-description,
.money-owner,
.money-place,
.money-date {
  font-size: 12px;
}

.money-amount {
  padding: 4px 8px;
  font-size: 13px;
}

.money-item .inline-action {
  min-height: 26px;
  padding: 0 8px;
}

.coordination-page {
  gap: 12px;
}

.coordination-context-grid {
  grid-template-columns: repeat(6, minmax(132px, 1fr));
  gap: 9px;
}

.coordination-context-card {
  min-height: 104px;
  padding: 12px;
}

.coordination-card-number {
  font-size: 12px;
}

.coordination-context-card strong {
  font-size: 12px;
}

.coordination-metrics,
.coordination-status-layout {
  gap: 12px;
}

.coordination-progress-card,
.coordination-metric {
  padding: 10px 12px;
}

.coordination-progress-head strong,
.coordination-metric strong {
  font-size: 20px;
}

.coordination-list {
  gap: 6px;
}

.coordination-item {
  min-height: 46px;
  padding: 7px 9px;
  background: var(--surface-row);
}

.coordination-main p {
  margin-top: 5px;
}

.coordination-meta {
  gap: 4px 8px;
  margin-top: 5px;
}

.table-wrap {
  background: rgba(15, 15, 19, 0.58);
}

table {
  background: transparent;
}

th,
td {
  padding: 10px 11px;
  background: transparent;
}

th {
  color: rgba(245, 245, 247, 0.52);
  background: rgba(255, 255, 255, 0.045);
  font-size: 11px;
  font-weight: 720;
}

td {
  font-size: 13px;
}

#projectsView table,
#archiveView table {
  min-width: 1120px;
}

#projectsView thead,
#archiveView thead {
  margin-bottom: 8px;
}

#projectsView thead tr,
#projectsView tbody tr {
  grid-template-columns: minmax(300px, 0.32fr) minmax(520px, 0.52fr) minmax(138px, 0.16fr);
}

#archiveView thead tr,
#archiveView tbody tr {
  grid-template-columns: minmax(300px, 0.32fr) minmax(430px, 0.42fr) minmax(250px, 0.26fr);
}

#projectsView tbody,
#archiveView tbody {
  gap: 10px;
}

#projectsView tbody tr,
#archiveView tbody tr {
  overflow: hidden;
}

#projectsView td,
#archiveView td {
  padding: 13px;
}

#projectsView th,
#archiveView th {
  padding: 9px 13px;
}

.project-phase-row-title strong,
.project-title-row strong {
  font-size: 14px;
  line-height: 1.2;
}

.project-column-list {
  gap: 7px;
}

#projectsView .performance-metrics,
#archiveView .performance-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

#projectsView .performance-metrics span,
#archiveView .performance-metrics span,
.performance-detail-row,
.archive-result-pill {
  min-height: 30px;
  padding: 6px 8px;
  font-size: 12px;
}

#projectsView .performance-bars,
#archiveView .performance-bars {
  gap: 9px;
}

#projectsView .status-cell,
#archiveView .archive-results-cell {
  padding-left: 10px;
}

#projectsView .status-cell .project-column-list,
#archiveView .archive-outcome-wrap {
  gap: 7px;
}

#projectsView .status-cell .status,
#projectsView .status-cell .pin-action,
#projectsView .status-cell .project-detail-action,
#projectsView .status-cell .row-actions button,
#projectsView .status-cell .coordination-phase-action,
#archiveView .archive-right-actions button,
#archiveView .archive-state-label,
#archiveView .archive-detail-action,
#archiveView .status-cell .row-actions button {
  width: 100%;
  min-height: 29px;
  padding: 0 9px;
}

#projectsView .status-cell .pin-action,
#projectsView .status-cell .project-detail-action,
#projectsView .status-cell .row-actions button,
#projectsView .status-cell .coordination-phase-action,
#archiveView .archive-right-actions button,
#archiveView .archive-detail-action {
  color: rgba(245, 245, 247, 0.74);
  background: rgba(255, 255, 255, 0.035);
}

#projectsView .status-cell .project-detail-action,
#archiveView .archive-detail-action {
  color: rgba(245, 245, 247, 0.9);
  background: rgba(94, 168, 255, 0.12);
  border-color: rgba(94, 168, 255, 0.24);
}

#projectsView .status-cell .project-detail-action:hover,
#archiveView .archive-detail-action:hover {
  background: rgba(94, 168, 255, 0.18);
  border-color: rgba(94, 168, 255, 0.38);
}

#archiveView .archive-result-grid {
  grid-template-columns: 1fr;
  gap: 7px;
}

#archiveView .archive-results-cell .archive-result-pill {
  min-height: 34px;
}

.status,
.archive-state-label {
  justify-content: center;
}

.time-self-entries-panel .panel-head,
.meeting-list-panel .panel-head,
#timeForm .panel-head,
#meetingForm .panel-head {
  min-height: 42px;
  padding-bottom: 9px;
}

#timeForm,
#meetingForm {
  padding: 16px;
}

#timeForm textarea,
#meetingForm textarea,
.time-form-actions .primary-action,
.meeting-form-actions .primary-action {
  height: 66px;
  min-height: 66px;
  max-height: 66px;
}

@media (max-width: 1180px) {
  .role-controls {
    grid-template-columns: repeat(2, minmax(140px, 1fr));
  }

  .role-controls .primary-action {
    grid-column: 1 / -1;
  }

  .coordination-context-grid {
    grid-template-columns: repeat(3, minmax(132px, 1fr));
  }
}

@media (max-width: 980px) {
  .workspace {
    padding: 18px;
  }

  .topbar {
    position: static;
    min-height: 0;
  }

  .role-controls,
  .finance-filter-fields,
  .coordination-status-layout,
  .coordination-metrics {
    grid-template-columns: 1fr;
  }

  .coordination-context-grid {
    grid-template-columns: repeat(2, minmax(132px, 1fr));
  }
}

/* Tooltip alignment for financial performance explanations. */
#projectsView .performance-metrics .metric-hint-item,
#archiveView .performance-metrics .metric-hint-item {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}

#projectsView .performance-metrics .metric-hint-item .hint-dot,
#archiveView .performance-metrics .metric-hint-item .hint-dot {
  transform: translateY(2px);
}

.performance-detail-row > span:first-child,
.archive-result-pill > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  overflow: visible;
  text-overflow: clip;
}

#projectsView .performance-metrics .hint-dot,
#archiveView .performance-metrics .hint-dot,
.performance-detail-row .hint-dot,
.archive-result-pill .hint-dot {
  display: inline-grid;
  overflow: visible;
  white-space: normal;
}

#archiveView .archive-results-cell .hint-dot::after {
  right: 0;
  left: auto;
  transform: translate(0, 4px);
}

#archiveView .archive-results-cell .hint-dot:hover::after,
#archiveView .archive-results-cell .hint-dot:focus-visible::after {
  transform: translate(0, 0);
}

/* Final standalone card layout for Projects and Archive. */
#projectsView .table-wrap,
#archiveView .table-wrap {
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow-x: auto;
  padding: 0 2px 2px;
}

#projectsView table,
#archiveView table {
  display: block;
  min-width: 1180px;
  border-collapse: separate;
  border-spacing: 0;
  background: transparent;
}

#projectsView thead,
#archiveView thead {
  position: sticky;
  top: 0;
  z-index: 6;
  display: block;
  margin-bottom: 10px;
}

#projectsView tbody,
#archiveView tbody {
  display: grid;
  gap: 12px;
}

#projectsView thead tr,
#projectsView tbody tr,
#archiveView thead tr,
#archiveView tbody tr {
  display: grid;
  align-items: stretch;
}

#projectsView thead tr,
#projectsView tbody tr {
  grid-template-columns: 34% 50% 16%;
}

#archiveView thead tr,
#archiveView tbody tr {
  grid-template-columns: 34% 40% 26%;
}

#projectsView tbody tr,
#archiveView tbody tr {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.018)),
    rgba(28, 28, 32, 0.88);
  box-shadow: var(--shadow);
  filter: none;
}

#projectsView th,
#archiveView th {
  position: static;
  display: block;
  width: auto !important;
  border: 0;
  background: rgba(38, 38, 44, 0.96);
}

#projectsView th:first-child,
#archiveView th:first-child {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

#projectsView th:last-child,
#archiveView th:last-child {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

#projectsView td,
#archiveView td,
#projectsView tbody td,
#archiveView tbody td,
#projectsView tbody td:first-child,
#archiveView tbody td:first-child,
#projectsView tbody td:last-child,
#archiveView tbody td:last-child {
  display: block;
  width: auto !important;
  border: 0;
  border-radius: 0;
  background: transparent;
}

/* Final standalone card layout for Projects and Archive. */
#projectsView .table-wrap,
#archiveView .table-wrap {
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow-x: auto;
  padding: 0 2px 2px;
}

#projectsView table,
#archiveView table {
  display: block;
  min-width: 1180px;
  border-collapse: separate;
  border-spacing: 0;
  background: transparent;
}

#projectsView thead,
#archiveView thead {
  position: sticky;
  top: 0;
  z-index: 6;
  display: block;
  margin-bottom: 10px;
}

#projectsView tbody,
#archiveView tbody {
  display: grid;
  gap: 12px;
}

#projectsView thead tr,
#projectsView tbody tr,
#archiveView thead tr,
#archiveView tbody tr {
  display: grid;
  align-items: stretch;
}

#projectsView thead tr,
#projectsView tbody tr {
  grid-template-columns: 34% 50% 16%;
}

#archiveView thead tr,
#archiveView tbody tr {
  grid-template-columns: 34% 40% 26%;
}

#projectsView tbody tr,
#archiveView tbody tr {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.018)),
    rgba(28, 28, 32, 0.88);
  box-shadow: var(--shadow);
  filter: none;
}

#projectsView th,
#archiveView th {
  position: static;
  display: block;
  width: auto !important;
  border: 0;
  background: rgba(38, 38, 44, 0.96);
}

#projectsView th:first-child,
#archiveView th:first-child {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

#projectsView th:last-child,
#archiveView th:last-child {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

#projectsView td,
#archiveView td,
#projectsView tbody td,
#archiveView tbody td,
#projectsView tbody td:first-child,
#archiveView tbody td:first-child,
#projectsView tbody td:last-child,
#archiveView tbody td:last-child {
  display: block;
  width: auto !important;
  border: 0;
  border-radius: 0;
  background: transparent;
}

/* Projects and archive as standalone phase cards. */
#projectsView .table-wrap,
#archiveView .table-wrap {
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow-x: auto;
  padding: 0 2px 2px;
}

#projectsView table,
#archiveView table {
  display: block;
  border-collapse: separate;
  border-spacing: 0;
  background: transparent;
}

#projectsView thead,
#archiveView thead {
  position: sticky;
  top: 0;
  z-index: 6;
  display: block;
  margin-bottom: 10px;
}

#projectsView tbody,
#archiveView tbody {
  display: grid;
  gap: 12px;
}

#projectsView thead tr,
#projectsView tbody tr,
#archiveView thead tr,
#archiveView tbody tr {
  display: grid;
  align-items: stretch;
}

#projectsView thead tr,
#projectsView tbody tr {
  grid-template-columns: 34% 50% 16%;
}

#archiveView thead tr,
#archiveView tbody tr {
  grid-template-columns: 34% 40% 26%;
}

#projectsView tbody tr,
#archiveView tbody tr {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.018)),
    rgba(28, 28, 32, 0.88);
  box-shadow: var(--shadow);
  filter: none;
}

#projectsView th,
#archiveView th {
  position: static;
  display: block;
  width: auto !important;
  border-bottom: 0;
  background: rgba(38, 38, 44, 0.96);
}

#projectsView th:first-child,
#archiveView th:first-child {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

#projectsView th:last-child,
#archiveView th:last-child {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

#projectsView td,
#archiveView td {
  display: block;
  width: auto !important;
  border: 0;
  background: transparent;
}

#projectsView tbody td:first-child,
#archiveView tbody td:first-child,
#projectsView tbody td:last-child,
#archiveView tbody td:last-child {
  border: 0;
  border-radius: 0;
}

#projectsView table,
#archiveView table {
  border-collapse: separate;
  border-spacing: 0 10px;
  background: transparent;
}

#projectsView thead th,
#archiveView thead th {
  border-bottom: 0;
}

#projectsView tbody tr,
#archiveView tbody tr {
  filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.12));
}

#projectsView tbody td,
#archiveView tbody td {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)),
    rgba(28, 28, 32, 0.86);
}

#projectsView tbody td:first-child,
#archiveView tbody td:first-child {
  border-left: 1px solid var(--line);
  border-radius: var(--radius) 0 0 var(--radius);
}

#projectsView tbody td:last-child,
#archiveView tbody td:last-child {
  border-right: 1px solid var(--line);
  border-radius: 0 var(--radius) var(--radius) 0;
}

#projectsView th:first-child,
#archiveView th:first-child {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

#projectsView th:last-child,
#archiveView th:last-child {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

#archiveView th:nth-child(3) {
  text-align: right;
}

#projectsView .project-bars {
  display: grid;
  align-self: end;
  align-content: end;
  grid-template-rows: 30px 30px;
  gap: 10px;
  min-height: 70px;
}

#projectsView .project-bars .mini-progress {
  min-height: 30px;
}

#projectsView .project-performance-cell,
#archiveView .project-performance-cell {
  min-width: 0;
}

#projectsView .project-performance,
#archiveView .project-performance {
  display: grid;
  gap: 12px;
  min-width: 0;
}

#projectsView .performance-metrics,
#archiveView .performance-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px 12px;
}

#projectsView .performance-metrics span,
#archiveView .performance-metrics span {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#projectsView .performance-metrics strong,
#archiveView .performance-metrics strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 760;
}

#archiveView .performance-metrics-subtle {
  gap: 6px 12px;
  padding-top: 1px;
}

#archiveView .performance-metrics-subtle span {
  font-size: 12px;
}

#archiveView .performance-metrics-subtle strong {
  font-size: 13px;
}

#projectsView .performance-external-detail,
#archiveView .performance-external-detail {
  display: grid;
  justify-items: start;
  gap: 5px;
}

#projectsView .performance-external-detail .inline-action,
#archiveView .performance-external-detail .inline-action {
  min-height: 24px;
  margin-left: 0;
  padding: 0 8px;
  font-size: 11px;
}

#projectsView .performance-bars,
#archiveView .performance-bars {
  display: grid;
  gap: 9px;
}

#projectsView .performance-bars .mini-progress,
#archiveView .performance-bars .mini-progress {
  margin: 0;
  min-width: 0;
}

#archiveView .archive-main-row td {
  padding-bottom: 14px;
}

.archive-outcome-wrap {
  width: 100%;
  max-width: none;
  margin-top: 0;
  padding-top: 0;
  background: transparent;
}

.mini-progress .bar,
.mini-progress .timeline-bar {
  width: 100%;
}

.external-cost-inline-detail {
  display: grid;
  width: 100%;
  margin-top: -2px;
  padding: 0;
  border: 0;
  background: transparent;
  gap: 10px;
}

.performance-detail-section {
  display: grid;
  width: 100%;
  gap: 5px;
}

.performance-detail-section > strong {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--ink);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.hint-dot {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  overflow: visible;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.04);
  font-size: 10px;
  font-weight: 760;
  line-height: 1;
  cursor: help;
  white-space: normal;
}

.hint-dot:hover,
.hint-dot:focus-visible {
  border-color: rgba(94, 168, 255, 0.42);
  color: var(--accent-dark);
  background: rgba(94, 168, 255, 0.12);
}

.hint-dot::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  z-index: 20;
  width: 270px;
  max-width: min(270px, 72vw);
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.028)),
    rgba(28, 28, 32, 0.98);
  box-shadow: var(--shadow);
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 520;
  letter-spacing: 0;
  line-height: 1.42;
  text-align: left;
  text-transform: none;
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity 0.14s ease, transform 0.14s ease;
}

.hint-dot:hover::after,
.hint-dot:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

.performance-detail-rows {
  display: grid;
  gap: 2px;
}

.performance-detail-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.performance-detail-row span,
.performance-detail-row strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.performance-detail-row strong {
  color: var(--ink);
  font-weight: 680;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.performance-detail-empty {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.archive-result-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(148px, 178px));
  justify-content: start;
  gap: 8px;
  margin-top: 0;
}

#archiveView .archive-performance .archive-result-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  justify-content: stretch;
}

#archiveView .status-cell .archive-outcome-wrap {
  width: 132px;
  margin-top: auto;
  justify-self: end;
}

#archiveView .status-cell .archive-result-grid {
  grid-template-columns: 1fr;
  gap: 6px;
  justify-content: stretch;
}

#archiveView .status-cell .archive-result-pill {
  width: 132px;
  min-height: 42px;
  display: grid;
  grid-template-columns: 6px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 8px;
  row-gap: 1px;
  padding: 6px 10px;
}

#archiveView .status-cell .archive-result-pill::before {
  grid-row: 1 / span 2;
}

#archiveView .status-cell .archive-result-pill span,
#archiveView .status-cell .archive-result-pill strong {
  margin-left: 0;
  text-align: left;
}

#archiveView .status-cell .archive-result-pill span {
  font-size: 11px;
  line-height: 1.1;
}

#archiveView .status-cell .archive-result-pill strong {
  font-size: 12px;
  line-height: 1.15;
}

.archive-result-pill {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 28px;
  gap: 7px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--field);
}

.archive-result-pill::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--muted);
}

.archive-result-pill span,
.archive-result-pill strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.archive-result-pill span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 620;
  letter-spacing: 0;
}

.archive-result-pill strong {
  margin-left: auto;
  color: var(--ink);
  font-size: 12px;
  font-weight: 760;
  text-align: right;
}

.archive-result-pill.is-good::before {
  background: rgba(142, 163, 125, 0.95);
}

.archive-result-pill.is-good {
  border-color: rgba(142, 163, 125, 0.3);
  background: rgba(142, 163, 125, 0.105);
}

.archive-result-pill.is-good strong {
  color: rgba(202, 214, 190, 0.95);
}

.archive-result-pill.is-bad::before {
  background: rgb(255, 92, 103);
}

.archive-result-pill.is-bad {
  border-color: rgba(255, 92, 103, 0.28);
  background:
    linear-gradient(90deg, rgba(176, 42, 56, 0.16), rgba(255, 92, 103, 0.075)),
    rgba(255, 255, 255, 0.018);
}

.archive-result-pill.is-bad strong {
  color: #ff9aaa;
}

#projectsView .performance-metrics .metric-hint-item,
#archiveView .performance-metrics .metric-hint-item {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}

#projectsView .performance-metrics .metric-hint-item .hint-dot,
#archiveView .performance-metrics .metric-hint-item .hint-dot {
  transform: translateY(2px);
}

.performance-detail-row > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  overflow: visible;
  text-overflow: clip;
}

.archive-result-pill > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  overflow: visible;
  text-overflow: clip;
}

#archiveView .archive-results-cell .hint-dot::after {
  right: 0;
  left: auto;
  transform: translate(0, 4px);
}

#archiveView .archive-results-cell .hint-dot:hover::after,
#archiveView .archive-results-cell .hint-dot:focus-visible::after {
  transform: translate(0, 0);
}

@media (max-width: 900px) {
  .archive-result-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-toolbar,
  .trend-row,
  .trend-bar-line {
    grid-template-columns: 1fr;
  }

  .dashboard-toolbar {
    display: grid;
  }

  .segmented-control {
    width: 100%;
  }

  .segmented-control button {
    flex: 1;
  }

  .trend-result,
  .trend-bar-line strong {
    justify-self: start;
    text-align: left;
  }
}

.status-cell {
  text-align: right;
}

.status-cell .project-column-list {
  align-items: end;
  justify-items: end;
  gap: 6px;
}

#archiveView .archive-right-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 6px;
  width: 238px;
  max-width: 100%;
}

#archiveView .archive-right-actions button {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  width: 100%;
  min-height: 28px;
  margin: 0;
  padding: 0 8px;
  color: var(--ink);
  background: var(--field);
  font-size: 12px;
  cursor: pointer;
}

#archiveView .archive-right-actions button:hover {
  border-color: var(--accent);
  background: var(--soft);
}

#archiveView .archive-right-actions .archive-state-label {
  justify-content: center;
  width: 100%;
}

.archive-state-label {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid rgba(142, 163, 125, 0.32);
  border-radius: var(--radius-sm);
  color: rgba(202, 214, 190, 0.95);
  background: rgba(142, 163, 125, 0.105);
  font-size: 12px;
  font-weight: 620;
  line-height: 1;
  cursor: default;
}

.archive-state-label::before {
  content: none;
}

.status-cell .row-actions {
  display: grid;
  justify-items: end;
  gap: 6px;
  width: 100%;
}

.status-cell .row-actions button {
  width: 104px;
  margin: 0;
}

.status-cell .status {
  display: inline-grid;
  place-items: center;
  width: 104px;
  min-height: 28px;
  margin: 0;
  border: 1px solid rgba(94, 168, 255, 0.42);
  border-radius: var(--radius-sm);
  color: var(--accent-dark);
  background: rgba(94, 168, 255, 0.13);
  font-size: 12px;
  font-weight: 620;
  line-height: 1;
  text-align: center;
}

#projectsView .status-cell .project-detail-action,
#projectsView .status-cell .coordination-phase-action {
  justify-self: end;
  width: 104px;
  min-height: 28px;
  margin: 0;
  padding: 0 8px;
  font-size: 11px;
}

#projectsView .status-cell .pin-action,
#projectsView .status-cell .coordination-phase-action {
  justify-self: end;
  width: 104px;
  min-height: 28px;
  margin: 0;
  padding: 0 8px;
  border-color: rgba(255, 255, 255, 0.13);
  color: var(--muted);
  background: rgba(255, 255, 255, 0.035);
  font-size: 11px;
}

#projectsView .status-cell .pin-action.is-pinned,
#projectsView .status-cell .coordination-phase-action.is-active {
  border-color: rgba(94, 168, 255, 0.5);
  color: var(--accent-dark);
  background: rgba(94, 168, 255, 0.14);
}

#archiveView .status-cell .row-actions button,
#archiveView .status-cell .status {
  width: 132px;
}

#archiveView .status-cell .project-column-list {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  align-content: stretch;
  justify-items: end;
  min-height: 230px;
}

#archiveView .status-cell .archive-outcome-wrap {
  align-self: end;
}

#archiveView .status-cell .archive-result-grid {
  grid-template-columns: 1fr;
  gap: 6px;
  justify-content: stretch;
}

#archiveView .status-cell .archive-result-pill {
  display: grid;
  grid-template-columns: 6px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  width: 132px;
  min-height: 42px;
  column-gap: 8px;
  row-gap: 1px;
  padding: 6px 10px;
}

#archiveView .status-cell .archive-result-pill::before {
  grid-row: 1 / span 2;
}

#archiveView .status-cell .archive-result-pill span,
#archiveView .status-cell .archive-result-pill strong {
  margin-left: 0;
  text-align: left;
}

#archiveView .status-cell .archive-result-pill span {
  font-size: 11px;
  line-height: 1.1;
}

#archiveView .status-cell .archive-result-pill strong {
  font-size: 12px;
  line-height: 1.15;
}

#archiveView .archive-results-cell {
  vertical-align: top;
  text-align: right;
}

#archiveView .archive-results-cell .archive-outcome-wrap {
  display: grid;
  justify-items: end;
  gap: 6px;
  width: 132px;
  margin: 0 0 0 auto;
}

#archiveView .archive-detail-action {
  justify-self: start;
  width: 238px;
  min-height: 28px;
  margin: 0;
  padding: 0 8px;
  font-size: 11px;
}

#archiveView .archive-results-cell .archive-outcome-wrap {
  width: 238px;
  min-width: 0;
  align-content: start;
  justify-items: end;
  margin: 0 0 0 auto;
}

#archiveView .archive-results-cell .archive-result-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  width: 100%;
}

#archiveView .archive-results-cell .archive-result-pill {
  display: flex;
  align-items: center;
  width: 238px;
  min-width: 0;
  min-height: 28px;
  padding: 0 9px;
  gap: 7px;
}

#archiveView .archive-results-cell .archive-result-pill::before {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
}

#archiveView .archive-results-cell .archive-result-pill span,
#archiveView .archive-results-cell .archive-result-pill strong {
  margin-left: 0;
  line-height: 1;
}

#archiveView .archive-results-cell .archive-result-pill span {
  flex: 0 0 auto;
  font-size: 11px;
  line-height: 1;
}

#archiveView .archive-results-cell .archive-result-pill strong {
  margin-left: auto;
  font-size: 12px;
  line-height: 1;
  text-align: right;
}

.status-cell .status.is-closed {
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--muted);
  background: rgba(255, 255, 255, 0.04);
}

.project-identity {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  min-width: 0;
}

.project-marker {
  display: block;
  width: 10px;
  height: 10px;
  margin-top: 4px;
  border-radius: 999px;
  background: var(--project-marker-color, var(--accent));
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);
}

.project-identity-text {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.project-title-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 7px;
  min-width: 0;
}

.project-title-row strong,
.project-identity-text > strong {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.25;
}

.project-meta-block {
  display: grid;
  gap: 5px;
  margin-top: 1px;
}

.project-meta-block span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.project-meta-block b {
  display: block;
  margin-bottom: 1px;
  color: rgba(245, 245, 247, 0.7);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.1;
  text-transform: uppercase;
}

.archive-completion-note {
  display: grid;
  gap: 2px;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.archive-completion-note b {
  color: rgba(245, 245, 247, 0.7);
  font-size: 10px;
  line-height: 1.1;
  text-transform: uppercase;
}

.project-phase-row-title {
  display: grid;
  gap: 2px;
  margin-top: 0;
}

.project-phase-row-title span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
}

.project-phase-row-title em {
  color: var(--ink);
  font-size: 13px;
  font-style: normal;
  font-weight: 650;
  line-height: 1.35;
}

#timeForm,
#meetingForm {
  gap: 14px;
  align-content: start;
  padding: 18px;
}

#timeForm .panel-head,
#meetingForm .panel-head {
  min-height: 48px;
  margin-bottom: 0;
}

.work-entry-layout .time-form-fields,
.meeting-form-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.work-entry-layout .time-form-note-row,
.meeting-form-note-row {
  grid-template-columns: minmax(0, 1fr) 178px;
  gap: 12px;
  align-items: stretch;
}

#timeForm input,
#timeForm select,
#meetingForm input {
  height: var(--control-height);
}

#timeForm textarea,
#meetingForm textarea,
.time-form-actions .primary-action,
.meeting-form-actions .primary-action {
  height: 70px;
  min-height: 70px;
  max-height: 70px;
}

.time-form-actions,
.meeting-form-actions {
  align-self: end;
}

.work-entry-layout,
.meetings-layout {
  gap: 18px;
  align-items: stretch;
}

.meeting-calendar-panel {
  display: grid;
  align-self: stretch;
}

.work-entry-layout > .hours-month-calendar,
.meeting-calendar-panel > .hours-month-calendar {
  width: 100%;
  height: 100%;
}

.time-self-entries-panel .panel-head,
.meeting-list-panel .panel-head {
  margin-bottom: 12px;
}

.time-entry-list,
.meeting-list-panel .meeting-list {
  gap: 4px;
}

@media (min-width: 981px) {
  .work-entry-layout,
  .meetings-layout {
    grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
  }

  .work-entry-layout > #timeForm,
  .work-entry-layout > .hours-month-calendar,
  .meetings-layout > #meetingForm,
  .meeting-calendar-panel > .hours-month-calendar {
    min-height: 428px;
  }
}

/* Typographic consistency pass for forms and project tables. */
label {
  font-size: 12px;
  font-weight: 620;
  line-height: 1.25;
}

input,
select,
textarea {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 520;
  line-height: 1.25;
}

input::placeholder,
textarea::placeholder {
  font-size: 13px;
  font-weight: 520;
}

#projectForm {
  gap: 12px;
}

#projectForm .project-form-split,
#projectForm .project-form-pair,
#projectForm .project-form-finance-grid,
#projectForm .form-row,
#projectForm .profession-rows {
  gap: 10px;
}

#projectForm .form-section-head {
  margin-bottom: 8px;
}

#projectForm .form-section-head h3 {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 720;
  line-height: 1.25;
  letter-spacing: 0;
}

#projectForm .profession-editor {
  padding: 12px;
}

.project-title-row {
  display: block;
}

.project-title-row strong {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 740;
  line-height: 1.25;
}

#projectsView th:nth-child(3),
#archiveView th:nth-child(3) {
  text-align: right;
}

#projectsView .status-cell,
#archiveView .archive-results-cell {
  text-align: right;
}

#projectsView .status-cell .status,
#projectsView .status-cell .pin-action,
#projectsView .status-cell .project-detail-action,
#projectsView .status-cell .row-actions button,
#archiveView .archive-right-actions button,
#archiveView .archive-state-label,
#archiveView .archive-detail-action {
  min-height: 28px;
  border-radius: var(--radius-sm);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 620;
  line-height: 1;
}

#projectsView th:nth-child(1),
#projectsView td:nth-child(1),
#archiveView th:nth-child(1),
#archiveView td:nth-child(1) {
  width: 34%;
}

#projectsView th:nth-child(2),
#projectsView td:nth-child(2) {
  width: 50%;
}

#projectsView th:nth-child(3),
#projectsView td:nth-child(3) {
  width: 16%;
}

#archiveView th:nth-child(2),
#archiveView td:nth-child(2) {
  width: 40%;
}

#archiveView th:nth-child(3),
#archiveView td:nth-child(3) {
  width: 26%;
}

/* Final standalone card layout for Projects and Archive. */
#projectsView .table-wrap,
#archiveView .table-wrap {
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow-x: auto;
  padding: 0 2px 2px;
}

#projectsView table,
#archiveView table {
  display: block;
  min-width: 1180px;
  border-collapse: separate;
  border-spacing: 0;
  background: transparent;
}

#projectsView thead,
#archiveView thead {
  position: sticky;
  top: 0;
  z-index: 6;
  display: block;
  margin-bottom: 10px;
}

#projectsView tbody,
#archiveView tbody {
  display: grid;
  gap: 12px;
}

#projectsView thead tr,
#projectsView tbody tr,
#archiveView thead tr,
#archiveView tbody tr {
  display: grid;
  align-items: stretch;
}

#projectsView thead tr,
#projectsView tbody tr {
  grid-template-columns: 34% 50% 16%;
}

#archiveView thead tr,
#archiveView tbody tr {
  grid-template-columns: 34% 40% 26%;
}

#projectsView tbody tr,
#archiveView tbody tr {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.018)),
    rgba(28, 28, 32, 0.88);
  box-shadow: var(--shadow);
  filter: none;
}

#projectsView th,
#archiveView th {
  position: static;
  display: block;
  width: auto !important;
  border: 0;
  background: rgba(38, 38, 44, 0.96);
}

#projectsView th:first-child,
#archiveView th:first-child {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

#projectsView th:last-child,
#archiveView th:last-child {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

#projectsView td,
#archiveView td,
#projectsView tbody td,
#archiveView tbody td,
#projectsView tbody td:first-child,
#archiveView tbody td:first-child,
#projectsView tbody td:last-child,
#archiveView tbody td:last-child {
  display: block;
  width: auto !important;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.coordination-archive-panel {
  margin-top: 16px;
}

.coordination-archive-list {
  display: grid;
  gap: 8px;
}

.coordination-archive-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.03);
}

.coordination-archive-item > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.coordination-archive-item strong,
.coordination-archive-item small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.coordination-archive-item strong {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.25;
}

.coordination-archive-item small {
  color: var(--muted);
  font-size: 11px;
}

@media (max-width: 720px) {
  .coordination-archive-item {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

/* Layout stability pass: prevent tab and scroll-position jumps. */
html {
  scroll-behavior: auto;
  scrollbar-gutter: stable;
}

body {
  min-width: 0;
}

.app-shell,
.workspace,
.view,
.panel,
.table-wrap,
.money-list,
.coordination-page,
.work-entry-layout,
.meetings-layout {
  min-width: 0;
}

.view {
  scroll-margin-top: 0;
}

.topbar {
  min-height: 96px;
}

.panel,
.form-panel,
.table-wrap,
.coordination-item,
.coordination-context-card,
.money-item,
#timeForm,
#meetingForm,
#projectForm,
#archiveForm,
#coordinationFormPanel {
  scroll-margin-top: 116px;
}

.role-controls,
.panel-head,
.closing-controls,
.row-actions,
.meeting-actions,
.time-form-actions,
.meeting-form-actions,
.archive-right-actions {
  min-width: 0;
}

.role-controls > *,
.panel-head > *,
.closing-controls > *,
.row-actions > *,
.meeting-actions > *,
.time-form-actions > *,
.meeting-form-actions > *,
.archive-right-actions > * {
  flex-shrink: 0;
}

.panel-head > div,
.finance-filter-summary,
.coordination-main,
.project-main-cell,
.project-performance,
.archive-outcome-wrap {
  min-width: 0;
}

.primary-action,
.ghost-action,
.inline-action,
.danger-action,
.small-action,
.segmented-control button {
  white-space: nowrap;
}

.calendar-display-input,
input,
select,
textarea,
button {
  line-height: 1.2;
}

#projectsView .table-wrap,
#archiveView .table-wrap,
.money-list {
  overscroll-behavior: contain;
}

#projectsView thead,
#archiveView thead {
  top: 0;
}

@media (max-width: 980px) {
  .panel,
.form-panel,
.table-wrap,
.coordination-item,
.coordination-context-card,
.money-item,
#timeForm,
#meetingForm,
#projectForm,
#archiveForm,
#coordinationFormPanel {
    scroll-margin-top: 18px;
  }
}

/* Atelier OS design direction. Keep this layer last. */
:root {
  --ink: #f6f3ea;
  --ink-soft: rgba(246, 243, 234, 0.82);
  --muted: rgba(246, 243, 234, 0.56);
  --muted-strong: rgba(246, 243, 234, 0.68);
  --surface: #090a0d;
  --surface-2: #101217;
  --surface-row: rgba(255, 255, 255, 0.034);
  --surface-row-hover: rgba(255, 255, 255, 0.058);
  --panel: rgba(23, 24, 30, 0.82);
  --panel-2: rgba(31, 32, 39, 0.88);
  --surface-glass: rgba(18, 19, 24, 0.76);
  --field: rgba(255, 255, 255, 0.055);
  --field-strong: rgba(255, 255, 255, 0.088);
  --line: rgba(246, 243, 234, 0.105);
  --line-strong: rgba(246, 243, 234, 0.18);
  --brand-wine: rgb(176, 42, 56);
  --brand-red: rgb(255, 92, 103);
  --brand-gold: rgb(94, 168, 255);
  --brand-blue: rgb(27, 79, 111);
  --accent: #635EEC;
  --accent-dark: #f1d684;
  --action-blue: #5e9dff;
  --good: #8ea37d;
  --warn: #635EEC;
  --danger: #FF5C67;
  --good-bg: rgba(142, 163, 125, 0.13);
  --good-line: rgba(142, 163, 125, 0.32);
  --warn-bg: rgba(94, 168, 255, 0.13);
  --warn-line: rgba(94, 168, 255, 0.34);
  --bad-bg: rgba(255, 92, 103, 0.11);
  --bad-line: rgba(255, 92, 103, 0.28);
  --blue-bg: rgba(27, 79, 111, 0.2);
  --blue-line: rgba(94, 168, 255, 0.3);
  --soft: rgba(94, 168, 255, 0.12);
  --radius: 22px;
  --radius-sm: 16px;
  --control-height: 38px;
  --shadow: 0 16px 46px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.045);
  --shadow-soft: 0 10px 28px rgba(0, 0, 0, 0.18);
}

html {
  background: var(--surface);
}

body {
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(22, 24, 30, 0.94) 0, rgba(9, 10, 13, 0.98) 42%, #07080b 100%),
    repeating-linear-gradient(90deg, rgba(246, 243, 234, 0.018) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(180deg, rgba(246, 243, 234, 0.014) 0 1px, transparent 1px 96px);
  font-family: var(--font-ui);
  font-size: 14px;
}

body::selection {
  color: #121317;
  background: rgba(165, 162, 250, 0.9);
}

.app-shell {
  grid-template-columns: 244px minmax(0, 1fr);
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  gap: 30px;
  padding: 28px 18px;
  background:
    linear-gradient(180deg, rgba(18, 19, 24, 0.98), rgba(8, 9, 12, 0.96)),
    repeating-linear-gradient(180deg, rgba(246, 243, 234, 0.02) 0 1px, transparent 1px 88px);
  border-right: 1px solid rgba(246, 243, 234, 0.12);
  box-shadow: 16px 0 42px rgba(0, 0, 0, 0.22);
}

.brand {
  min-height: 46px;
  padding: 0 10px 22px;
  border-bottom: 1px solid rgba(246, 243, 234, 0.1);
}

.brand-logo {
  width: min(100%, 170px);
  filter: drop-shadow(0 8px 22px rgba(0, 0, 0, 0.28));
}

.nav {
  gap: 7px;
}

.nav-item {
  position: relative;
  min-height: 40px;
  padding: 0 14px 0 16px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: rgba(246, 243, 234, 0.62);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 720;
}

.nav-item::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 11px;
  bottom: 11px;
  width: 2px;
  border-radius: 99px;
  background: transparent;
}

.nav-item:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.045);
}

.nav-item.active {
  border-color: rgba(94, 168, 255, 0.42);
  color: var(--ink);
  background:
    linear-gradient(90deg, rgba(94, 168, 255, 0.16), rgba(94, 168, 255, 0.075)),
    rgba(255, 255, 255, 0.038);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.nav-item.active::before {
  background: var(--action-blue);
}

.workspace {
  padding: 24px 26px 36px;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 58px;
  margin: -4px -4px 14px;
  padding: 8px 12px;
  border: 1px solid rgba(246, 243, 234, 0.105);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(30, 31, 38, 0.84), rgba(17, 18, 23, 0.78)),
    rgba(14, 15, 19, 0.72);
  box-shadow: var(--shadow);
  backdrop-filter: blur(22px);
}

.view-title-group {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

h1,
h2,
h3,
.panel-head h2 {
  font-family: var(--font-display);
  letter-spacing: 0;
}

h1 {
  color: var(--ink);
  font-size: clamp(22px, 2.1vw, 30px);
  font-weight: 780;
  line-height: 1;
}

h2,
.panel-head h2 {
  margin-bottom: 0;
  color: var(--ink);
  font-size: 17px;
  font-weight: 760;
  line-height: 1.18;
}

h3 {
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 740;
}

.panel-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
  min-height: 38px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(246, 243, 234, 0.075);
}

.panel-head span,
.field-note,
.empty,
.time-person-card span,
.time-person-card small,
.month-chip span,
th,
label,
.coordination-context-card small,
.coordination-context-card em,
.money-description,
.money-owner,
.money-place,
.money-date {
  color: var(--muted);
}

label {
  gap: 7px;
  font-size: 11px;
  font-weight: 720;
  letter-spacing: 0;
  text-transform: uppercase;
}

input,
select,
textarea {
  min-height: var(--control-height);
  border: 1px solid rgba(246, 243, 234, 0.105);
  border-radius: var(--radius-sm);
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02)),
    rgba(255, 255, 255, 0.035);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

input:hover,
select:hover,
textarea:hover {
  border-color: rgba(246, 243, 234, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.026)),
    rgba(255, 255, 255, 0.045);
}

input:focus,
select:focus,
textarea:focus,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  border-color: rgba(94, 168, 255, 0.58);
  outline: 2px solid rgba(94, 168, 255, 0.18);
  outline-offset: 1px;
}

select option {
  color: #f6f3ea;
  background: #17191f;
}

textarea {
  min-height: 84px;
  resize: vertical;
}

input::placeholder,
textarea::placeholder {
  color: rgba(246, 243, 234, 0.32);
}

.role-controls {
  align-items: end;
  gap: 10px;
}

.role-controls label {
  min-width: 156px;
}

.role-controls select {
  min-width: 156px;
}

.primary-action,
.ghost-action,
.inline-action,
.danger-action,
.small-action,
.row-actions button,
.segmented-control button {
  min-height: var(--control-height);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 760;
  letter-spacing: 0;
}

.primary-action {
  border-color: rgba(165, 162, 250, 0.58);
  color: #15130d;
  background:
    linear-gradient(180deg, rgba(165, 162, 250, 1), rgba(94, 168, 255, 0.98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 10px 26px rgba(94, 168, 255, 0.16);
}

.primary-action:hover {
  border-color: rgba(165, 162, 250, 0.76);
  color: #12100b;
  background:
    linear-gradient(180deg, rgba(182, 180, 252, 1), rgba(90, 87, 230, 1));
}

.ghost-action,
.inline-action,
.small-action,
.row-actions button {
  border: 1px solid rgba(246, 243, 234, 0.12);
  color: rgba(246, 243, 234, 0.78);
  background: rgba(255, 255, 255, 0.04);
}

.ghost-action:hover,
.inline-action:hover,
.small-action:hover,
.row-actions button:hover {
  border-color: rgba(94, 168, 255, 0.38);
  color: var(--ink);
  background: rgba(94, 168, 255, 0.12);
}

.inline-action,
.small-action,
.money-item .inline-action,
.row-actions button {
  min-height: 30px;
  padding: 0 10px;
  font-size: 11px;
}

.danger-action,
.danger-inline,
.ghost-action.danger-action {
  border-color: rgba(255, 92, 103, 0.26);
  color: #ffb7c3;
  background: rgba(255, 92, 103, 0.1);
}

.danger-action:hover,
.danger-inline:hover,
.ghost-action.danger-action:hover {
  border-color: rgba(255, 92, 103, 0.44);
  background: rgba(255, 92, 103, 0.16);
}

.metric,
.panel,
.form-panel,
.project-card,
.owner-balance-card,
.profession-editor,
.table-wrap,
.time-person-card,
.month-chip,
.coordination-context-card,
.coordination-progress-card,
.coordination-metric,
.coordination-timeline-item,
.coordination-item,
.coordination-archive-item,
.money-item,
.money-header,
.calendar-popover,
.hours-month-calendar {
  border: 1px solid rgba(246, 243, 234, 0.105);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.018)),
    rgba(22, 23, 29, 0.78);
  box-shadow: var(--shadow);
}

.panel,
.form-panel {
  padding: 16px;
}

.metric {
  position: relative;
  min-height: 118px;
  padding: 16px;
  overflow: hidden;
}

.metric::before {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  top: 0;
  height: 2px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), rgba(27, 79, 111, 0.88));
  opacity: 0.9;
}

.metric span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
  text-transform: uppercase;
}

.metric small {
  color: var(--muted-strong);
}

.dashboard-toolbar,
.finance-filter-bar,
.owner-balance-summary {
  border: 1px solid rgba(246, 243, 234, 0.105);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.048), rgba(255, 255, 255, 0.018)),
    rgba(18, 19, 24, 0.72);
  box-shadow: var(--shadow-soft);
}

.segmented-control {
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(246, 243, 234, 0.105);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.04);
}

.segmented-control button {
  min-height: 30px;
  border: 1px solid transparent;
  color: var(--muted);
}

.segmented-control button.active,
.segmented-control button:hover {
  border-color: rgba(94, 168, 255, 0.32);
  color: var(--ink);
  background: rgba(94, 168, 255, 0.13);
}

.table-wrap {
  padding: 0;
  overflow: hidden;
}

table {
  border-spacing: 0 10px;
  border-collapse: separate;
  background: transparent;
}

th {
  height: 38px;
  border: 0;
  color: rgba(246, 243, 234, 0.52);
  background: rgba(255, 255, 255, 0.045);
  font-size: 10px;
  font-weight: 780;
  text-transform: uppercase;
}

td {
  border-top: 1px solid rgba(246, 243, 234, 0.085);
  border-bottom: 1px solid rgba(246, 243, 234, 0.085);
  color: var(--ink-soft);
  background: rgba(255, 255, 255, 0.028);
}

td:first-child {
  border-left: 1px solid rgba(246, 243, 234, 0.085);
  border-radius: var(--radius) 0 0 var(--radius);
}

td:last-child {
  border-right: 1px solid rgba(246, 243, 234, 0.085);
  border-radius: 0 var(--radius) var(--radius) 0;
}

#projectsView .table-wrap,
#archiveView .table-wrap {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

#projectsView thead,
#archiveView thead {
  margin-bottom: 10px;
}

#projectsView tbody tr,
#archiveView tbody tr {
  border: 1px solid rgba(246, 243, 234, 0.105);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.018)),
    rgba(22, 23, 29, 0.78);
  box-shadow: var(--shadow);
}

#projectsView th,
#archiveView th {
  height: 36px;
  color: rgba(246, 243, 234, 0.52);
  background: rgba(255, 255, 255, 0.045);
}

#projectsView td,
#archiveView td {
  background: transparent;
}

.project-title-row strong,
.project-identity-text > strong,
.project-phase-row-title strong,
.money-item strong,
.time-entry-item strong {
  color: var(--ink);
}

.coordination-card-number,
.money-type,
.status,
.phase-status,
.archive-state-label,
.coordination-type,
.coordination-status {
  min-height: 24px;
  border: 1px solid rgba(246, 243, 234, 0.105);
  border-radius: var(--radius-sm);
  color: rgba(246, 243, 234, 0.72);
  background: rgba(255, 255, 255, 0.045);
  font-size: 10px;
  font-weight: 780;
  text-transform: uppercase;
}

.status.is-open,
.pin-action.is-pinned,
.coordination-phase-action.is-active {
  border-color: var(--warn-line);
  color: var(--accent-dark);
  background: var(--warn-bg);
}

.status.is-closed,
.archive-state-label,
.coordination-item.is-done,
.archive-result-pill.is-good {
  border-color: var(--good-line);
  background: var(--good-bg);
}

.archive-result-pill.is-bad,
.coordination-item.is-late,
.coordination-timeline-item.is-late {
  border-color: var(--bad-line);
  background: var(--bad-bg);
}

.project-marker {
  width: 10px;
  height: 10px;
  box-shadow: 0 0 0 3px rgba(246, 243, 234, 0.075);
}

.project-meta-block,
.phase-state-list,
.project-column-list,
.performance-metrics,
.archive-result-grid,
.performance-detail-rows {
  gap: 8px;
}

.performance-metrics .metric-hint-item,
.archive-result-pill,
.performance-detail-row,
.phase-state-list span,
.project-column-list span,
.coordination-metric,
.coordination-timeline-item {
  border: 1px solid rgba(246, 243, 234, 0.09);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.035);
}

.performance-metrics .metric-hint-item,
.archive-result-pill {
  min-height: 50px;
  padding: 9px 10px;
}

.performance-metrics strong,
.archive-result-pill strong {
  font-family: var(--font-display);
  font-size: 15px;
}

.performance-bars {
  gap: 11px;
  padding-top: 2px;
}

.bar,
.timeline-bar,
.coordination-progress-track,
.trend-track {
  height: 7px;
  border-radius: 99px;
  background: rgba(246, 243, 234, 0.095);
  overflow: hidden;
}

.bar-fill,
.timeline-fill,
.coordination-progress-fill,
.trend-track i {
  border-radius: inherit;
  box-shadow: none;
}

.timeline-dot {
  width: 11px;
  height: 11px;
  margin-top: -2px;
  border: 2px solid rgba(8, 9, 12, 0.92);
  background: #f6f3ea;
}

.hours-month-calendar,
.meeting-month-calendar {
  padding: 14px;
}

.hours-calendar-head,
.calendar-head {
  min-height: 36px;
}

.hours-calendar-head strong,
.calendar-head strong {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 15px;
}

.hours-calendar-grid,
.calendar-grid {
  gap: 7px;
}

.hours-calendar-day,
.calendar-day,
.calendar-grid button {
  min-height: 58px;
  border: 1px solid rgba(246, 243, 234, 0.085);
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  background: rgba(255, 255, 255, 0.03);
}

.calendar-grid button {
  min-height: 34px;
}

.hours-calendar-day:hover,
.calendar-day:hover,
.calendar-grid button:hover {
  border-color: rgba(94, 168, 255, 0.34);
  background: rgba(94, 168, 255, 0.105);
}

.hours-calendar-day.is-today {
  box-shadow: inset 0 0 0 1px rgba(165, 162, 250, 0.52);
}

.hours-calendar-day.is-selected,
.calendar-grid button.active,
.month-picker-grid button.active {
  border-color: rgba(94, 168, 255, 0.58);
  background: rgba(94, 168, 255, 0.16);
}

#timeForm,
#meetingForm {
  padding: 16px;
}

.work-entry-layout,
.meetings-layout {
  gap: 16px;
}

.work-entry-layout .time-form-fields,
.meeting-form-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.work-entry-layout .time-form-note-row,
.meeting-form-note-row {
  align-items: end;
  gap: 10px;
}

#timeForm textarea,
#meetingForm textarea {
  min-height: var(--control-height);
}

.time-form-actions,
.meeting-form-actions,
.row-actions,
.meeting-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}

.time-entry-list,
.meeting-list-panel .meeting-list,
.money-list,
.coordination-list,
.coordination-archive-list {
  gap: 8px;
}

.time-entry-item,
.money-item {
  min-height: 48px;
  padding: 9px 10px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.032);
}

.time-entry-item {
  grid-template-columns: 96px minmax(130px, 1fr) minmax(120px, 0.85fr) 80px auto;
  align-items: center;
}

.meeting-actions {
  justify-self: end;
}

.money-list {
  max-height: 640px;
  padding-right: 4px;
  overflow: auto;
}

.money-header,
.money-item {
  display: grid;
  grid-template-columns: 108px minmax(180px, 1.25fr) 138px 160px 112px 136px 66px;
  align-items: center;
  gap: 10px;
}

.money-header {
  position: sticky;
  top: 0;
  z-index: 2;
  min-height: 36px;
  padding: 0 10px;
  color: rgba(246, 243, 234, 0.5);
  background: rgba(18, 19, 24, 0.96);
  backdrop-filter: blur(14px);
}

.money-item::before {
  width: 3px;
  border-radius: 99px;
}

.money-type {
  justify-self: start;
  min-height: 24px;
  padding: 0 8px;
  white-space: nowrap;
}

.money-amount {
  justify-self: end;
  min-height: 28px;
  padding: 0 9px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.045);
}

.money-amount.positive {
  color: #d7e6cc;
  background: var(--good-bg);
}

.money-amount.negative {
  color: #ffd0d8;
  background: var(--bad-bg);
}

.coordination-page {
  gap: 16px;
}

.coordination-context-grid {
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 9px;
}

.coordination-context-card {
  min-height: 114px;
  padding: 12px;
}

.coordination-context-card.active {
  border-color: rgba(94, 168, 255, 0.45);
  background:
    linear-gradient(180deg, rgba(94, 168, 255, 0.13), rgba(255, 255, 255, 0.025)),
    rgba(22, 23, 29, 0.84);
}

.coordination-card-progress {
  height: 6px;
  border-radius: 99px;
  background: rgba(246, 243, 234, 0.09);
}

.coordination-card-progress div {
  background: linear-gradient(90deg, var(--accent), var(--good));
}

.coordination-progress-card {
  padding: 14px;
}

.coordination-item {
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  padding: 10px;
}

.coordination-check {
  width: 26px;
  height: 26px;
  border-color: rgba(246, 243, 234, 0.16);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.04);
}

.coordination-item.is-done .coordination-check {
  color: #11130f;
  background: var(--good);
}

.owner-balance-grid,
.metrics,
.coordination-metrics {
  gap: 12px;
}

.time-person-card,
.month-chip {
  min-height: 54px;
  padding: 10px;
}

.time-person-card.active,
.time-person-card:hover,
.month-chip.active,
.month-chip:hover {
  border-color: rgba(94, 168, 255, 0.4);
  background: rgba(94, 168, 255, 0.12);
}

.hint-dot {
  border-color: rgba(246, 243, 234, 0.18);
  color: var(--muted);
  background: rgba(255, 255, 255, 0.04);
}

.hint-dot::after {
  width: min(330px, 72vw);
  border: 1px solid rgba(246, 243, 234, 0.13);
  border-radius: var(--radius);
  color: var(--ink-soft);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025)),
    rgba(18, 19, 24, 0.98);
  box-shadow: var(--shadow);
}

.empty {
  border: 1px dashed rgba(246, 243, 234, 0.12);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.025);
}

@media (min-width: 981px) {
  .meetings-layout {
    grid-template-columns: minmax(380px, 0.95fr) minmax(420px, 1.05fr);
    align-items: start;
  }

  .time-self-entries-panel,
  .meeting-list-panel {
    grid-column: 1 / -1;
  }
}

@media (max-width: 1180px) {
  .money-header,
  .money-item {
    grid-template-columns: 94px minmax(150px, 1fr) 120px 126px 96px 120px 60px;
  }
}

@media (max-width: 980px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    height: auto;
    padding: 16px;
  }

  .brand {
    padding: 0 0 14px;
  }

  .nav {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .nav-item {
    min-width: max-content;
  }

  .workspace {
    padding: 18px 14px 28px;
  }

  .topbar {
    position: static;
    margin: 0 0 16px;
  }

  .role-controls,
  .view-title-group {
    width: 100%;
  }

  .role-controls label,
  .role-controls select {
    min-width: min(100%, 180px);
  }

  .work-entry-layout .time-form-fields,
.meeting-form-fields,
.work-entry-layout .time-form-note-row,
.meeting-form-note-row,
.time-entry-item,
.money-header,
.money-item,
.coordination-item {
    grid-template-columns: 1fr;
  }

  .money-header {
    display: none;
  }

  .money-amount,
  .meeting-actions,
  .time-entry-actions {
    justify-self: start;
  }
}

/* Coordination process layer. */
.coordination-form {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
}

.coordination-note-field {
  grid-column: span 3;
}

.coordination-form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.coordination-list {
  display: grid;
  gap: 14px;
}

.coordination-group {
  display: grid;
  gap: 8px;
}

.coordination-group-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px 7px;
  border-bottom: 1px solid rgba(246, 243, 234, 0.075);
}

.coordination-group-head h3 {
  margin: 0 0 3px;
  color: var(--ink);
  font-size: 14px;
}

.coordination-group-head span {
  color: var(--muted);
  font-size: 11px;
}

.coordination-group-head strong {
  flex-shrink: 0;
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border: 1px solid rgba(246, 243, 234, 0.1);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.035);
  color: var(--ink-soft);
  font-size: 11px;
}

.coordination-group-list {
  display: grid;
  gap: 8px;
}

.coordination-item {
  grid-template-columns: 30px minmax(0, 1fr) 92px;
  align-items: start;
  padding: 10px;
}

.coordination-item.is-pinned {
  border-color: rgba(94, 168, 255, 0.36);
  background:
    linear-gradient(180deg, rgba(94, 168, 255, 0.105), rgba(255, 255, 255, 0.02)),
    rgba(22, 23, 29, 0.78);
}

.coordination-meta {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.coordination-deadline-track,
.coordination-mini-timeline {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(246, 243, 234, 0.09);
}

.coordination-deadline-track i,
.coordination-mini-timeline i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--good), var(--accent), var(--danger));
}

.coordination-item.is-done .coordination-deadline-track i,
.coordination-timeline-item.is-done .coordination-mini-timeline i {
  background: var(--good);
}

.coordination-item.is-late .coordination-deadline-track i,
.coordination-timeline-item.is-late .coordination-mini-timeline i {
  background: linear-gradient(90deg, var(--accent), var(--danger));
}

.coordination-mini-timeline {
  margin-top: 7px;
}

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

  .coordination-note-field {
    grid-column: span 2;
  }

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

@media (max-width: 760px) {
  .coordination-form,
.coordination-note-field,
.coordination-item,
.coordination-meta {
    grid-template-columns: 1fr;
  }
}

/* Final layout polish: work rows, project scrolling, project actions and coordination split. */
.time-entry-item {
  grid-template-columns: 96px minmax(150px, 1.25fr) minmax(120px, 0.85fr) 72px minmax(160px, 1.15fr) 132px;
  align-items: center;
}

.time-entry-actions {
  justify-self: end;
  width: 132px;
  min-width: 132px;
}

.time-entry-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 6px;
}

.time-entry-actions button {
  flex: 0 0 auto;
  min-width: 62px;
}

#projectsView .table-wrap,
#archiveView .table-wrap {
  max-height: none;
  overflow: visible;
  overscroll-behavior: auto;
}

#projectsView tbody,
#archiveView tbody {
  overflow: visible;
}

#projectsView .status-cell .project-column-list {
  align-items: stretch;
  justify-items: stretch;
  width: 254px;
  max-width: 100%;
  margin-left: auto;
  gap: 6px;
}

#projectsView .status-cell .status {
  justify-self: end;
  width: 124px;
  min-height: 30px;
  margin-right: 130px;
}

#projectsView .status-cell .pin-action,
#projectsView .status-cell .coordination-phase-action,
#projectsView .status-cell .project-detail-action,
#projectsView .status-cell .row-actions button {
  width: 124px;
  min-height: 30px;
  padding: 0 9px;
  font-size: 11px;
}

#projectsView .status-cell .row-actions {
  display: grid;
  grid-template-columns: repeat(2, 124px);
  justify-content: end;
  justify-items: stretch;
  gap: 6px;
}

#coordinationView .coordination-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 1fr);
  align-items: start;
  gap: 16px;
}

#coordinationView .panel {
  margin-top: 0;
}

#coordinationView .coordination-status-layout {
  display: contents;
}

#coordinationView .coordination-control-panel,
#coordinationView .coordination-status-panel,
#coordinationView #coordinationFormPanel {
  grid-column: 1;
  min-width: 0;
}

#coordinationView .coordination-timeline-panel {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: stretch;
  min-width: 0;
}

#coordinationView .coordination-control-panel,
#coordinationView .coordination-status-panel,
#coordinationView .coordination-timeline-panel {
  align-self: stretch;
}

#coordinationView .coordination-list-panel,
#coordinationView .coordination-archive-panel {
  grid-column: 1 / -1;
  min-width: 0;
}

#coordinationView .coordination-context-grid {
  grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
}

#coordinationView .coordination-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#coordinationView .coordination-note-field,
#coordinationView .coordination-form-actions {
  grid-column: 1 / -1;
}

#coordinationView .coordination-timeline {
  max-height: 520px;
  overflow: auto;
  padding-right: 4px;
}

@media (max-width: 1180px) {
  #coordinationView .coordination-page {
    grid-template-columns: 1fr;
  }

  #coordinationView .coordination-control-panel,
  #coordinationView .coordination-status-panel,
  #coordinationView #coordinationFormPanel,
  #coordinationView .coordination-timeline-panel,
  #coordinationView .coordination-list-panel,
  #coordinationView .coordination-archive-panel {
    grid-column: 1;
    grid-row: auto;
  }
}

@media (max-width: 980px) {
  .time-entry-item {
    grid-template-columns: 1fr;
  }

  .time-entry-actions {
    justify-self: start;
    width: auto;
    min-width: 0;
  }

  #projectsView .status-cell .row-actions {
    grid-template-columns: 1fr;
    justify-content: stretch;
  }

  #projectsView .status-cell .status,
  #projectsView .status-cell .pin-action,
  #projectsView .status-cell .coordination-phase-action,
  #projectsView .status-cell .project-detail-action,
  #projectsView .status-cell .row-actions button {
    width: 100%;
    margin-right: 0;
  }
}

/* Daily dashboard */
.daily-dashboard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(320px, 1.15fr);
  gap: 16px;
  margin-bottom: 18px;
  align-items: start;
}

.daily-panel {
  min-width: 0;
}

.daily-list {
  display: grid;
  gap: 8px;
}

.daily-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 8px 9px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.045);
}

.daily-item.is-late,
.daily-item.is-high {
  border-color: rgba(255, 92, 103, 0.38);
  background: rgba(255, 92, 103, 0.10);
}

.daily-item.is-done {
  border-color: rgba(48, 209, 88, 0.28);
  background: rgba(48, 209, 88, 0.08);
  opacity: 0.82;
}

.daily-main {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.daily-main strong,
.daily-main small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.daily-main strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 650;
}

.daily-main small {
  color: var(--muted);
  font-size: 11px;
}

.dashboard-task-form {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(130px, 0.75fr) 122px 116px auto;
  gap: 8px;
  margin-bottom: 10px;
  align-items: stretch;
}

.dashboard-task-form input,
.dashboard-task-form select,
.dashboard-task-form button {
  min-height: 34px;
}

.dashboard-task-list .coordination-check {
  width: 26px;
  height: 26px;
}

.coordination-item.is-muted {
  opacity: 0.72;
}

@media (max-width: 1180px) {
  .daily-dashboard {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .daily-item,
  .dashboard-task-form {
    grid-template-columns: 1fr;
  }

  .daily-item .inline-action,
  .dashboard-task-form button {
    justify-self: stretch;
  }
}

/* Top navigation: sections left, logo right. */
.app-shell {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  min-height: 100vh;
}

.sidebar {
  position: sticky;
  top: 0;
  z-index: 90;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 54px;
  height: auto;
  padding: 10px 24px;
  border-right: 0;
  border-bottom: 0;
  background: rgba(11, 11, 15, 0.94);
  overflow: visible;
  backdrop-filter: blur(28px);
}

.brand {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 30px;
  margin-left: 0;
  margin-right: 18px;
  min-height: 0;
  padding: 0;
  border-bottom: 0 !important;
}

.brand-logo {
  display: block;
  width: clamp(132px, 11vw, 172px);
  max-height: 23px;
  object-fit: contain;
  object-position: center;
  transform: translateY(1px);
  filter: none;
}

.nav {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
  width: auto;
  overflow-x: auto;
  scrollbar-width: thin;
}

.nav-item {
  flex: 0 0 auto;
  width: auto;
  min-height: 30px;
  padding: 0 11px;
  border: 1px solid transparent;
  border-radius: 999px;
  text-align: center;
  white-space: nowrap;
  color: rgba(245, 245, 247, 0.70);
  background: transparent;
  font-size: 12px;
  font-weight: 650;
}

.nav-item::before {
  display: none !important;
}

.nav-item.active,
.nav-item:hover {
  color: var(--ink);
  border-color: rgba(94, 168, 255, 0.26);
  background: rgba(94, 168, 255, 0.13);
}

.workspace {
  min-width: 0;
  padding: 12px 28px 32px;
}

@media (max-width: 980px) {
  .sidebar {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 16px 20px;
  }

  .brand {
    justify-content: flex-end;
    margin-left: 0;
  }

  .nav {
    width: 100%;
  }

  .workspace {
    padding: 20px;
  }
}

@media (max-width: 640px) {
  .brand-logo {
    width: 176px;
    max-height: 34px;
  }

  .nav-item {
    min-height: 32px;
    padding: 0 10px;
    font-size: 11px;
  }
}

/* Daily cockpit layout */
#dashboardView .daily-dashboard {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  grid-auto-rows: 1fr;
  gap: 14px;
  margin-bottom: 0;
}

#dashboardView .daily-dashboard.is-two-column {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#dashboardView .daily-panel {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 132px);
  min-height: 520px;
  margin-top: 0;
}

#dashboardView .daily-list {
  flex: 1 1 auto;
  align-content: start;
  min-height: 0;
  overflow: auto;
  padding-right: 3px;
  scrollbar-width: thin;
  scrollbar-color: rgba(246, 243, 234, 0.18) transparent;
}

#dashboardView .daily-item {
  grid-template-columns: minmax(112px, auto) minmax(0, 1fr) minmax(96px, auto);
  align-items: center;
  min-height: 58px;
  padding: 8px 10px;
  gap: 10px;
  border-radius: var(--radius);
}

#dashboardView .daily-meeting-item {
  grid-template-columns: minmax(0, 1fr);
  cursor: pointer;
}

#dashboardView .daily-meeting-item:hover {
  border-color: rgba(246, 243, 234, 0.22);
  background: rgba(255, 255, 255, 0.065);
}

#dashboardView .daily-coordination-item {
  grid-template-columns: minmax(0, 1fr) auto;
  cursor: pointer;
}

#dashboardView .daily-coordination-item:hover {
  border-color: rgba(246, 243, 234, 0.22);
  background: rgba(255, 255, 255, 0.065);
}

#dashboardView .daily-main {
  width: 100%;
  align-self: center;
  align-content: center;
  justify-content: stretch;
  justify-items: start;
  min-height: 36px;
  gap: 3px;
  text-align: left;
}

#dashboardView .daily-main strong {
  width: 100%;
  font-size: 13px;
  line-height: 1.15;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

#dashboardView .daily-main small {
  width: 100%;
  font-size: 11px;
  line-height: 1.2;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

#dashboardView .daily-item .inline-action {
  align-self: center;
  min-height: 36px;
  padding-inline: 12px;
  border-radius: var(--radius-sm);
}

#dashboardView .daily-coordination-item .inline-action {
  min-width: 58px;
  padding-inline: 10px;
}

#dashboardView .dashboard-task-list .daily-item {
  grid-template-columns: 1fr;
  align-items: stretch;
  min-height: 0;
  padding: 9px;
  gap: 8px;
  overflow: visible;
}

#dashboardView .dashboard-task-list {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

#dashboardView .task-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  width: 100%;
}

#dashboardView .task-main {
  min-width: 0;
  min-height: 38px;
  gap: 4px;
}

#dashboardView .subtle-comment-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid rgba(246, 243, 234, 0.12);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.045);
  font-size: 11px;
  font-weight: 650;
}

#dashboardView .subtle-comment-action:hover {
  color: var(--text);
  border-color: rgba(246, 243, 234, 0.22);
  background: rgba(255, 255, 255, 0.075);
}

#dashboardView .subtle-comment-action.has-unread {
  color: var(--text);
  border-color: rgba(94, 168, 255, 0.48);
  background: rgba(94, 168, 255, 0.13);
}

#dashboardView .task-unread-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 999px;
  color: #161616;
  background: rgba(225, 185, 73, 0.92);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

#dashboardView .dashboard-task-comment-panel {
  display: grid;
  gap: 8px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 10px;
  border: 1px solid rgba(246, 243, 234, 0.10);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.035);
}

#dashboardView .task-comment-feed {
  display: grid;
  gap: 6px;
}

#dashboardView .task-comment-message {
  display: grid;
  gap: 3px;
  padding: 7px 9px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.045);
}

#dashboardView .task-comment-message > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

#dashboardView .task-comment-message strong {
  min-width: 0;
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#dashboardView .task-comment-message time {
  color: var(--muted);
  font-size: 10px;
  white-space: nowrap;
}

#dashboardView .task-comment-message p,
#dashboardView .task-comment-empty {
  margin: 0;
  color: rgba(245, 245, 247, 0.76);
  font-size: 11px;
  line-height: 1.35;
}

#dashboardView .comment-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  min-height: 26px;
  padding: 0;
  border: 2px solid rgba(246, 243, 234, 0.24);
  border-radius: 999px;
  color: rgba(48, 209, 88, 0.95);
  background: rgba(255, 255, 255, 0.035);
  font-size: 15px;
  font-weight: 780;
  line-height: 1;
}

#dashboardView .comment-check:hover {
  border-color: rgba(48, 209, 88, 0.55);
  background: rgba(48, 209, 88, 0.08);
}

#dashboardView .comment-check.is-checked {
  border-color: rgba(48, 209, 88, 0.48);
  background: rgba(48, 209, 88, 0.12);
}

#dashboardView .dashboard-task-comment {
  width: 100%;
  min-height: 42px;
  resize: none;
  text-transform: none;
}

#dashboardView .task-comment-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  align-items: stretch;
  min-width: 0;
}

#dashboardView .task-comment-form textarea {
  min-height: 42px;
  resize: none;
}

#dashboardView .task-comment-form button {
  min-height: 42px;
  padding-inline: 12px;
  border-radius: var(--radius-sm);
}

#dashboardView .dashboard-task-form textarea {
  width: 100%;
  min-height: 34px;
  margin-top: 6px;
  resize: vertical;
  text-transform: none;
}

#dashboardView .dashboard-task-form textarea {
  grid-column: 1 / -1;
}

#dashboardView .daily-list::-webkit-scrollbar,
#coordinationView .coordination-timeline::-webkit-scrollbar,
.meeting-list::-webkit-scrollbar,
.time-entry-list::-webkit-scrollbar,
.table-wrap::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

#dashboardView .daily-list::-webkit-scrollbar-track,
#coordinationView .coordination-timeline::-webkit-scrollbar-track,
.meeting-list::-webkit-scrollbar-track,
.time-entry-list::-webkit-scrollbar-track,
.table-wrap::-webkit-scrollbar-track {
  background: transparent;
}

#dashboardView .daily-list::-webkit-scrollbar-thumb,
#coordinationView .coordination-timeline::-webkit-scrollbar-thumb,
.meeting-list::-webkit-scrollbar-thumb,
.time-entry-list::-webkit-scrollbar-thumb,
.table-wrap::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(246, 243, 234, 0.16);
}

#dashboardView .daily-list:hover::-webkit-scrollbar-thumb,
#coordinationView .coordination-timeline:hover::-webkit-scrollbar-thumb,
.meeting-list:hover::-webkit-scrollbar-thumb,
.time-entry-list:hover::-webkit-scrollbar-thumb,
.table-wrap:hover::-webkit-scrollbar-thumb {
  background: rgba(246, 243, 234, 0.26);
}

.coordination-item.is-focused {
  border-color: rgba(94, 168, 255, 0.72);
  background:
    linear-gradient(180deg, rgba(94, 168, 255, 0.16), rgba(255, 255, 255, 0.03)),
    rgba(22, 23, 29, 0.84);
}

#coordinationView .coordination-card-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  min-height: 24px;
  line-height: 1;
  text-align: center;
}

#coordinationView .coordination-context-card {
  align-content: start;
}

#coordinationView .coordination-metric span,
#coordinationView .coordination-metric small,
#coordinationView .coordination-status,
#coordinationView .coordination-timeline-item span,
#coordinationView .coordination-timeline-item small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#coordinationView .coordination-timeline-item {
  cursor: pointer;
}

#coordinationView .coordination-timeline-item:hover {
  border-color: rgba(246, 243, 234, 0.22);
  background: rgba(255, 255, 255, 0.06);
}

#coordinationView .coordination-item {
  grid-template-columns: 30px minmax(0, 1fr) 142px;
}

#dashboardView .dashboard-task-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

#dashboardView .dashboard-task-form input[name="title"] {
  grid-column: 1 / -1;
}

#dashboardView .dashboard-task-form button {
  grid-column: 1 / -1;
}

#dashboardView .panel-head {
  min-height: 48px;
  margin-bottom: 10px;
}

#dashboardView .panel-head h2 {
  font-size: 21px;
  margin-bottom: 2px;
}

#dashboardView .panel-head span {
  font-size: 13px;
}

@media (max-width: 1180px) {
  #dashboardView .daily-dashboard {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }

  #dashboardView .daily-panel {
    height: auto;
    min-height: auto;
  }

  #dashboardView .daily-list {
    max-height: none;
  }
}

@media (max-width: 760px) {
  #dashboardView .daily-item,
  #dashboardView .dashboard-task-list .daily-item {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  #dashboardView .task-row {
    grid-template-columns: 26px minmax(0, 1fr);
    align-items: start;
  }

  #dashboardView .task-row > .inline-action {
    grid-column: 2;
    justify-self: start;
    width: auto;
    min-height: 28px;
    padding: 0 10px;
  }

  #dashboardView .task-main {
    min-height: 0;
  }

  #dashboardView .dashboard-task-comment-panel {
    padding: 8px;
    border-radius: 14px;
  }

  #dashboardView .task-comment-form {
    grid-template-columns: 1fr;
  }

  #dashboardView .task-comment-form button {
    justify-self: start;
    width: auto;
    min-height: 34px;
  }

  #dashboardView .daily-meeting-item .inline-action,
#dashboardView .daily-coordination-item .inline-action {
    justify-self: stretch;
  }
}

@media (max-width: 520px) {
  #dashboardView .daily-panel {
    padding: 14px;
  }

  #dashboardView .daily-item {
    border-radius: 16px;
  }

  #dashboardView .task-row {
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 8px;
  }

  #dashboardView .task-main strong {
    -webkit-line-clamp: 2;
  }
}

/* Tasks are richer than simple dashboard rows, so keep them out of the shared
   daily-item grid. This prevents comment controls from overlapping on narrow views. */
#dashboardView .dashboard-task-list .task-item {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  min-height: 0;
  height: auto;
  gap: 8px;
  overflow: visible;
}

#dashboardView .dashboard-task-list .task-row {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  min-width: 0;
}

#dashboardView .dashboard-task-list .coordination-check {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  margin-top: 2px;
}

#dashboardView .dashboard-task-list .task-main {
  flex: 1 1 auto;
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  min-height: 0;
  gap: 4px;
}

#dashboardView .dashboard-task-list .task-main strong,
#dashboardView .dashboard-task-list .task-main small {
  width: 100%;
  max-width: 100%;
}

#dashboardView .dashboard-task-list .task-row > .inline-action {
  flex: 0 0 auto;
  align-self: flex-start;
  min-height: 32px;
  padding: 0 12px;
}

#dashboardView .dashboard-task-list .dashboard-task-comment-panel {
  flex: 0 0 auto;
  width: 100%;
  margin-top: 0;
}

#dashboardView .dashboard-task-list .task-item.is-comment-open {
  height: auto !important;
  min-height: max-content;
  overflow: visible;
}

#dashboardView .dashboard-task-list .task-item.is-comment-open .dashboard-task-comment-panel {
  display: flex !important;
  flex-direction: column;
}

@media (max-width: 760px) {
  #dashboardView .dashboard-task-list .task-row {
    display: grid !important;
    grid-template-columns: 26px minmax(0, 1fr);
    align-items: start;
  }

  #dashboardView .dashboard-task-list .task-row > .inline-action {
    grid-column: 2;
    justify-self: start;
    margin-top: 2px;
  }
}

/* Stabilni skladba ukolu v prehledu: hlavicka ukolu + komentarovy blok musi
   zustat v normalnim toku stranky i pri vice otevrenych komentarich. */
#dashboardView .dashboard-task-list {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 8px !important;
}

#dashboardView .dashboard-task-list > * {
  flex-shrink: 0 !important;
}

#dashboardView .dashboard-task-section {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

#dashboardView .dashboard-task-section + .dashboard-task-section {
  margin-top: 6px;
}

#dashboardView .dashboard-task-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding: 0 2px;
}

#dashboardView .dashboard-task-section-head strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 760;
  line-height: 1.15;
}

#dashboardView .dashboard-task-section-head span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.2;
  white-space: nowrap;
}

#dashboardView .dashboard-task-section-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

#dashboardView .dashboard-task-empty {
  padding: 10px 12px;
  border-radius: var(--radius);
  text-align: left;
}

#dashboardView .dashboard-task-list .task-item {
  display: block !important;
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  width: 100%;
  min-height: 0 !important;
  height: auto !important;
  box-sizing: border-box;
  overflow: visible;
}

#dashboardView .dashboard-task-list .task-item.has-unread-comments {
  border-color: rgba(94, 168, 255, 0.46);
  background: linear-gradient(135deg, rgba(94, 168, 255, 0.13), rgba(255, 255, 255, 0.04));
}

#dashboardView .dashboard-task-list .task-row {
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  width: 100%;
  min-width: 0;
}

#dashboardView .dashboard-task-list .task-row > .inline-action {
  grid-column: auto;
  justify-self: end;
  align-self: start;
}

#dashboardView .dashboard-task-list .dashboard-task-comment-panel {
  display: flex !important;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin-top: 10px;
  box-sizing: border-box;
}

#dashboardView .dashboard-task-list .dashboard-task-comment-panel.hidden {
  display: none !important;
}

#dashboardView .task-comment-feed {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#dashboardView .task-comment-message {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  min-width: 0;
  padding: 8px 9px;
}

#dashboardView .task-comment-message.is-unread {
  border: 1px solid rgba(94, 168, 255, 0.34);
  background: rgba(94, 168, 255, 0.10);
}

#dashboardView .task-comment-message.is-resolved {
  opacity: 0.72;
}

#dashboardView .task-comment-message .comment-check {
  margin-top: 1px;
}

#dashboardView .dashboard-task-list .task-comment-message .task-comment-body {
  display: grid;
  gap: 3px;
  min-width: 0;
}

#dashboardView .dashboard-task-list .task-comment-message .task-comment-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

#dashboardView .task-comment-body strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#dashboardView .task-comment-body p {
  overflow-wrap: anywhere;
}

#dashboardView .dashboard-task-list .task-comment-form {
  width: 100%;
  box-sizing: border-box;
}

#dashboardView .dashboard-task-list .task-comment-form textarea {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

#dashboardView .dashboard-task-list .task-comment-form button {
  flex-shrink: 0;
  box-sizing: border-box;
}

@media (max-width: 760px) {
  #dashboardView .dashboard-task-list .task-row {
    grid-template-columns: 26px minmax(0, 1fr);
  }

  #dashboardView .dashboard-task-list .task-row > .inline-action {
    grid-column: 2;
    justify-self: start;
    width: auto;
  }

  #dashboardView .task-comment-form {
    grid-template-columns: minmax(0, 1fr);
  }

  #dashboardView .task-comment-form button {
    justify-self: start;
    width: auto;
  }
}

/* Apple-like glass for the sticky top navigation. */
.sidebar {
  border-bottom: 0 !important;
  background:
    linear-gradient(180deg, rgba(26, 27, 34, 0.72), rgba(12, 13, 18, 0.52)),
    rgba(10, 11, 15, 0.54) !important;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.18) !important;
  backdrop-filter: blur(26px) saturate(1.35);
  -webkit-backdrop-filter: blur(26px) saturate(1.35);
}

.topbar {
  position: static !important;
  top: auto !important;
}

/* Projects: calm right actions and prevent timeline markers from being clipped. */
#projectsView th:nth-child(1),
#projectsView td:nth-child(1) {
  width: 29%;
}

#projectsView th:nth-child(2),
#projectsView td:nth-child(2) {
  width: 46%;
}

#projectsView th:nth-child(3),
#projectsView td:nth-child(3) {
  width: 25%;
}

#projectsView .status-cell {
  text-align: right;
}

#projectsView .status-cell .project-column-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-content: end;
  justify-items: stretch;
  width: 270px;
  max-width: 100%;
  margin-left: auto;
  gap: 6px;
}

#projectsView .status-cell .status,
#projectsView .status-cell .pin-action,
#projectsView .status-cell .coordination-phase-action,
#projectsView .status-cell .project-detail-action,
#projectsView .status-cell .row-actions button {
  justify-self: stretch;
  width: 100%;
  min-width: 0;
  min-height: 30px;
  margin: 0;
}

#projectsView .status-cell .row-actions {
  display: contents;
}

#projectsView .performance-bars {
  padding-right: 7px;
}

#projectsView .performance-bars .timeline-bar {
  position: relative;
  overflow: visible;
}

#projectsView .performance-bars .timeline-fill {
  height: 100%;
  max-width: 100%;
}

#projectsView .performance-bars .timeline-dot {
  top: 50%;
  margin-top: 0;
  transform: translate(-50%, -50%);
}

#projectsView .performance-metrics-public {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#projectsView .performance-metrics-public .metric-hint-item {
  display: inline-flex;
  align-items: baseline;
  min-height: 46px;
  line-height: 1;
}

#projectsView .performance-metrics-public .metric-hint-item strong {
  flex: 0 0 auto;
  line-height: 1;
}

#projectsView .performance-metrics-public .metric-hint-item .hint-dot {
  margin-left: 2px;
  transform: translateY(2px);
}

#projectsView .performance-detail-finance-axis {
  margin-top: -2px;
}

#projectsView .performance-detail-progress {
  gap: 6px;
  margin-top: 0;
}

#projectsView .performance-detail-progress .bar-label {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

#projectsView .performance-detail-progress .bar-label span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#projectsView .finance-axis-caption {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

/* Atelier visual system pass: calm glass, precise rhythm, shared controls. */
:root {
  --ink: #f7f4ec;
  --ink-soft: rgba(247, 244, 236, 0.82);
  --muted: rgba(247, 244, 236, 0.58);
  --muted-strong: rgba(247, 244, 236, 0.72);
  --surface: #0a0b0e;
  --panel: rgba(25, 26, 31, 0.78);
  --panel-2: rgba(34, 35, 42, 0.82);
  --field: rgba(255, 255, 255, 0.055);
  --field-strong: rgba(255, 255, 255, 0.085);
  --line: rgba(247, 244, 236, 0.105);
  --line-strong: rgba(247, 244, 236, 0.18);
  --accent: #635EEC;
  --accent-dark: #efd581;
  --accent-blue: #3c8fbd;
  --danger: #FF5C67;
  --good: #8ea37d;
  --soft: rgba(94, 168, 255, 0.12);
  --radius: 22px;
  --radius-sm: 16px;
  --control-height: 38px;
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.035), 0 22px 54px rgba(0, 0, 0, 0.28);
  --shadow-soft: 0 14px 42px rgba(0, 0, 0, 0.2);
}

body {
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0) 220px),
    linear-gradient(135deg, rgba(27, 79, 111, 0.18), rgba(176, 42, 56, 0.08) 42%, rgba(10, 11, 14, 0) 72%),
    #0a0b0e;
  font-family: var(--font-ui);
}

.workspace {
  padding: 24px 30px 46px;
}

.sidebar {
  min-height: 76px;
  padding: 16px 30px 14px;
  border-bottom: 1px solid rgba(247, 244, 236, 0.08) !important;
  background:
    linear-gradient(180deg, rgba(22, 23, 28, 0.78), rgba(13, 14, 18, 0.56)),
    rgba(12, 13, 17, 0.58) !important;
  backdrop-filter: blur(28px) saturate(1.28);
  -webkit-backdrop-filter: blur(28px) saturate(1.28);
}

.brand-logo {
  width: 156px;
}

.nav {
  gap: 6px;
}

.nav-item {
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--muted-strong);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 680;
}

.nav-item.active,
.nav-item:hover {
  border-color: rgba(247, 244, 236, 0.11);
  color: var(--ink);
  background: rgba(255, 255, 255, 0.065);
}

.topbar {
  min-height: 42px;
  margin-bottom: 22px;
}

.view-title-group h1,
#viewTitle {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(26px, 2.4vw, 34px);
  font-weight: 780;
  letter-spacing: 0;
}

.panel,
.daily-panel,
.table-wrap,
.money-list,
.time-self-entries-panel,
.meeting-list-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.026)),
    var(--panel);
  box-shadow: var(--shadow-soft);
}

.panel {
  padding: 18px;
}

.panel-head {
  align-items: start;
  gap: 14px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(247, 244, 236, 0.075);
}

.panel-head h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 780;
  letter-spacing: 0;
}

.panel-head span,
small {
  color: var(--muted);
}

input,
select,
textarea,
.calendar-popover {
  border-color: var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  background: var(--field);
}

input:hover,
select:hover,
textarea:hover {
  border-color: var(--line-strong);
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(94, 168, 255, 0.52);
  background: var(--field-strong);
}

.primary-action,
.ghost-action,
.inline-action,
.row-actions button,
.segmented-control button {
  min-height: var(--control-height);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 720;
  letter-spacing: 0;
}

.primary-action {
  color: #121212;
  background: linear-gradient(180deg, #a5a2fa, var(--accent));
}

.primary-action:hover {
  background: linear-gradient(180deg, #a5a2fa, #5a57e6);
}

.ghost-action,
.inline-action,
.row-actions button {
  border-color: var(--line);
  color: var(--ink-soft);
  background: rgba(255, 255, 255, 0.045);
}

.ghost-action:hover,
.inline-action:hover,
.row-actions button:hover {
  border-color: rgba(94, 168, 255, 0.46);
  color: var(--ink);
  background: rgba(94, 168, 255, 0.105);
}

.danger-inline,
.danger-action,
.row-actions .danger-action {
  border-color: rgba(255, 92, 103, 0.35) !important;
  color: rgba(255, 201, 211, 0.92) !important;
  background: rgba(176, 42, 56, 0.16) !important;
}

.daily-list,
.coordination-timeline,
.money-list {
  scrollbar-width: thin;
  scrollbar-color: rgba(247, 244, 236, 0.24) transparent;
}

.daily-list::-webkit-scrollbar,
.coordination-timeline::-webkit-scrollbar,
.money-list::-webkit-scrollbar {
  width: 5px;
}

.daily-list::-webkit-scrollbar-thumb,
.coordination-timeline::-webkit-scrollbar-thumb,
.money-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(247, 244, 236, 0.24);
}

#dashboardView .daily-dashboard {
  gap: 16px;
}

#dashboardView .daily-panel {
  min-width: 0;
}

#dashboardView .daily-list {
  gap: 9px;
  padding-right: 3px;
}

#dashboardView .daily-item,
#dashboardView .task-item,
.coordination-item,
.coordination-timeline-item,
.money-item,
.time-entry-item,
.performance-detail-row,
.archive-result-pill,
.performance-metrics .metric-hint-item {
  border: 1px solid rgba(247, 244, 236, 0.09);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.04);
}

#dashboardView .daily-item:hover,
#dashboardView .task-item:hover,
.coordination-item:hover,
.coordination-timeline-item:hover,
.money-item:hover,
.time-entry-item:hover {
  border-color: rgba(247, 244, 236, 0.18);
  background: rgba(255, 255, 255, 0.062);
}

#dashboardView .daily-main strong,
#dashboardView .task-main strong,
.coordination-main strong,
.project-title,
.project-main-cell strong {
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 780;
}

#dashboardView .daily-main small,
#dashboardView .task-main small,
.coordination-meta,
.project-meta-block,
.project-main-cell span {
  color: var(--muted);
}

#dashboardView .subtle-comment-action {
  min-height: 28px;
  border-radius: 999px;
  color: var(--muted-strong);
  background: rgba(255, 255, 255, 0.045);
}

#dashboardView .subtle-comment-action.has-unread {
  border-color: rgba(94, 168, 255, 0.42);
  color: var(--accent-dark);
  background: rgba(94, 168, 255, 0.12);
}

#projectsView table,
#archiveView table {
  min-width: 1160px;
}

#projectsView thead tr,
#projectsView tbody tr {
  grid-template-columns: minmax(280px, 0.29fr) minmax(520px, 0.46fr) minmax(270px, 0.25fr);
}

#archiveView thead tr,
#archiveView tbody tr {
  grid-template-columns: minmax(280px, 0.32fr) minmax(520px, 0.44fr) minmax(260px, 0.24fr);
}

#projectsView tbody tr,
#archiveView tbody tr {
  border-color: rgba(247, 244, 236, 0.095);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.018)),
    rgba(25, 26, 31, 0.7);
}

#projectsView th,
#archiveView th {
  color: var(--muted-strong);
  background: rgba(255, 255, 255, 0.042);
  font-size: 11px;
  letter-spacing: 0;
}

#projectsView .status-cell .project-column-list {
  gap: 7px;
}

#projectsView .status-cell .status,
#projectsView .status-cell .pin-action,
#projectsView .status-cell .coordination-phase-action,
#projectsView .status-cell .project-detail-action,
#projectsView .status-cell .row-actions button {
  min-height: 31px;
  border-radius: 999px;
  font-size: 12px;
}

#projectsView .performance-metrics-public .metric-hint-item,
.performance-metrics .metric-hint-item {
  min-height: 46px;
  padding: 9px 12px;
  gap: 5px;
}

.bar,
.timeline-bar,
.coordination-progress-track,
.coordination-mini-timeline,
.coordination-deadline-track {
  height: 7px;
  border-radius: 999px;
  background: rgba(247, 244, 236, 0.105);
}

.bar-fill,
.timeline-fill,
.coordination-progress-fill {
  border-radius: 999px;
}

.status,
.coordination-status,
.coordination-type,
.money-type,
.archive-state-label {
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 720;
  letter-spacing: 0;
}

.hint-dot {
  width: 15px;
  height: 15px;
  border-color: rgba(247, 244, 236, 0.2);
  color: var(--muted);
  background: rgba(255, 255, 255, 0.045);
}

.hint-dot:hover,
.hint-dot:focus-visible {
  border-color: rgba(94, 168, 255, 0.48);
  color: var(--accent-dark);
  background: rgba(94, 168, 255, 0.13);
}

@media (max-width: 980px) {
  .workspace {
    padding: 18px;
  }

  .panel {
    padding: 15px;
  }

  .nav-item {
    min-height: 34px;
    padding: 0 11px;
  }
}

/* Layout stabilization pass: top navigation, shared form rhythm, compact rows. */
.app-shell {
  display: block;
  min-height: 100vh;
}

.sidebar {
  position: sticky !important;
  top: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: minmax(170px, 240px) minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  width: 100%;
  height: auto !important;
  min-height: 74px;
  padding: 14px clamp(18px, 3vw, 36px);
  border-right: 0 !important;
  border-bottom: 1px solid rgba(247, 244, 236, 0.095) !important;
  background:
    linear-gradient(180deg, rgba(24, 25, 31, 0.78), rgba(12, 13, 17, 0.6)),
    rgba(11, 12, 16, 0.58) !important;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.2) !important;
  backdrop-filter: blur(26px) saturate(1.25);
  -webkit-backdrop-filter: blur(26px) saturate(1.25);
}

.brand {
  display: flex;
  align-items: center;
  min-height: 0;
  padding: 0;
  border: 0;
}

.brand-logo {
  width: min(176px, 100%);
  transform: translateY(1px);
}

.nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  min-width: 0;
}

.nav-item {
  width: auto;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  white-space: nowrap;
}

.nav-item::before {
  content: none;
}

.workspace {
  width: min(100%, 1760px);
  margin: 0 auto;
  padding: 22px clamp(18px, 2.6vw, 34px) 48px;
}

.topbar {
  position: static !important;
  min-height: 46px;
  margin: 0 0 18px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none;
  backdrop-filter: none;
}

.role-controls label,
label {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
}

label input,
label select,
label textarea,
input,
select,
textarea {
  width: 100%;
  min-height: 38px;
  margin-top: 6px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  background: rgba(255, 255, 255, 0.052);
}

textarea,
label textarea {
  min-height: 88px;
  padding-top: 10px;
  padding-bottom: 10px;
  resize: vertical;
}

.form-panel,
.dashboard-task-form,
.coordination-form,
#timeForm,
#meetingForm,
#projectForm,
#archiveForm {
  gap: 14px;
}

.form-row,
.project-form-pair,
.project-form-finance-grid,
.meeting-form-fields,
.time-form-fields,
.coordination-form,
.dashboard-task-form {
  gap: 12px;
}

.form-actions,
.meeting-form-actions,
.time-form-actions,
.coordination-form-actions {
  gap: 8px;
}

.panel + .panel,
.split-layout > .panel + .panel,
.coordination-page > .panel + .panel {
  margin-top: 16px;
}

.daily-list,
.dashboard-task-section-list,
.coordination-group-list,
.meeting-list,
.money-list,
.time-entry-list,
.performance-detail-rows {
  display: grid;
  gap: 8px;
}

#dashboardView .daily-item,
#dashboardView .task-item,
.coordination-item,
.coordination-timeline-item,
.money-item,
.time-entry-item {
  min-height: 54px;
  padding: 12px 14px;
}

#dashboardView .task-row {
  align-items: start;
}

#dashboardView .dashboard-task-section + .dashboard-task-section {
  margin-top: 14px;
}

#dashboardView .dashboard-task-section-head {
  min-height: 30px;
  margin-bottom: 8px;
}

#dashboardView .dashboard-task-section-head strong {
  font-size: 14px;
}

#dashboardView .dashboard-task-list .task-row > .inline-action,
#dashboardView .daily-item .inline-action,
#dashboardView .daily-coordination-item .inline-action {
  min-height: 32px;
  padding: 0 12px;
}

#dashboardView .dashboard-task-comment-panel {
  margin-top: 10px;
}

#dashboardView .task-comment-form {
  gap: 8px;
}

#dashboardView .task-comment-form textarea {
  min-height: 54px;
}

#projectsView .table-wrap,
#archiveView .table-wrap {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

#projectsView tbody,
#archiveView tbody {
  gap: 12px;
}

#projectsView tbody tr,
#archiveView tbody tr {
  min-height: 190px;
}

#projectsView td,
#archiveView td {
  padding: 18px;
}

#projectsView .project-main-cell,
#archiveView .project-main-cell {
  padding-right: 14px;
}

#projectsView .project-performance,
#archiveView .project-performance {
  gap: 13px;
}

#projectsView .performance-metrics,
#archiveView .performance-metrics {
  gap: 8px;
}

#projectsView .status-cell .project-column-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 278px;
  gap: 8px;
}

#projectsView .status-cell .status,
#projectsView .status-cell .pin-action,
#projectsView .status-cell .coordination-phase-action,
#projectsView .status-cell .project-detail-action,
#projectsView .status-cell .row-actions button {
  min-height: 34px;
}

#coordinationView .coordination-page {
  gap: 16px;
}

#coordinationView .coordination-context-grid {
  gap: 9px;
}

#coordinationView .coordination-context-card,
#coordinationView .coordination-metric,
#coordinationView .coordination-progress-card {
  border-color: rgba(247, 244, 236, 0.095);
  background: rgba(255, 255, 255, 0.04);
}

#coordinationView .coordination-item {
  grid-template-columns: 30px minmax(0, 1fr) 150px;
}

#financeView .money-item,
.money-item {
  grid-template-columns: minmax(110px, 0.8fr) minmax(180px, 1.2fr) minmax(160px, 1fr) minmax(120px, 0.7fr) auto;
  align-items: center;
}

@media (max-width: 1180px) {
  .sidebar {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .brand {
    justify-content: center;
  }

  .nav {
    justify-content: center;
  }

  #projectsView .status-cell .project-column-list {
    width: 240px;
  }
}

@media (max-width: 760px) {
  .sidebar {
    position: sticky !important;
    padding: 12px;
  }

  .brand-logo {
    width: 142px;
  }

  .nav {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .nav-item {
    flex: 0 0 auto;
  }

  .topbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .role-controls {
    justify-content: flex-start;
    width: 100%;
  }

  #dashboardView .task-row,
  #dashboardView .dashboard-task-list .task-row {
    grid-template-columns: 26px minmax(0, 1fr);
  }

  #dashboardView .dashboard-task-list .task-row > .inline-action {
    grid-column: 2;
    justify-self: start;
  }
}

/* Screenshot cleanup: align recurring cards, simplify coordination and keep help dots calm. */
#dashboardView .daily-meeting-item,
#dashboardView .daily-coordination-item {
  align-items: center;
  min-height: 68px;
  padding: 12px 16px;
}

#dashboardView .daily-meeting-item .daily-main,
#dashboardView .daily-coordination-item .daily-main {
  align-self: center;
  align-content: center;
  min-height: 0;
  gap: 4px;
}

#dashboardView .daily-main strong,
#dashboardView .daily-main small {
  line-height: 1.22;
}

#dashboardView .daily-coordination-item {
  grid-template-columns: minmax(0, 1fr) 104px;
}

#dashboardView .daily-coordination-item .inline-action {
  align-self: center;
  justify-self: end;
  width: 100%;
  min-height: 34px;
}

#meetingsView .meetings-layout {
  align-items: start;
  gap: 16px;
}

#meetingsView #meetingForm,
#meetingsView .meeting-calendar-panel {
  align-self: start;
}

#meetingsView .meeting-form-note-row {
  grid-template-columns: minmax(0, 1fr) 180px;
  align-items: end;
}

#meetingsView .meeting-form-actions {
  align-self: end;
  display: grid;
  align-items: end;
}

#meetingsView .meeting-form-actions .primary-action,
#meetingsView .meeting-form-actions .ghost-action {
  width: 100%;
  height: var(--control-height);
  min-height: var(--control-height);
  border-radius: 999px;
}

#projectsView .performance-metrics-public .metric-hint-item,
#projectsView .performance-metrics .metric-hint-item {
  align-items: center;
  min-height: 50px;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 1;
}

#projectsView .performance-metrics-public .metric-hint-item strong,
#projectsView .performance-metrics .metric-hint-item strong {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

#projectsView .performance-metrics-public .metric-hint-item .hint-dot,
#projectsView .performance-metrics .metric-hint-item .hint-dot,
#projectsView .performance-detail-row .hint-dot {
  display: inline-grid;
  place-items: center;
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
  min-width: 15px;
  min-height: 15px;
  margin-left: 1px;
  padding: 0;
  border-radius: 50%;
  font-size: 10px;
  line-height: 1;
  transform: none;
}

#coordinationView .coordination-item {
  grid-template-columns: 128px 30px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  padding: 12px;
}

#coordinationView .coordination-check {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  margin-top: 2px;
}

#coordinationView .coordination-main {
  grid-column: 3;
  grid-row: 1;
  min-width: 0;
}

#coordinationView .coordination-meta {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 980px) {
  #coordinationView .coordination-item {
    grid-template-columns: 30px minmax(0, 1fr);
  }

  #coordinationView .coordination-check {
    grid-column: 1;
  }

  #coordinationView .coordination-main {
    grid-column: 2;
  }

  #coordinationView .coordination-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  #meetingsView .meeting-form-note-row,
#coordinationView .coordination-meta {
    grid-template-columns: 1fr;
  }
}

/* Alignment cleanup 2: meetings people picker, coordination actions and closing structure. */
#meetingsView .meetings-layout {
  grid-template-columns: minmax(0, 1.02fr) minmax(430px, 0.98fr);
  align-items: start;
}

#meetingsView #meetingForm {
  gap: 14px;
  min-height: 0;
}

#meetingsView .meeting-form-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: 12px;
}

#meetingsView .meeting-participants-field {
  display: grid;
  grid-column: 1 / -1;
  gap: 8px;
}

#meetingsView .meeting-participants-field > span,
.closing-column-panel > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 720;
}

#meetingsView .meeting-form-note-row {
  grid-template-columns: minmax(0, 1fr) 178px;
  align-items: end;
  gap: 12px;
}

#meetingsView .meeting-form-actions {
  align-self: end;
}

#meetingsView .meeting-form-actions .primary-action,
#meetingsView .meeting-form-actions .ghost-action {
  height: 70px;
  min-height: 70px;
  max-height: 70px;
}

.person-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.person-chip-list label {
  display: inline-grid;
  grid-template-columns: 26px auto;
  align-items: center;
  min-height: 42px;
  padding: 0 14px 0 10px;
  gap: 10px;
  border: 1px solid rgba(247, 244, 236, 0.13);
  border-radius: 999px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.04);
  font-size: 13px;
  font-weight: 650;
  text-transform: none;
  letter-spacing: 0;
}

.person-chip-list input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  display: inline-grid;
  place-items: center;
  inline-size: 26px;
  block-size: 26px;
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
  max-width: 26px;
  max-height: 26px;
  aspect-ratio: 1 / 1;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border: 1px solid rgba(247, 244, 236, 0.28);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.035);
  flex: 0 0 26px;
}

.person-chip-list input[type="checkbox"]::after {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.14s ease;
  background: var(--accent);
}

.person-chip-list input[type="checkbox"]:checked {
  border-color: rgba(94, 168, 255, 0.74);
  background: rgba(94, 168, 255, 0.14);
}

.person-chip-list input[type="checkbox"]:checked::after {
  transform: scale(1);
}

#coordinationView .coordination-item {
  grid-template-columns: 30px minmax(0, 1fr) 136px;
  align-items: start;
  gap: 12px;
}

#coordinationView .coordination-check {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
}

#coordinationView .coordination-main {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}

#coordinationView .coordination-status {
  display: none;
}

.closing-overview-grid {
  display: grid;
  grid-template-columns: minmax(210px, 0.85fr) minmax(320px, 1.05fr) minmax(340px, 1.1fr);
  gap: 14px;
  align-items: start;
  margin-top: 16px;
}

.closing-column-panel {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(247, 244, 236, 0.09);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.035);
}

.closing-column-panel h2 {
  margin: 0 0 6px;
  font-size: 16px;
}

.closing-column-panel .table-wrap {
  margin-top: 10px;
}

.closing-column-panel .time-people-list {
  margin-top: 10px;
}

@media (max-width: 1180px) {
  #meetingsView .meetings-layout,
  .closing-overview-grid {
    grid-template-columns: 1fr;
  }

  #meetingsView .meeting-calendar-panel {
    min-height: 0;
  }
}

@media (max-width: 760px) {
  #meetingsView .meeting-form-fields,
  #meetingsView .meeting-form-note-row {
    grid-template-columns: 1fr;
  }

  #coordinationView .coordination-item {
    grid-template-columns: 30px minmax(0, 1fr);
  }

  #coordinationView .coordination-main {
    grid-column: 2;
  }
}

/* Work and meeting structure pass: explicit meeting type and three-column work entry. */
#reportsView .time-page-layout {
  display: block;
}

#reportsView .work-entry-layout {
  display: grid;
  grid-template-columns: minmax(270px, 0.9fr) minmax(330px, 1fr) minmax(330px, 1.05fr);
  gap: 14px;
  align-items: stretch;
}

#reportsView #timeForm,
#reportsView #hoursMonthCalendar,
#reportsView .time-self-entries-panel {
  align-self: stretch;
  min-width: 0;
  margin: 0;
}

#reportsView #timeForm {
  display: grid;
  align-content: start;
}

#reportsView .time-form-fields,
#reportsView .time-form-note-row {
  grid-template-columns: 1fr;
}

#reportsView .time-form-actions {
  justify-content: stretch;
}

#reportsView .time-form-actions .primary-action,
#reportsView .time-form-actions .ghost-action {
  width: 100%;
  height: var(--control-height);
  min-height: var(--control-height);
  max-height: var(--control-height);
}

#reportsView .time-self-entries-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

#reportsView .time-self-entries-panel .time-entry-list {
  min-height: 0;
  max-height: 620px;
  overflow: auto;
  padding-right: 4px;
  scrollbar-width: thin;
}

#meetingsView .meeting-form-fields label {
  min-width: 0;
}

#meetingsView .meeting-participants-field small {
  color: var(--muted);
  font-size: 11px;
}

@media (max-width: 1280px) {
  #reportsView .work-entry-layout {
    grid-template-columns: minmax(280px, 0.95fr) minmax(330px, 1.05fr);
  }

  #reportsView .time-self-entries-panel {
    grid-column: 1 / -1;
  }
}

@media (max-width: 860px) {
  #reportsView .work-entry-layout {
    grid-template-columns: 1fr;
  }

  #reportsView .time-self-entries-panel {
    grid-column: auto;
  }
}

/* Three vertical panels for meetings and work. */
#meetingsView .meetings-layout {
  display: grid;
  grid-template-columns: minmax(300px, 0.92fr) minmax(360px, 1fr) minmax(340px, 1fr);
  gap: 14px;
  align-items: stretch;
}

#meetingsView #meetingForm,
#meetingsView .meeting-calendar-panel,
#meetingsView .meeting-list-panel {
  min-width: 0;
  margin: 0;
  align-self: stretch;
}

#meetingsView .meeting-list-panel {
  grid-column: auto;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

#meetingsView .meeting-list-panel .meeting-list {
  min-height: 0;
  max-height: 660px;
  overflow: auto;
  padding-right: 4px;
  scrollbar-width: thin;
}

#meetingsView .meeting-form-fields {
  grid-template-columns: 1fr;
}

#meetingsView .meeting-form-note-row {
  grid-template-columns: 1fr;
}

#meetingsView .meeting-form-actions {
  justify-content: stretch;
}

#meetingsView .meeting-form-actions .primary-action,
#meetingsView .meeting-form-actions .ghost-action {
  width: 100%;
  height: var(--control-height);
  min-height: var(--control-height);
  max-height: var(--control-height);
}

#reportsView .work-entry-layout {
  grid-template-columns: minmax(290px, 0.92fr) minmax(360px, 1fr) minmax(340px, 1fr);
}

#reportsView .time-self-entries-panel {
  grid-column: auto;
}

@media (min-width: 981px) {
  #meetingsView .meetings-layout,
  #reportsView .work-entry-layout {
    grid-template-columns: minmax(290px, 0.92fr) minmax(360px, 1fr) minmax(340px, 1fr) !important;
  }

  #meetingsView .meeting-list-panel,
  #reportsView .time-self-entries-panel {
    grid-column: auto !important;
  }
}

@media (max-width: 980px) {
  #meetingsView .meetings-layout,
  #reportsView .work-entry-layout {
    grid-template-columns: 1fr;
  }
}

/* Meeting list and work-column stability pass. */
#meetingsView,
#reportsView,
#meetingsView .meetings-layout,
#reportsView .work-entry-layout {
  max-width: 100%;
  overflow-x: hidden;
}

#meetingsView .meeting-list-panel .meeting-list {
  display: grid;
  align-content: start;
  gap: 9px;
  min-height: 0;
  overflow: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(246, 243, 234, 0.18) transparent;
}

#meetingsView .meeting-list-panel .meeting-actions {
  grid-area: actions;
  align-self: center;
  justify-self: end;
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  min-width: 92px;
  margin: 0;
}

#meetingsView .meeting-list-panel .meeting-actions button {
  width: 100%;
  min-height: 32px;
  justify-content: center;
}

#reportsView #timeForm,
#reportsView #hoursMonthCalendar,
#reportsView .time-self-entries-panel {
  height: clamp(560px, calc(100vh - 176px), 720px);
  max-height: 720px;
}

#reportsView #hoursMonthCalendar {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
}

#reportsView #hoursMonthCalendar .hours-calendar-grid {
  min-height: 0;
  grid-auto-rows: minmax(0, 1fr);
}

#reportsView .time-self-entries-panel .time-entry-list {
  max-height: none;
  overflow: auto;
}

@media (max-width: 1180px) {
  #meetingsView .meetings-layout,
  #reportsView .work-entry-layout {
    grid-template-columns: 1fr !important;
  }

  #meetingsView .meeting-list-panel,
  #reportsView .time-self-entries-panel {
    grid-column: auto !important;
  }

  #reportsView #timeForm,
  #reportsView #hoursMonthCalendar,
  #reportsView .time-self-entries-panel {
    height: auto;
    max-height: none;
  }
}

@media (max-width: 620px) {

  #meetingsView .meeting-list-panel .meeting-actions {
    justify-self: stretch;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 6px;
  }
}

/* Exact dashboard-card rhythm for meetings and a three-column coordination header. */
#meetingsView .meeting-list-panel .meeting-list {
  gap: 9px;
}

#coordinationView .coordination-page {
  display: grid;
  grid-template-columns: minmax(240px, 0.82fr) minmax(340px, 1fr) minmax(340px, 1fr);
  align-items: stretch;
  gap: 14px;
}

#coordinationView .coordination-status-layout {
  display: contents;
}

#coordinationView .coordination-control-panel {
  grid-column: 1;
  grid-row: 1;
}

#coordinationView .coordination-status-panel {
  grid-column: 2;
  grid-row: 1;
}

#coordinationView .coordination-timeline-panel {
  grid-column: 3;
  grid-row: 1;
}

#coordinationView .coordination-control-panel,
#coordinationView .coordination-status-panel,
#coordinationView .coordination-timeline-panel {
  min-width: 0;
  min-height: 520px;
  margin: 0;
}

#coordinationView .coordination-list-panel,
#coordinationView .coordination-archive-panel,
#coordinationView #coordinationFormPanel {
  grid-column: 1 / -1;
}

#coordinationView .coordination-context-grid,
#coordinationView .coordination-timeline {
  max-height: 440px;
  overflow: auto;
  padding-right: 4px;
  scrollbar-width: thin;
}

#coordinationView .coordination-status-panel .coordination-metrics {
  display: grid;
  gap: 10px;
}

@media (max-width: 1180px) {

  #coordinationView .coordination-page {
    grid-template-columns: 1fr;
  }

  #coordinationView .coordination-control-panel,
  #coordinationView .coordination-status-panel,
  #coordinationView .coordination-timeline-panel,
  #coordinationView .coordination-list-panel,
  #coordinationView .coordination-archive-panel,
  #coordinationView #coordinationFormPanel {
    grid-column: 1;
    grid-row: auto;
    min-height: 0;
  }
}

/* Unified thirds system and exact overview-style meeting rows. */
:root {
  --three-panel-gap: 16px;
  --three-panel-height: clamp(560px, calc(100vh - 176px), 720px);
}

#dashboardView .daily-dashboard,
#meetingsView .meetings-layout,
#reportsView .work-entry-layout,
#coordinationView .coordination-page,
#closingView .closing-overview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: var(--three-panel-gap);
  align-items: stretch;
  max-width: 100%;
  overflow-x: hidden;
}

#dashboardView .daily-dashboard.is-two-column {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

#dashboardView .daily-panel,
#meetingsView #meetingForm,
#meetingsView .meeting-calendar-panel,
#meetingsView .meeting-list-panel,
#reportsView #timeForm,
#reportsView #hoursMonthCalendar,
#reportsView .time-self-entries-panel,
#coordinationView .coordination-control-panel,
#coordinationView .coordination-status-panel,
#coordinationView .coordination-timeline-panel {
  min-width: 0;
  height: var(--three-panel-height);
  max-height: var(--three-panel-height);
  margin: 0;
}

#closingView .closing-column-panel {
  min-width: 0;
  min-height: 420px;
  margin: 0;
}

#meetingsView .meeting-list-panel,
#reportsView .time-self-entries-panel,
#coordinationView .coordination-control-panel,
#coordinationView .coordination-status-panel,
#coordinationView .coordination-timeline-panel,
#closingView .closing-column-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

#meetingsView .meeting-list-panel .meeting-list,
#reportsView .time-self-entries-panel .time-entry-list,
#coordinationView .coordination-context-grid,
#coordinationView .coordination-timeline {
  min-height: 0;
  max-height: none;
  overflow: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(246, 243, 234, 0.18) transparent;
}

#coordinationView .coordination-status-layout {
  display: contents !important;
}

#coordinationView .coordination-control-panel {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

#coordinationView .coordination-status-panel {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

#coordinationView .coordination-timeline-panel {
  grid-column: 3 !important;
  grid-row: 1 !important;
}

#coordinationView #coordinationFormPanel,
#coordinationView .coordination-list-panel,
#coordinationView .coordination-archive-panel {
  grid-column: 1 / -1 !important;
}

@media (max-width: 1180px) {
  #dashboardView .daily-dashboard,
  #dashboardView .daily-dashboard.is-two-column,
  #meetingsView .meetings-layout,
  #reportsView .work-entry-layout,
  #coordinationView .coordination-page,
  #closingView .closing-overview-grid {
    grid-template-columns: 1fr !important;
  }

  #dashboardView .daily-panel,
  #meetingsView #meetingForm,
  #meetingsView .meeting-calendar-panel,
  #meetingsView .meeting-list-panel,
  #reportsView #timeForm,
  #reportsView #hoursMonthCalendar,
  #reportsView .time-self-entries-panel,
  #coordinationView .coordination-control-panel,
  #coordinationView .coordination-status-panel,
  #coordinationView .coordination-timeline-panel,
  #closingView .closing-column-panel {
    height: auto;
    max-height: none;
    min-height: 0;
  }

  #coordinationView .coordination-control-panel,
  #coordinationView .coordination-status-panel,
  #coordinationView .coordination-timeline-panel,
  #coordinationView #coordinationFormPanel,
  #coordinationView .coordination-list-panel,
  #coordinationView .coordination-archive-panel {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
}

#meetingsView .meeting-participants-field {
  grid-column: 1 / -1;
}

#meetingsView .meeting-participants-field .person-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 136px;
  overflow: auto;
  padding-right: 3px;
  scrollbar-width: thin;
}

#coordinationView .coordination-page {
  grid-template-columns: minmax(260px, 0.78fr) minmax(360px, 1fr) minmax(360px, 1fr) !important;
}

#coordinationView .coordination-control-panel,
#coordinationView .coordination-status-panel,
#coordinationView .coordination-timeline-panel {
  overflow: hidden;
}

#coordinationView .coordination-context-grid {
  grid-template-columns: 1fr !important;
  align-content: start;
  gap: 9px;
}

#coordinationView .coordination-context-card {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "number title"
    "number phase"
    "progress progress"
    "meta meta";
  align-items: start;
  min-height: 86px;
  padding: 13px 14px;
  gap: 5px 10px;
  text-align: left;
}

#coordinationView .coordination-card-number {
  grid-area: number;
  justify-self: start;
  align-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 38px;
  width: auto;
  max-width: 72px;
  height: 28px;
  padding: 0 10px;
  text-align: left;
  border-radius: 999px;
}

#coordinationView .coordination-context-card strong {
  grid-area: title;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#coordinationView .coordination-context-card small {
  grid-area: phase;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#coordinationView .coordination-context-card .coordination-card-progress {
  grid-area: progress;
  margin-top: 4px;
}

#coordinationView .coordination-context-card em {
  grid-area: meta;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#coordinationView .coordination-progress-card {
  min-width: 0;
}

#coordinationView .coordination-metrics {
  grid-template-columns: 1fr;
}

#coordinationView .coordination-timeline-item {
  display: grid;
  align-content: center;
  min-height: 92px;
  padding: 14px 16px;
  gap: 6px;
  overflow: hidden;
}

#coordinationView .coordination-timeline-item span,
#coordinationView .coordination-timeline-item strong,
#coordinationView .coordination-timeline-item small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#coordinationView .coordination-mini-timeline {
  margin-top: 4px;
}

#closingView #addTeamMember {
  flex: 0 0 auto;
  justify-self: start;
  max-width: 100%;
  min-height: 34px;
  padding-inline: 12px;
  font-size: 11px;
}

#closingView #financeForm {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 0;
  overflow: hidden;
  gap: 10px;
}

#closingView .team-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
}

#closingView .team-row .team-name {
  grid-column: 1 / -1;
}

#closingView #financeForm > .primary-action {
  min-height: 38px;
}

@media (max-width: 1380px) {
  #coordinationView .coordination-page,
  #closingView .closing-overview-grid {
    grid-template-columns: 1fr !important;
  }

  #coordinationView .coordination-control-panel,
  #coordinationView .coordination-status-panel,
  #coordinationView .coordination-timeline-panel,
  #closingView .closing-column-panel {
    height: auto;
    max-height: none;
    min-height: 0;
  }
}

/* Meetings list reset: the section uses the same base as dashboard meetings, only roomier. */
#meetingsView .meeting-list-panel .meeting-list {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding-right: 4px;
}

#meetingsView .meeting-list-panel .daily-meeting-item {
  position: relative;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center;
  gap: 16px;
  min-width: 0;
  min-height: 88px;
  padding: 16px 18px;
  border: 1px solid rgba(247, 244, 236, 0.09);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: none;
  cursor: pointer;
  text-align: left;
}

#meetingsView .meeting-list-panel .daily-meeting-item:hover,
#meetingsView .meeting-list-panel .daily-meeting-item.is-selected {
  border-color: rgba(247, 244, 236, 0.18);
  background: rgba(255, 255, 255, 0.062);
}

#meetingsView .meeting-list-panel .daily-meeting-item .daily-main {
  display: grid;
  align-content: center;
  justify-items: start;
  min-width: 0;
  gap: 6px;
  text-align: left;
}

#meetingsView .meeting-list-panel .daily-meeting-item .daily-main strong {
  display: block;
  width: 100%;
  overflow: hidden;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 780;
  line-height: 1.22;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#meetingsView .meeting-list-panel .daily-meeting-item .daily-main small {
  display: block;
  width: 100%;
  overflow: hidden;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.28;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#meetingsView .meeting-list-panel .daily-meeting-item .meeting-actions {
  position: static !important;
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 8px;
  min-width: 154px;
  margin: 0;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
}

#meetingsView .meeting-list-panel .daily-meeting-item .meeting-actions button {
  width: auto;
  min-width: 72px;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  justify-content: center;
  font-size: 11px;
}

@media (max-width: 760px) {
  #meetingsView .meeting-list-panel .daily-meeting-item {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #meetingsView .meeting-list-panel .daily-meeting-item .meeting-actions {
    justify-content: stretch;
    min-width: 0;
  }

  #meetingsView .meeting-list-panel .daily-meeting-item .meeting-actions button {
    flex: 1 1 0;
  }
}

/* Layout tuning pass: keep repeated three-column screens visually aligned. */
#dashboardView .daily-urgency-panel {
  order: 1;
}

#dashboardView .daily-task-panel {
  order: 2;
}

#dashboardView .daily-agenda-panel {
  order: 3;
}

.topbar .view-title-group {
  align-items: baseline;
  gap: 12px;
}

.topbar .view-title-group h1,
.topbar .time-top-summary,
.topbar .time-top-summary strong {
  font-family: var(--font-display);
  font-size: clamp(30px, 2.2vw, 42px);
  font-weight: 780;
  line-height: 1;
}

.topbar .time-top-summary {
  display: flex;
  align-items: baseline;
  color: var(--ink);
}

#meetingsView .meetings-layout {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch;
  gap: 18px;
  overflow: visible;
}

#meetingsView .meetings-layout > * {
  min-width: 0;
}

#meetingsView #meetingForm,
#meetingsView .meeting-calendar-panel,
#meetingsView .meeting-list-panel {
  height: clamp(520px, calc(100vh - 188px), 760px);
  min-height: 0;
}

#meetingsView .meeting-form-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: end;
}

#meetingsView .meeting-participants-field {
  grid-column: 1 / -1;
}

#meetingsView .meeting-form-note-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: stretch;
  gap: 12px;
}

#meetingsView .meeting-form-note-row textarea {
  min-height: 104px;
  resize: vertical;
}

#meetingsView .meeting-form-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 10px;
}

#meetingsView .meeting-form-actions button {
  width: 100%;
  min-height: var(--control-height);
}

#meetingsView .meeting-list-panel .daily-meeting-item {
  grid-template-columns: minmax(0, 1fr) !important;
  min-height: 96px;
  padding: 18px 20px;
}

#meetingsView .meeting-list-panel .daily-meeting-item .daily-main {
  gap: 8px;
}

#meetingsView .meeting-list-panel .daily-meeting-item .meeting-actions {
  display: none !important;
}
/* System typography pass: one repeated scale for headings, text, controls and rows. */
:root {
  --type-page-title: clamp(24px, 1.8vw, 32px);
  --type-section-title: 22px;
  --type-card-title: 15px;
  --type-body: 14px;
  --type-action: 13px;
  --type-caption: 12px;
  --type-label: 11px;
  --type-action: 13px;
  --leading-tight: 1.08;
  --leading-title: 1.18;
  --leading-body: 1.35;
  --system-field-height: 42px;
  --system-action-height: 34px;
  --system-row-height: 58px;
  --system-panel-radius: var(--radius);
  --system-row-radius: var(--radius);
  --system-pill-radius: 999px;
}

.app-shell,
.app-shell * {
  letter-spacing: 0 !important;
}

body,
button,
input,
select,
textarea {
  font-family: var(--font-ui);
  font-size: var(--type-body);
  line-height: var(--leading-body);
}

.view-title-group {
  align-items: baseline;
  gap: 10px;
}

.view-title-group h1,
#viewTitle,
.time-top-summary strong {
  font-family: var(--font-display);
  font-size: var(--type-page-title) !important;
  font-weight: 780;
  line-height: var(--leading-tight);
}

.time-top-summary {
  align-items: baseline;
  color: var(--ink);
}

.time-top-summary strong {
  color: var(--ink);
}

.panel-head h2,
.form-panel h2,
.closing-column-panel h2,
.meeting-detail-panel .panel-head h2,
.coordination-control-panel .panel-head h2,
.coordination-status-panel .panel-head h2,
.coordination-timeline-panel .panel-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--type-section-title) !important;
  font-weight: 780;
  line-height: var(--leading-title);
}

.panel-head,
.form-section-head {
  gap: 8px;
}

.panel-head span,
.form-section-head span,
.field-note,
.form-note,
.empty,
.meeting-detail-main span,
.meeting-detail-main small,
.coordination-timeline-item span,
.coordination-timeline-item small,
.coordination-item small,
.project-meta-block span,
.project-meta-block b,
.project-phase-row-title span,
.project-phase-row-title em,
.time-entry-item span,
.daily-main small {
  font-size: var(--type-caption) !important;
  line-height: var(--leading-body);
}

label,
.form-section-head h3,
.finance-filter-fields label,
.money-form label,
.team-row label,
table th {
  color: var(--muted);
  font-size: var(--type-label) !important;
  font-weight: 740;
  line-height: 1.2;
}

.person-chip-list label,
.time-person-card strong,
.team-row .team-name,
.team-row strong {
  text-transform: none !important;
}

.daily-main strong,
.time-entry-item strong,
.money-item strong,
.coordination-timeline-item strong,
.meeting-detail-main strong,
.project-title-row strong,
.project-phase-row-title strong,
.time-person-card strong {
  min-width: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--type-card-title) !important;
  font-weight: 780;
  line-height: var(--leading-title);
}

.daily-main,
.meeting-detail-main,
.coordination-timeline-item,
.project-title-row,
.project-phase-row-title,
.time-entry-item > span,
.time-entry-item > strong {
  min-width: 0;
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  min-height: var(--system-field-height);
  border-radius: var(--radius-sm);
  font-size: var(--type-body);
  line-height: var(--leading-body);
}

textarea {
  padding-top: 11px;
  padding-bottom: 11px;
}

button,
.primary-action,
.ghost-action,
.inline-action,
.row-actions button,
.meeting-actions button,
.time-entry-actions button,
.small-action {
  min-height: var(--system-action-height);
  border-radius: var(--system-pill-radius);
  font-family: var(--font-display);
  font-size: var(--type-action) !important;
  font-weight: 760;
  line-height: 1.1;
}

.nav-item {
  min-height: 36px;
  border-radius: var(--system-pill-radius);
  font-size: 14px !important;
  line-height: 1.1;
}

.panel,
.form-panel,
.meeting-detail-panel,
.coordination-control-panel,
.coordination-status-panel,
.coordination-timeline-panel,
.closing-column-panel,
.table-wrap {
  border-radius: var(--system-panel-radius);
}

.daily-item,
.time-entry-item,
.money-item,
.coordination-item,
.coordination-timeline-item,
.coordination-card,
.meeting-detail-card,
.time-person-card,
.team-row,
.metric-hint-item,
.project-phase-row,
.status,
.month-chip {
  border-radius: var(--system-row-radius);
}

#dashboardView .daily-item,
#meetingsView .meeting-list-panel .daily-meeting-item {
  min-height: var(--system-row-height);
  padding: 9px 12px !important;
}

.money-type,
.status,
.month-chip,
.metric-hint-item,
.inline-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  border-radius: var(--system-pill-radius);
  font-size: 12px !important;
  font-weight: 760;
  line-height: 1.1;
}

.person-chip-list input[type="checkbox"] {
  flex: 0 0 28px;
  width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  border-radius: 50% !important;
}

table td {
  font-size: var(--type-body);
  line-height: var(--leading-body);
}

@media (max-width: 760px) {
  :root {
    --type-page-title: 24px;
    --type-section-title: 20px;
    --type-card-title: 14px;
    --type-body: 13px;
  }

  .view-title-group {
    align-items: flex-start;
  }
}

/* Shared size for meeting summary cards in Dashboard and Meetings. */
#dashboardView .daily-meeting-item,
#meetingsView .meeting-list-panel .daily-meeting-item {
  box-sizing: border-box;
  height: 66px;
  min-height: 66px;
  max-height: 66px;
  overflow: hidden;
}

#dashboardView .daily-meeting-item .daily-main,
#meetingsView .meeting-list-panel .daily-meeting-item .daily-main {
  min-height: 0;
  overflow: hidden;
}

/* Final axis lock: nearest meeting cards must sit on the same left rhythm as dashboard meeting cards. */
#meetingsView .meeting-list-panel .meeting-list {
  box-sizing: border-box;
  width: 100%;
  padding: 0 !important;
  padding-right: 3px !important;
}

#meetingsView .meeting-list-panel .daily-meeting-item {
  width: 100%;
  margin: 0 !important;
  padding: 8px 10px !important;
}

#meetingsView .meeting-list-panel .daily-meeting-item .daily-main {
  margin: 0 !important;
  padding: 0 !important;
}

#meetingsView .meeting-list-panel .daily-meeting-item .daily-main strong,
#meetingsView .meeting-list-panel .daily-meeting-item .daily-main small {
  margin: 0 !important;
  padding: 0 !important;
  text-align: left;
}

#meetingsView .meeting-detail-panel {
  margin-top: 18px;
  min-width: 0;
}

#meetingsView .meeting-detail-list {
  display: grid;
  gap: 10px;
}

#meetingsView .meeting-detail-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  min-width: 0;
  padding: 16px 18px;
  border: 1px solid rgba(247, 244, 236, 0.1);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.04);
}

#meetingsView .meeting-detail-card.is-selected,
#meetingsView .meeting-detail-card.is-focused,
#meetingsView .meeting-list-panel .daily-meeting-item.is-focused {
  border-color: rgba(94, 168, 255, 0.58);
  background: rgba(94, 168, 255, 0.1);
}

#meetingsView .meeting-detail-main {
  display: grid;
  min-width: 0;
  gap: 5px;
}

#meetingsView .meeting-detail-main strong,
#meetingsView .meeting-detail-main span,
#meetingsView .meeting-detail-main small,
#meetingsView .meeting-detail-main p {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

#meetingsView .meeting-detail-main strong {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 780;
  line-height: 1.25;
}

#meetingsView .meeting-detail-main span,
#meetingsView .meeting-detail-main small,
#meetingsView .meeting-detail-main p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

#meetingsView .meeting-detail-card .meeting-actions {
  position: static !important;
  display: flex !important;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 8px;
  min-width: 154px;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
}

#projectsView .project-meta-block,
#projectsView .project-phase-row-title {
  gap: 6px;
}

#projectsView .project-meta-block span,
#projectsView .project-meta-block b,
#projectsView .project-phase-row-title span,
#projectsView .project-phase-row-title em {
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1.3;
  text-transform: none;
}

#projectsView .project-meta-block b,
#projectsView .project-phase-row-title span {
  color: var(--muted-strong);
  font-weight: 760;
}

#projectsView .performance-metrics-public .metric-hint-item:first-child .hint-dot {
  display: none;
}

#projectsView .status-cell .project-column-list {
  align-items: stretch;
}

#projectsView .status-cell .project-column-list > .inline-action,
#projectsView .status-cell .project-column-list > .status,
#projectsView .status-cell .project-column-list .row-actions button {
  width: 100%;
  min-height: 38px;
}

#coordinationView .coordination-page {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch;
  gap: 18px;
}

#coordinationView .coordination-status-layout {
  display: contents !important;
}

#coordinationView .coordination-control-panel,
#coordinationView .coordination-status-panel,
#coordinationView .coordination-timeline-panel {
  min-width: 0;
  height: clamp(520px, calc(100vh - 188px), 760px);
  min-height: 0;
  overflow: hidden;
}

#coordinationView .coordination-form-panel,
#coordinationView .coordination-list-panel,
#coordinationView .coordination-archive-panel {
  grid-column: 1 / -1;
  min-width: 0;
}

#coordinationView .coordination-context-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-content: start;
  min-height: 0;
  overflow: auto;
}

#coordinationView .coordination-context-card {
  min-width: 0;
  min-height: 116px;
  overflow: hidden;
  border-radius: var(--radius-sm);
}

#coordinationView .coordination-card-number,
#coordinationView .coordination-context-card strong,
#coordinationView .coordination-context-card small,
#coordinationView .coordination-context-card em,
#coordinationView .coordination-timeline-item strong,
#coordinationView .coordination-timeline-item span,
#coordinationView .coordination-timeline-item small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#coordinationView .coordination-timeline {
  min-height: 0;
  overflow: auto;
}

#closingView .closing-overview-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch;
  gap: 18px;
}

#closingView .closing-column-panel {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  min-width: 0;
  min-height: 520px;
  overflow: hidden;
}

#closingView .closing-column-panel h2 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 780;
  line-height: 1.05;
}

#closingView .closing-column-panel > span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

#closingView .closing-column-panel .table-wrap,
#closingView .closing-column-panel .time-people-list {
  min-height: 0;
  overflow: auto;
}

#reportsView .time-entry-item {
  grid-template-columns: minmax(86px, 0.55fr) minmax(0, 1.25fr) minmax(0, 1fr) minmax(54px, auto) minmax(0, 1.2fr) auto;
  min-width: 0;
}

#reportsView .time-entry-item > span,
#reportsView .time-entry-item > strong {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

@media (max-width: 1200px) {
  #meetingsView .meetings-layout,
  #coordinationView .coordination-page,
  #closingView .closing-overview-grid {
    grid-template-columns: 1fr !important;
  }

  #meetingsView #meetingForm,
  #meetingsView .meeting-calendar-panel,
  #meetingsView .meeting-list-panel,
  #coordinationView .coordination-control-panel,
  #coordinationView .coordination-status-panel,
  #coordinationView .coordination-timeline-panel,
  #closingView .closing-column-panel {
    height: auto;
    max-height: none;
    min-height: 0;
  }

  #coordinationView .coordination-status-layout {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

@media (max-width: 760px) {
  #meetingsView .meeting-detail-card {
    grid-template-columns: minmax(0, 1fr);
  }

  #meetingsView .meeting-detail-card .meeting-actions {
    min-width: 0;
    justify-content: stretch;
  }

  #meetingsView .meeting-detail-card .meeting-actions button {
    flex: 1 1 0;
  }

  #reportsView .time-entry-item {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  #reportsView .time-entry-item > span,
  #reportsView .time-entry-item > strong {
    grid-column: 1 / 2;
  }

  #reportsView .time-entry-actions {
    grid-column: 2 / 3;
    grid-row: 1 / span 5;
    align-self: center;
  }
}

/* Meetings interaction polish: actions live inside cards, selected meeting opens below. */
#meetingsView .meeting-list-panel .daily-meeting-item {
  grid-template-columns: minmax(0, 1fr) auto !important;
}

#meetingsView .meeting-list-panel .daily-meeting-item .meeting-actions {
  position: static !important;
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 8px;
  min-width: 146px;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
}

#meetingsView .meeting-list-panel .daily-meeting-item .meeting-actions button,
#meetingsView .meeting-detail-card .meeting-actions button {
  min-width: 68px;
  min-height: 34px;
  padding-inline: 12px;
  border-radius: 999px;
  font-size: 11px;
}

#meetingsView .meeting-detail-card {
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease, min-height 180ms ease;
}

#meetingsView .meeting-detail-card:not(.is-expanded) {
  min-height: 78px;
}

#meetingsView .meeting-detail-card.is-expanded {
  align-items: start;
  min-height: 150px;
  padding-block: 18px;
}

#meetingsView .meeting-detail-extra {
  display: none;
  gap: 7px;
  margin-top: 8px;
}

#meetingsView .meeting-detail-card.is-expanded .meeting-detail-extra {
  display: grid;
}

#meetingsView .meeting-detail-card:not(.is-expanded) .meeting-actions {
  opacity: 0.58 !important;
}

#meetingsView .meeting-detail-card.is-expanded .meeting-actions {
  padding-top: 2px;
}

#meetingsView .meeting-detail-card.is-expanded .meeting-detail-main strong {
  font-size: 18px;
}

@media (max-width: 760px) {
  #meetingsView .meeting-list-panel .daily-meeting-item,
  #meetingsView .meeting-detail-card {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #meetingsView .meeting-list-panel .daily-meeting-item .meeting-actions,
  #meetingsView .meeting-detail-card .meeting-actions {
    justify-content: stretch;
    min-width: 0;
  }

  #meetingsView .meeting-list-panel .daily-meeting-item .meeting-actions button,
  #meetingsView .meeting-detail-card .meeting-actions button {
    flex: 1 1 0;
  }
}

/* True final override: this block must remain last. */
:root {
  --final-card-height: 82px;
  --final-field-height: 42px;
  --final-panel-radius: 22px;
  --final-card-radius: 22px;
  --final-field-radius: 16px;
  --final-gap: 18px;
}

#dashboardView .daily-dashboard,
#reportsView .work-entry-layout,
#meetingsView .meetings-layout,
#coordinationView .coordination-page,
#closingView .closing-overview-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: var(--final-gap) !important;
  align-items: stretch !important;
}

#coordinationView .coordination-status-layout {
  display: contents !important;
}

#dashboardView .daily-panel,
#reportsView .form-panel,
#reportsView .time-self-entries-panel,
#meetingsView .form-panel,
#meetingsView .meeting-calendar-panel,
#meetingsView .meeting-list-panel,
#coordinationView .coordination-control-panel,
#coordinationView .coordination-status-panel,
#coordinationView .coordination-timeline-panel,
#closingView .closing-column-panel {
  min-width: 0 !important;
  border-radius: var(--final-panel-radius) !important;
  overflow: hidden !important;
}

#dashboardView :is(.daily-meeting-item, .daily-coordination-item, .task-row),
#meetingsView .meeting-list-panel .daily-meeting-item,
#reportsView .time-entry-item,
#coordinationView .coordination-context-card,
#coordinationView .coordination-timeline-item,
#coordinationView .coordination-item {
  box-sizing: border-box !important;
  min-width: 0 !important;
  min-height: var(--final-card-height) !important;
  height: auto !important;
  border-radius: var(--final-card-radius) !important;
  padding: 12px 16px !important;
}

#dashboardView :is(.daily-meeting-item, .daily-coordination-item) .daily-main strong,
#meetingsView .meeting-list-panel .daily-meeting-item .daily-main strong,
#dashboardView .task-main strong,
#coordinationView .coordination-context-card strong,
#coordinationView .coordination-timeline-item strong,
#coordinationView .coordination-item strong {
  color: var(--ink) !important;
  font-size: var(--type-card-title) !important;
  font-weight: 780 !important;
  line-height: 1.18 !important;
  text-transform: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#dashboardView :is(.daily-meeting-item, .daily-coordination-item) .daily-main small,
#meetingsView .meeting-list-panel .daily-meeting-item .daily-main small,
#dashboardView .task-main small,
#coordinationView .coordination-context-card small,
#coordinationView .coordination-context-card em,
#coordinationView .coordination-timeline-item span,
#coordinationView .coordination-timeline-item small,
#coordinationView .coordination-item small {
  color: var(--muted) !important;
  font-size: var(--type-body) !important;
  font-weight: 520 !important;
  line-height: 1.32 !important;
  text-transform: none !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
}

#reportsView .time-form-note-row,
#meetingsView .meeting-form-note-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 16px !important;
  align-items: end !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

#reportsView .time-form-note-row textarea,
#meetingsView .meeting-form-note-row textarea {
  height: 104px !important;
  min-height: 104px !important;
  max-height: 104px !important;
  resize: none !important;
}

#reportsView .time-form-actions,
#meetingsView .meeting-form-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-rows: var(--final-field-height) !important;
  gap: 8px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

#reportsView .time-form-actions button,
#meetingsView .meeting-form-actions button,
#reportsView #timeSubmit,
#meetingsView #meetingSubmit,
#reportsView #cancelTimeEdit,
#meetingsView #cancelMeetingEdit {
  width: 100% !important;
  height: var(--final-field-height) !important;
  min-height: var(--final-field-height) !important;
  max-height: var(--final-field-height) !important;
  padding: 0 14px !important;
  border-radius: var(--system-pill-radius) !important;
  transform: none !important;
}

#reportsView .time-form-actions .hidden,
#meetingsView .meeting-form-actions .hidden {
  display: none !important;
}

.calendar-field {
  position: relative !important;
}

.calendar-field .calendar-display-value {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 3 !important;
  display: flex !important;
  align-items: center !important;
  height: var(--final-field-height) !important;
  padding: 0 14px !important;
  color: var(--ink) !important;
  font-size: var(--type-body) !important;
  font-weight: 720 !important;
  line-height: 1 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

input.calendar-display-input {
  color: transparent !important;
  text-shadow: none !important;
  caret-color: transparent !important;
}

#projectsView .status-cell .project-column-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  align-content: start !important;
}

#projectsView .status-cell .project-column-list > .status,
#projectsView .status-cell .project-column-list > .pin-action,
#projectsView .status-cell .project-column-list > .coordination-phase-action,
#projectsView .status-cell .project-column-list > .project-detail-action,
#projectsView .status-cell .project-column-list > .inline-action,
#projectsView .status-cell .project-column-list .row-actions,
#projectsView .status-cell .project-column-list .row-actions button {
  width: 100% !important;
  max-width: 100% !important;
}

#projectsView .status-cell .project-column-list .row-actions {
  display: contents !important;
}

.hint-dot,
.person-chip-list input[type="checkbox"],
.comment-check,
.coordination-check {
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}

@media (max-width: 1280px) {
  #dashboardView .daily-dashboard,
  #reportsView .work-entry-layout,
  #meetingsView .meetings-layout,
  #coordinationView .coordination-page,
  #closingView .closing-overview-grid {
    grid-template-columns: 1fr !important;
  }

  #coordinationView .coordination-status-layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: var(--final-gap) !important;
  }
}

#archiveView .archive-right-actions,
#archiveView .archive-outcome-wrap {
  align-items: start !important;
}

#archiveView .archive-detail-action,
#archiveView .archive-right-actions button {
  width: 100% !important;
  height: var(--final-field-height) !important;
  min-height: var(--final-field-height) !important;
  max-height: var(--final-field-height) !important;
  padding: 0 14px !important;
  align-self: start !important;
  border-radius: var(--system-pill-radius) !important;
}

#archiveView .archive-outcome-wrap {
  display: grid !important;
  gap: 8px !important;
}

#closingView #addTeamMember {
  max-width: 100% !important;
  justify-self: end !important;
}

#archiveView .archive-right-actions,
#archiveView .archive-outcome-wrap {
  align-items: start !important;
}

#archiveView .archive-detail-action,
#archiveView .archive-right-actions button {
  height: var(--final-field-height) !important;
  min-height: var(--final-field-height) !important;
  max-height: var(--final-field-height) !important;
  padding: 0 14px !important;
  align-self: start !important;
}

.calendar-field input.calendar-display-input:not([type="checkbox"]):not([type="radio"]) {
  color: transparent !important;
  text-shadow: none !important;
  caret-color: transparent !important;
}

#archiveView .archive-right-actions,
#archiveView .archive-outcome-wrap {
  align-items: start !important;
}

#archiveView .archive-detail-action,
#archiveView .archive-right-actions button {
  height: var(--final-field-height) !important;
  min-height: var(--final-field-height) !important;
  max-height: var(--final-field-height) !important;
  padding: 0 14px !important;
  align-self: start !important;
}

/* Calm final pass: repeat the same component rules across the app. */
:root {
  --calm-page-gap: 18px;
  --calm-panel-pad: 24px;
  --calm-card-height: 82px;
  --calm-form-height: 42px;
  --calm-button-height: 42px;
  --calm-radius-panel: 22px;
  --calm-radius-card: 22px;
  --calm-radius-field: 16px;
  --calm-title: var(--type-section-title);
  --calm-card-title: var(--type-card-title);
  --calm-body: var(--type-body);
  --calm-meta: var(--type-caption);
  --calm-label: var(--type-label);
}

* {
  letter-spacing: 0 !important;
}

body,
button,
input,
select,
textarea {
  font-family: var(--font-ui) !important;
}

#dashboardView .daily-dashboard,
#reportsView .work-entry-layout,
#meetingsView .meetings-layout,
#coordinationView .coordination-page,
#closingView .closing-overview-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: var(--calm-page-gap) !important;
  align-items: stretch !important;
}

#coordinationView .coordination-status-layout {
  display: contents !important;
}

.panel,
.form-panel,
.daily-panel,
.meeting-calendar-panel,
.meeting-detail-panel,
.coordination-control-panel,
.coordination-status-panel,
.coordination-timeline-panel,
.coordination-form-panel,
.coordination-list-panel,
.coordination-archive-panel,
.closing-column-panel,
.finance-extra-panel,
.owner-balance-panel {
  box-sizing: border-box !important;
  min-width: 0 !important;
  border-radius: var(--calm-radius-panel) !important;
  padding: var(--calm-panel-pad) !important;
}

.panel-head,
.time-form-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 14px !important;
  margin: 0 0 16px !important;
  padding-bottom: 12px !important;
}

.panel-head h2,
.form-panel h2,
.closing-column-panel h2,
.meeting-detail-panel .panel-head h2,
.coordination-control-panel .panel-head h2,
.coordination-status-panel .panel-head h2,
.coordination-timeline-panel .panel-head h2 {
  margin: 0 !important;
  color: var(--ink) !important;
  font-size: var(--calm-title) !important;
  font-weight: 760 !important;
  line-height: 1.12 !important;
  text-transform: none !important;
}

.panel-head span,
.time-form-head span,
.form-panel > span,
.closing-column-panel > span {
  color: var(--muted) !important;
  font-size: var(--calm-body) !important;
  font-weight: 520 !important;
  line-height: 1.35 !important;
  text-transform: none !important;
}

.meeting-form-fields,
.time-form-fields,
.coordination-form {
  gap: 12px !important;
}

.meeting-form-fields,
.time-form-fields {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

#reportsView .time-form-fields {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.form-panel label,
.coordination-form label,
.money-form label,
.project-form-split label {
  min-width: 0 !important;
  color: var(--muted) !important;
  font-size: var(--calm-label) !important;
  font-weight: 760 !important;
  line-height: 1.25 !important;
  text-transform: uppercase !important;
}

.form-panel :is(input, select, textarea),
.coordination-form :is(input, select, textarea),
.money-form :is(input, select, textarea),
.project-form-split :is(input, select, textarea) {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: var(--calm-form-height) !important;
  border-radius: var(--calm-radius-field) !important;
  font-size: var(--calm-body) !important;
  font-weight: 620 !important;
  line-height: 1.25 !important;
}

#reportsView .time-form-note-row,
#meetingsView .meeting-form-note-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: end !important;
}

#reportsView .time-form-note-row textarea,
#meetingsView .meeting-form-note-row textarea {
  height: 168px !important;
  min-height: 168px !important;
  max-height: 168px !important;
  resize: none !important;
}

#reportsView .time-form-actions,
#meetingsView .meeting-form-actions {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-auto-rows: var(--calm-button-height) !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  overflow: visible !important;
}

#reportsView .time-form-actions button,
#meetingsView .meeting-form-actions button,
#timeSubmit,
#meetingSubmit,
#cancelTimeEdit,
#cancelMeetingEdit {
  width: 100% !important;
  height: var(--calm-button-height) !important;
  min-height: var(--calm-button-height) !important;
  max-height: var(--calm-button-height) !important;
  padding: 0 16px !important;
  border-radius: var(--system-pill-radius) !important;
  font-size: var(--type-action) !important;
  line-height: 1 !important;
  transform: none !important;
}

#reportsView .time-form-actions .hidden,
#meetingsView .meeting-form-actions .hidden {
  display: none !important;
}

#dashboardView .daily-panel,
#coordinationView .coordination-control-panel,
#coordinationView .coordination-status-panel,
#coordinationView .coordination-timeline-panel,
#closingView .closing-column-panel,
#meetingsView .meeting-calendar-panel,
#meetingsView .meeting-list-panel,
#reportsView .time-self-entries-panel {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

#dashboardView .daily-list,
#meetingsView .meeting-list,
#reportsView .time-entry-list,
#coordinationView .coordination-context-grid,
#coordinationView .coordination-timeline,
#closingView .time-people-list {
  display: grid !important;
  gap: 10px !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 3px !important;
}

#dashboardView :is(.daily-meeting-item, .daily-coordination-item, .task-row),
#meetingsView .meeting-list-panel .daily-meeting-item,
.meeting-detail-card,
.time-entry-item,
.money-item,
.coordination-context-card,
.coordination-timeline-item,
.coordination-item,
.time-person-card,
.team-row {
  box-sizing: border-box !important;
  min-width: 0 !important;
  min-height: var(--calm-card-height) !important;
  border-radius: var(--calm-radius-card) !important;
  padding: 12px 16px !important;
  gap: 10px !important;
}

#dashboardView :is(.daily-meeting-item, .daily-coordination-item),
#meetingsView .meeting-list-panel .daily-meeting-item,
.meeting-detail-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
}

#dashboardView .daily-meeting-item,
#meetingsView .meeting-list-panel .daily-meeting-item {
  grid-template-columns: minmax(0, 1fr) !important;
}

#dashboardView :is(.daily-meeting-item, .daily-coordination-item) .daily-main,
#meetingsView .meeting-list-panel .daily-meeting-item .daily-main,
.meeting-detail-main,
#dashboardView .task-main {
  display: grid !important;
  min-width: 0 !important;
  gap: 6px !important;
  align-content: center !important;
}

#dashboardView :is(.daily-meeting-item, .daily-coordination-item) .daily-main strong,
#meetingsView .meeting-list-panel .daily-meeting-item .daily-main strong,
.meeting-detail-main strong,
#dashboardView .task-main strong,
.coordination-context-card strong,
.coordination-timeline-item strong,
.coordination-item strong {
  min-width: 0 !important;
  color: var(--ink) !important;
  font-size: var(--calm-card-title) !important;
  font-weight: 760 !important;
  line-height: 1.18 !important;
  text-transform: none !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#dashboardView :is(.daily-meeting-item, .daily-coordination-item) .daily-main small,
#meetingsView .meeting-list-panel .daily-meeting-item .daily-main small,
.meeting-detail-main span,
.meeting-detail-main small,
#dashboardView .task-main small,
.coordination-context-card small,
.coordination-context-card em,
.coordination-timeline-item span,
.coordination-timeline-item small,
.coordination-item small {
  min-width: 0 !important;
  color: var(--muted) !important;
  font-size: var(--calm-body) !important;
  font-weight: 520 !important;
  line-height: 1.32 !important;
  text-transform: none !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  white-space: normal !important;
}

.inline-action,
.ghost-action,
.danger-action,
.row-actions button,
.meeting-actions button,
.coordination-form-actions button,
.project-column-list button,
.status-cell button {
  box-sizing: border-box !important;
  min-height: 38px !important;
  border-radius: var(--system-pill-radius) !important;
  font-size: var(--type-action) !important;
  font-weight: 720 !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

.meeting-participants-field {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  border: 1px solid var(--calm-border) !important;
  border-radius: var(--calm-radius-field) !important;
  background: var(--calm-field) !important;
  overflow: hidden !important;
}

.meeting-participants-field > summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  min-height: var(--calm-form-height) !important;
  padding: 0 14px !important;
  cursor: pointer !important;
}

.meeting-participants-field > summary span {
  color: var(--ink) !important;
  font-size: var(--calm-body) !important;
  font-weight: 720 !important;
  text-transform: none !important;
}

.meeting-participants-field > summary em {
  min-width: 0 !important;
  color: var(--muted) !important;
  font-size: var(--calm-body) !important;
  font-style: normal !important;
  font-weight: 620 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.meeting-participants-field[open] {
  padding-bottom: 12px !important;
}

.meeting-participants-field[open] > :not(summary) {
  margin-left: 14px !important;
  margin-right: 14px !important;
}

.person-chip-list,
.meeting-participant-list {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
}

.person-chip-list label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  min-height: 38px !important;
  padding: 5px 12px !important;
  border-radius: var(--system-pill-radius) !important;
  font-size: var(--calm-body) !important;
  font-weight: 680 !important;
  text-transform: none !important;
  white-space: nowrap !important;
}

.person-chip-list input[type="checkbox"],
.comment-check,
.coordination-check {
  box-sizing: border-box !important;
  flex: 0 0 28px !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  max-width: 28px !important;
  max-height: 28px !important;
  border-radius: 50% !important;
  aspect-ratio: 1 / 1 !important;
}

.hint-dot {
  box-sizing: border-box !important;
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 24px !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  max-width: 24px !important;
  max-height: 24px !important;
  border-radius: 50% !important;
  font-size: 11px !important;
  line-height: 1 !important;
  padding: 0 !important;
}

.performance-metrics,
.performance-metrics-public,
.archive-result-grid {
  display: grid !important;
  gap: 10px !important;
}

.performance-metrics .metric-hint-item,
.performance-metrics-public .metric-hint-item,
.archive-result-grid .archive-result-pill {
  box-sizing: border-box !important;
  min-width: 0 !important;
  min-height: var(--calm-form-height) !important;
  border-radius: var(--calm-radius-field) !important;
  padding: 0 14px !important;
  align-items: center !important;
}

#projectsView .status-cell .project-column-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  align-content: start !important;
}

#projectsView .status-cell .project-column-list > .status,
#projectsView .status-cell .project-column-list > .pin-action,
#projectsView .status-cell .project-column-list > .coordination-phase-action,
#projectsView .status-cell .project-column-list > .project-detail-action,
#projectsView .status-cell .project-column-list > .inline-action,
#projectsView .status-cell .project-column-list .row-actions,
#projectsView .status-cell .project-column-list .row-actions button {
  width: 100% !important;
  max-width: 100% !important;
}

#projectsView .status-cell .project-column-list .row-actions {
  display: contents !important;
}

#projectsView .status-cell .status {
  justify-content: center !important;
}

#projectsView .project-meta-block h3,
#archiveView .project-meta-block h3,
.project-meta-block strong,
.project-meta-block span {
  font-size: var(--calm-body) !important;
  line-height: 1.32 !important;
}

#archiveView .archive-outcome-wrap {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 10px !important;
  align-content: start !important;
}

#archiveView .archive-result-grid {
  grid-template-columns: minmax(0, 1fr) !important;
}

#archiveView .archive-result-grid .archive-result-pill {
  width: 100% !important;
  max-width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
}

#projectsView .table-wrap,
#archiveView .table-wrap,
#closingView .table-wrap {
  max-width: 100% !important;
  overflow-x: auto !important;
}

#projectsView table,
#archiveView table {
  width: 100% !important;
  table-layout: fixed !important;
}

#projectsView th,
#projectsView td,
#archiveView th,
#archiveView td {
  min-width: 0 !important;
  overflow: hidden !important;
}

#coordinationView .coordination-context-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-content: start !important;
}

#coordinationView .coordination-context-card {
  display: grid !important;
  grid-template-rows: auto auto auto auto auto !important;
  min-height: 104px !important;
  padding: 12px !important;
  gap: 6px !important;
  text-align: left !important;
}

#coordinationView .coordination-card-number {
  justify-self: start !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 36px !important;
  height: 24px !important;
  padding: 0 10px !important;
  border-radius: var(--system-pill-radius) !important;
  font-size: var(--calm-meta) !important;
  font-weight: 720 !important;
}

#coordinationView .coordination-progress-card {
  display: grid !important;
  gap: 14px !important;
  min-width: 0 !important;
}

#coordinationView .coordination-list-panel,
#coordinationView .coordination-form-panel,
#coordinationView .coordination-archive-panel {
  grid-column: 1 / -1 !important;
}

#closingView .closing-column-panel h2 {
  font-size: var(--calm-title) !important;
}

#closingView .closing-column-panel {
  min-width: 0 !important;
}

@media (max-width: 1480px) {
  #projectsView table,
  #archiveView table {
    min-width: 1120px !important;
  }
}

@media (max-width: 1280px) {
  #dashboardView .daily-dashboard,
  #reportsView .work-entry-layout,
  #meetingsView .meetings-layout,
  #coordinationView .coordination-page,
  #closingView .closing-overview-grid {
    grid-template-columns: 1fr !important;
  }

  #coordinationView .coordination-status-layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: var(--calm-page-gap) !important;
  }

  #coordinationView .coordination-list-panel,
  #coordinationView .coordination-form-panel,
  #coordinationView .coordination-archive-panel {
    grid-column: auto !important;
  }
}

@media (max-width: 820px) {
  :root {
    --calm-panel-pad: 18px;
    --calm-title: 20px;
    --calm-card-title: 14px;
    --calm-body: 13px;
  }

  .meeting-form-fields,
  .time-form-fields,
  #reportsView .time-form-fields,
  #coordinationView .coordination-context-grid {
    grid-template-columns: 1fr !important;
  }

  #dashboardView :is(.daily-coordination-item, .task-row),
  .meeting-detail-card {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .meeting-actions,
  .row-actions {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* Final fit for work/meeting forms: submit buttons stay inside the panel. */
#reportsView .time-form-note-row textarea,
#meetingsView .meeting-form-note-row textarea {
  height: 104px !important;
  min-height: 104px !important;
  max-height: 104px !important;
}

.calendar-field {
  position: relative !important;
}

.calendar-field .calendar-display-value {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 2 !important;
  display: flex !important;
  align-items: center !important;
  height: var(--calm-form-height) !important;
  padding: 0 14px !important;
  color: var(--ink) !important;
  font-size: var(--calm-body) !important;
  font-weight: 720 !important;
  line-height: 1 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.form-panel input.calendar-display-input,
.coordination-form input.calendar-display-input,
.project-form-split input.calendar-display-input {
  color: transparent !important;
  text-shadow: none !important;
  caret-color: transparent !important;
}

/* Calm table pass: keep project/archive columns inside their cells. */
#projectsView .table-wrap,
#archiveView .table-wrap {
  overflow-x: auto;
}

#projectsView table,
#archiveView table {
  width: 100%;
  min-width: 1180px;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0 10px;
}

#projectsView th:nth-child(1),
#projectsView td:nth-child(1) {
  width: 30%;
}

#projectsView th:nth-child(2),
#projectsView td:nth-child(2) {
  width: 50%;
}

#projectsView th:nth-child(3),
#projectsView td:nth-child(3) {
  width: 20%;
}

#archiveView th:nth-child(1),
#archiveView td:nth-child(1) {
  width: 30%;
}

#archiveView th:nth-child(2),
#archiveView td:nth-child(2) {
  width: 48%;
}

#archiveView th:nth-child(3),
#archiveView td:nth-child(3) {
  width: 22%;
}

#projectsView td,
#archiveView td {
  vertical-align: top;
  min-width: 0;
}

#projectsView .project-main-cell,
#archiveView .project-main-cell,
#projectsView .project-performance-cell,
#archiveView .project-performance-cell,
#projectsView .status-cell,
#archiveView .archive-results-cell {
  min-width: 0;
  overflow: hidden;
}

#projectsView .project-performance,
#archiveView .project-performance {
  min-width: 0;
}

#projectsView .performance-metrics-public,
#projectsView .performance-metrics,
#archiveView .performance-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

#projectsView .performance-metrics-public .metric-hint-item,
#projectsView .performance-metrics .metric-hint-item,
#archiveView .performance-metrics .metric-hint-item {
  min-width: 0;
  overflow: hidden;
}

#projectsView .status-cell .project-column-list {
  width: 100%;
  min-width: 0;
  justify-items: stretch;
}

#projectsView .status-cell .project-column-list > .status,
#projectsView .status-cell .project-column-list > .pin-action,
#projectsView .status-cell .project-column-list > .coordination-phase-action,
#projectsView .status-cell .project-column-list > .project-detail-action,
#projectsView .status-cell .project-column-list > .inline-action,
#projectsView .status-cell .project-column-list .row-actions,
#projectsView .status-cell .project-column-list .row-actions button {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

#projectsView .status-cell .project-column-list .row-actions {
  display: contents !important;
}

#archiveView .archive-outcome-wrap {
  width: 100%;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) !important;
}

#archiveView .archive-right-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

#archiveView .archive-right-actions > *,
#archiveView .archive-detail-action {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

#archiveView .archive-result-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 8px !important;
  min-width: 0;
  width: 100%;
}

#archiveView .archive-result-grid .archive-result-pill {
  display: flex !important;
  justify-content: space-between;
  gap: 8px;
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto;
  min-height: 34px !important;
  padding: 7px 10px !important;
}

#archiveView .archive-result-grid .archive-result-pill span,
#archiveView .archive-result-grid .archive-result-pill strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#archiveView .archive-result-grid .archive-result-pill strong {
  text-align: right;
}

#projectsView .timeline-dot,
#archiveView .timeline-dot {
  transform: translateX(-50%);
}

/* Nearest meetings mirror the compact meeting cards in the dashboard. */
#meetingsView .meeting-list-panel .meeting-list {
  gap: 10px;
}

#meetingsView .meeting-list-panel .daily-meeting-item {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: center;
  min-height: 58px;
  padding: 8px 10px;
  gap: 10px;
  border: 1px solid rgba(247, 244, 236, 0.09);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
}

#meetingsView .meeting-list-panel .daily-meeting-item:hover,
#meetingsView .meeting-list-panel .daily-meeting-item.is-selected {
  border-color: rgba(246, 243, 234, 0.22);
  background: rgba(255, 255, 255, 0.065);
}

#meetingsView .meeting-list-panel .daily-meeting-item .daily-main {
  display: grid;
  width: 100%;
  align-content: center;
  justify-content: stretch;
  justify-items: start;
  min-width: 0;
  min-height: 36px;
  gap: 3px;
  text-align: left;
}

#meetingsView .meeting-list-panel .daily-meeting-item .daily-main strong {
  display: -webkit-box;
  width: 100%;
  overflow: hidden;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 780;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: normal;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

#meetingsView .meeting-list-panel .daily-meeting-item .daily-main small {
  display: -webkit-box;
  width: 100%;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: normal;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

#meetingsView .meeting-list-panel .daily-meeting-item .meeting-actions {
  display: none !important;
}

/* System cascade lock: final repeated rules after all section-specific patches. */
.app-shell,
.app-shell * {
  letter-spacing: 0 !important;
}

:is(.view-title-group h1, #viewTitle, .time-top-summary strong) {
  font-family: var(--font-display);
  font-size: var(--type-page-title) !important;
  font-weight: 780;
  line-height: var(--leading-tight);
}

:is(.panel-head h2, .form-panel h2, .closing-column-panel h2, .meeting-detail-panel .panel-head h2) {
  font-family: var(--font-display);
  font-size: var(--type-section-title) !important;
  font-weight: 780;
  line-height: var(--leading-title);
}

:is(.daily-main strong, .time-entry-item strong, .money-item strong, .coordination-title-row strong, .coordination-timeline-item strong, .meeting-detail-main strong, .project-title-row strong, .project-phase-row-title strong) {
  font-family: var(--font-display);
  font-size: var(--type-card-title) !important;
  font-weight: 780;
  line-height: var(--leading-title);
}

:is(.daily-main small, .time-entry-item span, .money-main span, .coordination-item small, .coordination-timeline-item small, .meeting-detail-main span, .meeting-detail-main small, .project-meta-block span, .project-meta-block b, .project-phase-row-title span, .project-phase-row-title em) {
  font-size: var(--type-caption) !important;
  line-height: var(--leading-body);
}

:is(.daily-item, .time-entry-item, .money-item, .coordination-item, .coordination-timeline-item, .meeting-card, .meeting-detail-card, .time-person-card, .team-row, .metric-hint-item, .project-phase-row, .month-chip, .status) {
  border-radius: var(--system-row-radius);
}

:is(.primary-action, .secondary-action, .ghost-action, .inline-action, .row-actions button, .meeting-actions button, .time-entry-actions button) {
  min-height: var(--system-action-height);
  border-radius: var(--system-pill-radius);
  font-family: var(--font-display);
  font-size: var(--type-action) !important;
  font-weight: 760;
  line-height: 1.1;
}

#dashboardView .daily-meeting-item,
#meetingsView .meeting-list-panel .daily-meeting-item {
  box-sizing: border-box;
  height: 66px;
  min-height: 66px;
  max-height: 66px;
  padding: 8px 10px !important;
  overflow: hidden;
}

#dashboardView .daily-meeting-item .daily-main strong,
#meetingsView .meeting-list-panel .daily-meeting-item .daily-main strong {
  font-size: var(--type-card-title) !important;
  line-height: var(--leading-title);
}

#dashboardView .daily-meeting-item .daily-main small,
#meetingsView .meeting-list-panel .daily-meeting-item .daily-main small {
  font-size: 11px !important;
  line-height: 1.2;
}

.hint-dot {
  display: inline-grid;
  flex: 0 0 26px;
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
  place-items: center;
  border-radius: 50% !important;
  font-size: 12px !important;
  line-height: 1;
}

/* Dashboard card component lock: meetings and coordination are one repeated card. */
#dashboardView :is(.daily-meeting-item, .daily-coordination-item),
#meetingsView .meeting-list-panel .daily-meeting-item {
  box-sizing: border-box;
  width: 100%;
  min-height: 82px !important;
  height: 82px !important;
  max-height: 82px !important;
  padding: 12px 16px !important;
  align-items: center;
  overflow: hidden;
  border-radius: var(--system-row-radius) !important;
}

#dashboardView .daily-meeting-item,
#meetingsView .meeting-list-panel .daily-meeting-item {
  grid-template-columns: minmax(0, 1fr) !important;
}

#dashboardView .daily-coordination-item {
  grid-template-columns: minmax(0, 1fr) 104px !important;
}

#dashboardView :is(.daily-meeting-item, .daily-coordination-item) .daily-main,
#meetingsView .meeting-list-panel .daily-meeting-item .daily-main {
  display: grid;
  align-content: center;
  min-width: 0;
  min-height: 0;
  gap: 4px;
}

#dashboardView :is(.daily-meeting-item, .daily-coordination-item) .daily-main strong,
#dashboardView .task-main strong,
#meetingsView .meeting-list-panel .daily-meeting-item .daily-main strong {
  display: -webkit-box;
  width: 100%;
  overflow: hidden;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--type-card-title) !important;
  font-weight: 780;
  line-height: var(--leading-title) !important;
  text-overflow: ellipsis;
  text-transform: none !important;
  white-space: normal !important;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

#dashboardView :is(.daily-meeting-item, .daily-coordination-item) .daily-main small,
#dashboardView .task-main small,
#meetingsView .meeting-list-panel .daily-meeting-item .daily-main small {
  display: -webkit-box !important;
  width: 100%;
  overflow: hidden;
  color: var(--muted);
  font-size: var(--type-caption) !important;
  line-height: 1.28 !important;
  text-overflow: ellipsis;
  white-space: normal !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Meeting form: notes and actions use the full form width, like work entry. */
#meetingsView .meeting-form-note-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 8px !important;
}

#meetingsView .meeting-form-note-row > label {
  display: grid !important;
  min-width: 0;
}

#meetingsView .meeting-form-note-row textarea {
  width: 100%;
  height: 128px !important;
  min-height: 128px !important;
  max-height: 128px !important;
  resize: none !important;
  box-sizing: border-box;
}

#meetingsView .meeting-form-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-rows: var(--control-height) !important;
  grid-template-rows: none !important;
  align-self: start !important;
  gap: 8px !important;
  height: auto;
  max-height: calc((var(--control-height) * 2) + 8px) !important;
  min-width: 0;
  overflow: hidden !important;
}

#meetingsView .meeting-form-actions:has(.ghost-action.hidden) {
  max-height: var(--control-height) !important;
}

#meetingsView .meeting-form-actions button,
#meetingsView #meetingSubmit,
#meetingsView #cancelMeetingEdit {
  display: grid !important;
  width: 100% !important;
  height: var(--control-height) !important;
  min-height: var(--control-height) !important;
  max-height: var(--control-height) !important;
  flex: 0 0 var(--control-height) !important;
  padding: 0 14px !important;
  place-items: center;
  border-radius: var(--system-pill-radius) !important;
  text-align: center;
  white-space: normal;
  line-height: 1.1 !important;
  transform: none !important;
}

#meetingsView .meeting-form-actions:has(.ghost-action.hidden) button {
  height: var(--control-height) !important;
  min-height: var(--control-height) !important;
  max-height: var(--control-height) !important;
}

#meetingsView .meeting-form-actions .hidden {
  display: none !important;
}

@media (max-width: 980px) {
  #meetingsView .meeting-form-note-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #meetingsView .meeting-form-actions {
    height: auto;
  }

  #meetingsView .meeting-form-actions button {
    min-height: var(--control-height) !important;
  }
}

/* Calm system pass: one visual rhythm for repeated UI parts. */
:root {
  --font-ui: "Inter", "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", sans-serif;
  --font-display: "Manrope", var(--font-ui);
  --font-number: var(--font-ui);
  --type-page-title: clamp(24px, 1.55vw, 30px);
  --type-section-title: 22px;
  --type-card-title: 15px;
  --type-body: 14px;
  --type-caption: 12px;
  --type-label: 11px;
  --leading-tight: 1.08;
  --leading-title: 1.18;
  --leading-body: 1.35;
  --system-panel-radius: 22px;
  --system-row-radius: 22px;
  --system-field-radius: 16px;
  --system-pill-radius: 999px;
  --system-field-height: 42px;
  --system-action-height: 40px;
  --system-card-min: 82px;
  --system-gap: 18px;
  --system-gap-sm: 10px;
  --system-gap-xs: 6px;
  --system-panel-pad: 24px;
  --system-row-pad-y: 12px;
  --system-row-pad-x: 16px;
  --calm-panel: rgba(33, 33, 38, 0.88);
  --calm-row: rgba(255, 255, 255, 0.045);
  --calm-row-hover: rgba(255, 255, 255, 0.07);
  --calm-field: rgba(255, 255, 255, 0.055);
  --calm-border: rgba(247, 244, 236, 0.12);
  --calm-border-strong: rgba(247, 244, 236, 0.2);
}

.app-shell,
.app-shell * {
  letter-spacing: 0 !important;
}

body,
button,
input,
select,
textarea {
  font-family: var(--font-ui) !important;
  font-size: var(--type-body);
  line-height: var(--leading-body);
}

.view-title-group {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.view-title-group h1,
#viewTitle,
.time-top-summary strong {
  margin: 0;
  font-family: var(--font-display) !important;
  font-size: var(--type-page-title) !important;
  font-weight: 780 !important;
  line-height: var(--leading-tight) !important;
}

.panel-head h2,
.form-panel h2,
.closing-column-panel h2,
.meeting-detail-panel .panel-head h2,
.coordination-control-panel .panel-head h2,
.coordination-status-panel .panel-head h2,
.coordination-timeline-panel .panel-head h2 {
  margin: 0;
  font-family: var(--font-display) !important;
  font-size: var(--type-section-title) !important;
  font-weight: 780 !important;
  line-height: var(--leading-title) !important;
}

.panel-head span,
.form-section-head span,
.field-note,
.form-note,
.empty,
.meeting-detail-main span,
.meeting-detail-main small,
.meeting-detail-main p,
.coordination-timeline-item span,
.coordination-timeline-item small,
.coordination-item small,
.project-meta-block span,
.project-meta-block b,
.project-phase-row-title span,
.project-phase-row-title em,
.time-entry-item span,
.daily-main small {
  color: var(--muted);
  font-size: var(--type-caption) !important;
  line-height: var(--leading-body) !important;
}

label,
.form-section-head h3,
.finance-filter-fields label,
.money-form label,
.team-row label,
table th {
  color: var(--muted);
  font-family: var(--font-ui) !important;
  font-size: var(--type-label) !important;
  font-weight: 740 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
}

.daily-main strong,
.task-main strong,
.time-entry-item strong,
.money-item strong,
.coordination-timeline-item strong,
.meeting-detail-main strong,
.project-title-row strong,
.project-phase-row-title strong,
.time-person-card strong,
.coordination-context-card strong {
  min-width: 0;
  color: var(--ink);
  font-family: var(--font-display) !important;
  font-size: var(--type-card-title) !important;
  font-weight: 780 !important;
  line-height: var(--leading-title) !important;
  text-transform: none !important;
}

.panel,
.form-panel,
.daily-panel,
.meeting-calendar-panel,
.meeting-detail-panel,
.coordination-control-panel,
.coordination-status-panel,
.coordination-timeline-panel,
.coordination-form-panel,
.coordination-list-panel,
.coordination-archive-panel,
.closing-column-panel,
.finance-extra-panel,
.owner-balance-panel,
.table-wrap {
  border: 1px solid var(--calm-border);
  border-radius: var(--system-panel-radius) !important;
  background: var(--calm-panel);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.035), 0 22px 54px rgba(0, 0, 0, 0.2);
}

.panel,
.form-panel,
.daily-panel,
.meeting-calendar-panel,
.meeting-detail-panel,
.coordination-control-panel,
.coordination-status-panel,
.coordination-timeline-panel,
.coordination-form-panel,
.coordination-list-panel,
.coordination-archive-panel,
.closing-column-panel,
.finance-extra-panel,
.owner-balance-panel {
  padding: var(--system-panel-pad);
}

.panel-head,
.form-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 0;
  margin: 0 0 16px;
  padding: 0 0 12px;
  border-bottom: 1px solid rgba(247, 244, 236, 0.08);
}

.panel-head > div,
.form-section-head > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  width: 100%;
  min-height: var(--system-field-height) !important;
  border: 1px solid var(--calm-border) !important;
  border-radius: var(--system-field-radius) !important;
  background: var(--calm-field) !important;
  color: var(--ink) !important;
  font-family: var(--font-ui) !important;
  font-size: var(--type-body) !important;
  font-weight: 650 !important;
  line-height: var(--leading-body) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

input:not([type="checkbox"]):not([type="radio"]),
select {
  height: var(--system-field-height) !important;
  padding: 0 16px !important;
}

textarea {
  padding: 13px 16px !important;
  resize: vertical;
}

input::placeholder,
textarea::placeholder {
  color: rgba(245, 245, 247, 0.42) !important;
  font-weight: 620;
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(94, 168, 255, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(94, 168, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

button,
.primary-action,
.ghost-action,
.inline-action,
.row-actions button,
.meeting-actions button,
.time-entry-actions button,
.small-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--system-action-height) !important;
  border-radius: var(--system-pill-radius) !important;
  font-family: var(--font-display) !important;
  font-size: var(--type-action, 13px) !important;
  font-weight: 760 !important;
  line-height: 1.1 !important;
  text-align: center;
  white-space: normal;
}

.primary-action {
  min-height: var(--system-field-height) !important;
}

.nav-item {
  min-height: 36px !important;
  border-radius: var(--system-pill-radius) !important;
  font-size: 14px !important;
  line-height: 1.1 !important;
}

.form-panel,
.money-form,
.coordination-form,
.dashboard-task-form,
#financeForm {
  gap: var(--system-gap-sm);
}

.form-panel label,
.money-form label,
.coordination-form label,
.dashboard-task-form label,
#financeForm label {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
}

.meeting-form-fields,
.time-form-fields,
.project-form-finance-grid,
.project-form-split,
.project-form-pair,
.form-row,
.finance-filter-fields,
.money-form,
.coordination-form,
.dashboard-task-form {
  gap: 14px !important;
}

#reportsView .time-form-note-row,
#meetingsView .meeting-form-note-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: start !important;
}

#reportsView .time-form-note-row > label,
#meetingsView .meeting-form-note-row > label {
  display: grid !important;
  gap: 8px !important;
  min-width: 0;
}

#reportsView .time-form-note-row textarea,
#meetingsView .meeting-form-note-row textarea {
  height: 148px !important;
  min-height: 148px !important;
  max-height: 148px !important;
  resize: none !important;
}

#reportsView .time-form-actions,
#meetingsView .meeting-form-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-rows: var(--system-field-height) !important;
  gap: 8px !important;
  height: auto !important;
  max-height: none !important;
  min-width: 0;
  overflow: visible !important;
}

#reportsView .time-form-actions button,
#meetingsView .meeting-form-actions button,
#reportsView #timeSubmit,
#meetingsView #meetingSubmit,
#meetingsView #cancelMeetingEdit {
  width: 100% !important;
  height: var(--system-field-height) !important;
  min-height: var(--system-field-height) !important;
  max-height: var(--system-field-height) !important;
  padding: 0 14px !important;
  border-radius: var(--system-pill-radius) !important;
  transform: none !important;
}

#reportsView .time-form-actions .hidden,
#meetingsView .meeting-form-actions .hidden {
  display: none !important;
}

.daily-item,
.task-row,
.time-entry-item,
.money-item,
.coordination-item,
.coordination-timeline-item,
.coordination-context-card,
.meeting-detail-card,
.time-person-card,
.team-row,
.metric-hint-item,
.project-phase-row,
.month-chip,
.status {
  border: 1px solid var(--calm-border) !important;
  border-radius: var(--system-row-radius) !important;
  background: var(--calm-row) !important;
}

.daily-item:hover,
.task-row:hover,
.time-entry-item:hover,
.money-item:hover,
.coordination-item:hover,
.coordination-timeline-item:hover,
.coordination-context-card:hover,
.meeting-detail-card:hover,
.time-person-card:hover,
.team-row:hover,
.metric-hint-item:hover {
  border-color: var(--calm-border-strong) !important;
  background: var(--calm-row-hover) !important;
}

#dashboardView :is(.daily-meeting-item, .daily-coordination-item, .task-row),
#meetingsView .meeting-list-panel .daily-meeting-item,
#meetingsView .meeting-detail-card,
#coordinationView .coordination-timeline-item,
#coordinationView .coordination-item {
  box-sizing: border-box;
  min-height: var(--system-card-min) !important;
  height: auto !important;
  max-height: none !important;
  padding: var(--system-row-pad-y) var(--system-row-pad-x) !important;
  overflow: hidden;
}

#dashboardView :is(.daily-meeting-item, .daily-coordination-item) .daily-main,
#meetingsView .meeting-list-panel .daily-meeting-item .daily-main,
#dashboardView .task-main,
.coordination-timeline-item,
.meeting-detail-main,
.project-title-row,
.project-phase-row-title {
  display: grid;
  align-content: center;
  min-width: 0;
  gap: 4px;
}

#dashboardView :is(.daily-meeting-item, .daily-coordination-item) .daily-main strong,
#meetingsView .meeting-list-panel .daily-meeting-item .daily-main strong,
#dashboardView .task-main strong,
.coordination-timeline-item strong,
.meeting-detail-main strong {
  display: -webkit-box !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

#dashboardView :is(.daily-meeting-item, .daily-coordination-item) .daily-main small,
#meetingsView .meeting-list-panel .daily-meeting-item .daily-main small,
#dashboardView .task-main small,
.coordination-item small,
.coordination-timeline-item small,
.meeting-detail-main span,
.meeting-detail-main small {
  display: -webkit-box !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

#dashboardView .daily-dashboard,
#meetingsView .meetings-layout,
#reportsView .work-entry-layout,
#coordinationView .coordination-page,
#closingView .closing-overview-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch;
  gap: var(--system-gap) !important;
}

#coordinationView .coordination-status-layout {
  display: contents !important;
}

#meetingsView .meetings-layout > *,
#reportsView .work-entry-layout > *,
#dashboardView .daily-panel,
#coordinationView .coordination-control-panel,
#coordinationView .coordination-status-panel,
#coordinationView .coordination-timeline-panel,
#closingView .closing-column-panel {
  min-width: 0;
}

#dashboardView .daily-list,
#meetingsView .meeting-list,
#meetingsView .meeting-detail-list,
#coordinationView .coordination-context-grid,
#coordinationView .coordination-timeline,
#coordinationView .coordination-list,
#reportsView .time-entry-list,
#financeView .money-list,
#closingView .time-people-list {
  display: grid;
  gap: 10px;
}

#dashboardView .daily-panel,
#coordinationView .coordination-control-panel,
#coordinationView .coordination-status-panel,
#coordinationView .coordination-timeline-panel {
  min-height: clamp(480px, calc(100vh - 196px), 720px);
  overflow: hidden;
}

#dashboardView .daily-list,
#coordinationView .coordination-context-grid,
#coordinationView .coordination-timeline {
  min-height: 0;
  overflow: auto;
  padding-right: 3px;
}

#coordinationView .coordination-context-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-content: start;
}

#coordinationView .coordination-context-card {
  display: grid;
  min-height: 104px !important;
  padding: 12px !important;
  gap: 7px;
}

#coordinationView .coordination-card-number,
#coordinationView .coordination-context-card strong,
#coordinationView .coordination-context-card small,
#coordinationView .coordination-context-card em,
#coordinationView .coordination-timeline-item strong,
#coordinationView .coordination-timeline-item span,
#coordinationView .coordination-timeline-item small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.person-chip-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.person-chip-list label {
  display: inline-flex !important;
  align-items: center;
  gap: 9px;
  min-height: var(--system-field-height);
  padding: 6px 12px;
  border: 1px solid var(--calm-border);
  border-radius: var(--system-pill-radius);
  background: var(--calm-field);
  color: var(--ink);
  font-size: var(--type-body) !important;
  font-weight: 650 !important;
  text-transform: none !important;
}

.person-chip-list input[type="checkbox"],
.coordination-check {
  flex: 0 0 28px !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  border-radius: 50% !important;
}

.hint-dot {
  display: inline-grid !important;
  flex: 0 0 24px !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  place-items: center;
  border-radius: 50% !important;
  font-size: 11px !important;
  line-height: 1 !important;
}

.performance-metrics,
.performance-metrics-public,
.archive-result-grid {
  gap: 10px !important;
}

.performance-metrics .metric-hint-item,
.performance-metrics-public .metric-hint-item,
.archive-result-grid .archive-result-pill {
  min-height: var(--system-field-height);
  padding: 0 14px !important;
  align-items: center;
}

#projectsView .status-cell .project-column-list,
#archiveView .archive-outcome-wrap {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-content: start;
  gap: 8px !important;
}

#projectsView .status-cell .project-column-list > .status,
#archiveView .archive-outcome-wrap > .archive-state-label,
#archiveView .archive-outcome-wrap > .archive-right-actions {
  grid-column: 1 / -1;
}

#projectsView .status-cell .project-column-list > .inline-action,
#projectsView .status-cell .project-column-list .row-actions button,
#archiveView .archive-outcome-wrap button {
  width: 100%;
  min-height: 38px !important;
}

#reportsView .time-entry-item {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 4px 12px !important;
  align-items: center;
  min-width: 0;
  padding: 12px 14px !important;
}

#reportsView .time-entry-item > span,
#reportsView .time-entry-item > strong {
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: normal;
}

#reportsView .time-entry-actions {
  grid-column: 2;
  grid-row: 1 / span 5;
  align-self: center;
}

#reportsView .time-entry-actions {
  display: grid;
  gap: 8px;
}

#financeView .money-item {
  min-height: 54px !important;
  padding: 9px 12px !important;
  align-items: center;
}

#financeView .money-header {
  color: var(--muted);
  font-size: var(--type-label);
  font-weight: 740;
}

table {
  font-size: var(--type-body);
}

table th {
  color: var(--muted);
}

table td {
  font-size: var(--type-body) !important;
  line-height: var(--leading-body);
}

.meeting-calendar-panel,
.hours-month-calendar {
  overflow: hidden;
}

.hours-calendar-grid {
  gap: 10px !important;
}

.meeting-calendar-day,
.hours-calendar-day {
  border-radius: var(--system-row-radius) !important;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(245, 245, 247, 0.24);
}

::-webkit-scrollbar-track {
  background: transparent;
}

@media (max-width: 1280px) {
  #dashboardView .daily-dashboard,
  #meetingsView .meetings-layout,
  #reportsView .work-entry-layout,
  #coordinationView .coordination-page,
  #closingView .closing-overview-grid {
    grid-template-columns: 1fr !important;
  }

  #coordinationView .coordination-status-layout {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: var(--system-gap);
  }

  #dashboardView .daily-panel,
  #coordinationView .coordination-control-panel,
  #coordinationView .coordination-status-panel,
  #coordinationView .coordination-timeline-panel {
    min-height: 0;
    max-height: none;
  }
}

@media (max-width: 760px) {
  :root {
    --type-page-title: 24px;
    --type-section-title: 20px;
    --type-card-title: 14px;
    --type-body: 13px;
    --system-panel-pad: 18px;
  }

  .panel-head {
    align-items: flex-start;
    flex-direction: column;
  }

  #coordinationView .coordination-context-grid,
  #projectsView .status-cell .project-column-list,
  #archiveView .archive-outcome-wrap {
    grid-template-columns: 1fr !important;
  }

  #meetingsView .meeting-detail-card {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #meetingsView .meeting-detail-card .meeting-actions {
    min-width: 0;
    justify-content: stretch;
  }

  #meetingsView .meeting-detail-card .meeting-actions button {
    flex: 1 1 0;
  }
}

/* True final override: keep the repeated UI rhythm last. */
:root {
  --final-card-height: 82px;
  --final-field-height: 42px;
  --final-panel-radius: 22px;
  --final-card-radius: 22px;
  --final-gap: 18px;
}

#dashboardView .daily-dashboard,
#reportsView .work-entry-layout,
#meetingsView .meetings-layout,
#coordinationView .coordination-page,
#closingView .closing-overview-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: var(--final-gap) !important;
  align-items: stretch !important;
}

#coordinationView .coordination-status-layout {
  display: contents !important;
}

#dashboardView :is(.daily-meeting-item, .daily-coordination-item, .task-row),
#meetingsView .meeting-list-panel .daily-meeting-item,
#reportsView .time-entry-item,
#coordinationView .coordination-context-card,
#coordinationView .coordination-timeline-item,
#coordinationView .coordination-item {
  min-width: 0 !important;
  min-height: var(--final-card-height) !important;
  height: auto !important;
  border-radius: var(--final-card-radius) !important;
  padding: 12px 16px !important;
}

#reportsView .time-form-note-row,
#meetingsView .meeting-form-note-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: end !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

#reportsView .time-form-note-row textarea,
#meetingsView .meeting-form-note-row textarea {
  height: 104px !important;
  min-height: 104px !important;
  max-height: 104px !important;
  resize: none !important;
}

#reportsView .time-form-actions,
#meetingsView .meeting-form-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-rows: var(--final-field-height) !important;
  gap: 8px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

#reportsView .time-form-actions button,
#meetingsView .meeting-form-actions button,
#reportsView #timeSubmit,
#meetingsView #meetingSubmit,
#reportsView #cancelTimeEdit,
#meetingsView #cancelMeetingEdit {
  width: 100% !important;
  height: var(--final-field-height) !important;
  min-height: var(--final-field-height) !important;
  max-height: var(--final-field-height) !important;
  padding: 0 14px !important;
  border-radius: var(--system-pill-radius) !important;
  transform: none !important;
}

#reportsView .time-form-actions .hidden,
#meetingsView .meeting-form-actions .hidden {
  display: none !important;
}

.calendar-field {
  position: relative !important;
}

.calendar-field .calendar-display-value {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 3 !important;
  display: flex !important;
  align-items: center !important;
  height: var(--final-field-height) !important;
  padding: 0 14px !important;
  color: var(--ink) !important;
  font-size: var(--type-body) !important;
  font-weight: 720 !important;
  line-height: 1 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

input.calendar-display-input {
  color: transparent !important;
  text-shadow: none !important;
  caret-color: transparent !important;
}

#dashboardView :is(.daily-meeting-item, .daily-coordination-item) .daily-main strong,
#meetingsView .meeting-list-panel .daily-meeting-item .daily-main strong,
#dashboardView .task-main strong,
#coordinationView .coordination-context-card strong,
#coordinationView .coordination-timeline-item strong,
#coordinationView .coordination-item strong {
  font-size: var(--type-card-title) !important;
  font-weight: 780 !important;
  line-height: 1.18 !important;
  text-transform: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#dashboardView :is(.daily-meeting-item, .daily-coordination-item) .daily-main small,
#meetingsView .meeting-list-panel .daily-meeting-item .daily-main small,
#dashboardView .task-main small,
#coordinationView .coordination-context-card small,
#coordinationView .coordination-context-card em,
#coordinationView .coordination-timeline-item span,
#coordinationView .coordination-timeline-item small,
#coordinationView .coordination-item small {
  font-size: var(--type-body) !important;
  font-weight: 520 !important;
  line-height: 1.32 !important;
  text-transform: none !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
}

#projectsView .status-cell .project-column-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  align-content: start !important;
}

#projectsView .status-cell .project-column-list > .status,
#projectsView .status-cell .project-column-list > .pin-action,
#projectsView .status-cell .project-column-list > .coordination-phase-action,
#projectsView .status-cell .project-column-list > .project-detail-action,
#projectsView .status-cell .project-column-list > .inline-action,
#projectsView .status-cell .project-column-list .row-actions,
#projectsView .status-cell .project-column-list .row-actions button {
  width: 100% !important;
  max-width: 100% !important;
}

#projectsView .status-cell .project-column-list .row-actions {
  display: contents !important;
}

.hint-dot,
.person-chip-list input[type="checkbox"],
.comment-check,
.coordination-check {
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}

@media (max-width: 1280px) {
  #dashboardView .daily-dashboard,
  #reportsView .work-entry-layout,
  #meetingsView .meetings-layout,
  #coordinationView .coordination-page,
  #closingView .closing-overview-grid {
    grid-template-columns: 1fr !important;
  }

  #coordinationView .coordination-status-layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: var(--final-gap) !important;
  }
}

#archiveView .archive-right-actions,
#archiveView .archive-outcome-wrap {
  align-items: start !important;
}

#archiveView .archive-detail-action,
#archiveView .archive-right-actions button {
  width: 100% !important;
  height: var(--final-field-height) !important;
  min-height: var(--final-field-height) !important;
  max-height: var(--final-field-height) !important;
  padding: 0 14px !important;
  align-self: start !important;
  border-radius: var(--system-pill-radius) !important;
}

#archiveView .archive-outcome-wrap {
  display: grid !important;
  gap: 8px !important;
}

#closingView #addTeamMember {
  max-width: 100% !important;
  justify-self: end !important;
}

#closingView #addTeamMember {
  grid-column: 2 !important;
  grid-row: 1 !important;
  width: auto !important;
  min-width: 112px !important;
  white-space: nowrap !important;
}

#coordinationView .coordination-timeline-item {
  min-height: 110px !important;
  padding: 14px 16px !important;
  align-content: start !important;
  gap: 6px !important;
}

#coordinationView .coordination-timeline-item span,
#coordinationView .coordination-timeline-item strong,
#coordinationView .coordination-timeline-item small {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#coordinationView .coordination-timeline-item strong {
  line-height: 1.22 !important;
}

#coordinationView .coordination-mini-timeline {
  margin-top: 5px !important;
  align-self: end !important;
}

/* Calm system 13: clean dashboard panels and task comments. */
#dashboardView .daily-panel .panel-head {
  border-bottom: 0 !important;
  box-shadow: none !important;
  padding-bottom: 0 !important;
  margin-bottom: 14px !important;
}

#dashboardView .dashboard-task-section-list {
  gap: 10px !important;
}

#dashboardView .dashboard-task-list .task-item {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  overflow: visible !important;
}

#dashboardView .dashboard-task-list .task-item:hover {
  border-color: transparent !important;
  background: transparent !important;
}

#dashboardView .dashboard-task-list .task-row {
  min-height: var(--calm-card-height) !important;
  border: 1px solid var(--calm-border) !important;
  border-radius: var(--calm-radius-card) !important;
  background: var(--calm-row) !important;
  padding: 12px 16px !important;
  box-shadow: none !important;
}

#dashboardView .dashboard-task-list .task-item.has-unread-comments .task-row {
  border-color: rgba(94, 168, 255, 0.48) !important;
  background: linear-gradient(135deg, rgba(94, 168, 255, 0.14), rgba(255, 255, 255, 0.035)) !important;
}

#dashboardView .dashboard-task-list .task-item.is-done .task-row {
  border-color: rgba(104, 151, 104, 0.45) !important;
  background: linear-gradient(135deg, rgba(104, 151, 104, 0.13), rgba(255, 255, 255, 0.035)) !important;
}

#dashboardView .dashboard-task-list .dashboard-task-comment-panel {
  width: 100% !important;
  margin-top: 10px !important;
  padding: 12px !important;
  border: 1px solid var(--calm-border) !important;
  border-radius: var(--calm-radius-card) !important;
  background: rgba(255, 255, 255, 0.035) !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

#dashboardView .task-comment-feed {
  gap: 8px !important;
}

#dashboardView .task-comment-message {
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 10px 12px !important;
  border-radius: calc(var(--calm-radius-card) - 8px) !important;
  background: rgba(255, 255, 255, 0.045) !important;
  box-sizing: border-box !important;
}

#dashboardView .task-comment-message .comment-check {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  margin: 1px 0 0 !important;
}

#dashboardView .dashboard-task-list .task-comment-message .task-comment-body {
  display: grid !important;
  width: 100% !important;
  min-width: 0 !important;
  gap: 5px !important;
}

#dashboardView .dashboard-task-list .task-comment-message .task-comment-meta {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 96px !important;
  align-items: baseline !important;
  gap: 12px !important;
  width: 100% !important;
  min-width: 0 !important;
}

#dashboardView .dashboard-task-list .task-comment-message time {
  justify-self: start !important;
  width: 96px !important;
  text-align: left !important;
  white-space: nowrap !important;
  color: var(--muted) !important;
}

#dashboardView .dashboard-task-list .task-comment-form {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 132px !important;
  align-items: stretch !important;
  gap: 12px !important;
  width: 100% !important;
  margin-top: 10px !important;
}

#dashboardView .dashboard-task-list .task-comment-form textarea,
#dashboardView .dashboard-task-list .task-comment-form button {
  height: 72px !important;
  min-height: 72px !important;
  max-height: 72px !important;
  box-sizing: border-box !important;
}

#dashboardView .dashboard-task-list .task-comment-form textarea {
  resize: none !important;
  padding: 18px 20px !important;
}

#dashboardView .dashboard-task-list .task-comment-form button {
  width: 100% !important;
  padding: 0 18px !important;
  border-radius: var(--system-pill-radius) !important;
  align-self: stretch !important;
}

@media (max-width: 760px) {
  #dashboardView .dashboard-task-list .task-comment-message {
    grid-template-columns: 28px minmax(0, 1fr) !important;
  }

  #dashboardView .dashboard-task-list .task-comment-message .task-comment-meta {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 2px !important;
  }

  #dashboardView .dashboard-task-list .task-comment-message time {
    width: auto !important;
  }

  #dashboardView .dashboard-task-list .task-comment-form {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #dashboardView .dashboard-task-list .task-comment-form button {
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
  }
}

/* Calm system 14: comment metadata reads from the left, not as floating dates. */
#dashboardView .dashboard-task-list .task-comment-message .task-comment-meta {
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 2px !important;
}

#dashboardView .dashboard-task-list .task-comment-message time {
  justify-self: start !important;
  width: auto !important;
  text-align: left !important;
  grid-row: 2 !important;
}

/* Calm system 15: opened tasks expand as one card, not a card inside a card. */
#dashboardView .dashboard-task-list .task-item.is-comment-open {
  border: 1px solid var(--calm-border) !important;
  border-radius: var(--calm-radius-card) !important;
  background: var(--calm-row) !important;
  padding: 12px !important;
  overflow: visible !important;
}

#dashboardView .dashboard-task-list .task-item.is-comment-open.has-unread-comments {
  border-color: rgba(94, 168, 255, 0.48) !important;
  background: linear-gradient(135deg, rgba(94, 168, 255, 0.12), rgba(255, 255, 255, 0.035)) !important;
}

#dashboardView .dashboard-task-list .task-item.is-comment-open.is-done {
  border-color: rgba(104, 151, 104, 0.45) !important;
  background: linear-gradient(135deg, rgba(104, 151, 104, 0.12), rgba(255, 255, 255, 0.035)) !important;
}

#dashboardView .dashboard-task-list .task-item.is-comment-open .task-row {
  border: 0 !important;
  border-radius: calc(var(--calm-radius-card) - 6px) !important;
  background: transparent !important;
  padding: 8px 8px 10px !important;
}

#dashboardView .dashboard-task-list .task-item.is-comment-open .dashboard-task-comment-panel {
  margin-top: 8px !important;
  padding: 0 8px 8px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

#dashboardView .dashboard-task-list .task-comment-form {
  grid-template-columns: minmax(0, 1fr) 102px !important;
  gap: 10px !important;
  align-items: stretch !important;
}

#dashboardView .dashboard-task-list .task-comment-form button {
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
}

#dashboardView .dashboard-task-list .task-comment-form button {
  min-width: 0 !important;
  padding: 0 12px !important;
}

/* Calm system 16: exact alignment of comment textarea and submit button. */
#dashboardView .dashboard-task-list .task-comment-form {
  align-items: start !important;
}

#dashboardView .dashboard-task-list .task-comment-form textarea,
#dashboardView .dashboard-task-list .task-comment-form button {
  align-self: start !important;
  margin: 0 !important;
}

/* Calm system 17: keep task content on the same x-axis when comments open. */
#dashboardView .dashboard-task-list .task-item.is-comment-open {
  padding: 0 !important;
}

#dashboardView .dashboard-task-list .task-item.is-comment-open .task-row {
  padding: 12px 16px !important;
}

#dashboardView .dashboard-task-list .task-item.is-comment-open .dashboard-task-comment-panel {
  margin-top: 0 !important;
  padding: 0 16px 16px !important;
}

/* Calm system 18: meeting calendar uses the same single-card shell as work calendar. */
#meetingsView .meeting-calendar-panel {
  display: grid !important;
  align-self: stretch !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  overflow: visible !important;
}

#meetingsView .meeting-calendar-panel > .hours-month-calendar,
#meetingsView .meeting-month-calendar {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  box-sizing: border-box !important;
}

#meetingsView .meeting-month-calendar .hours-calendar-head,
#meetingsView .meeting-month-calendar .hours-calendar-weekdays,
#meetingsView .meeting-month-calendar .hours-calendar-grid {
  width: 100% !important;
  min-width: 0 !important;
}

/* Calm system 19: work entry fields mirror the two-by-two rhythm of meetings. */
#reportsView .time-form-fields {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px 18px !important;
  align-items: end !important;
}

#reportsView .time-form-fields > label {
  min-width: 0 !important;
}

#reportsView .time-form-fields input,
#reportsView .time-form-fields select {
  width: 100% !important;
  min-width: 0 !important;
}

@media (max-width: 760px) {
  #reportsView .time-form-fields {
    grid-template-columns: 1fr !important;
  }
}

/* Calm system 20: remove header divider lines in Work and Meetings. */
#reportsView .panel-head,
#reportsView .time-form-head,
#meetingsView .panel-head,
#meetingsView .time-form-head {
  border-bottom: 0 !important;
  box-shadow: none !important;
}

#reportsView .panel-head::before,
#reportsView .panel-head::after,
#reportsView .time-form-head::before,
#reportsView .time-form-head::after,
#meetingsView .panel-head::before,
#meetingsView .panel-head::after,
#meetingsView .time-form-head::before,
#meetingsView .time-form-head::after {
  display: none !important;
  content: none !important;
}

/* Calm system 21: work calendar hierarchy and form baseline alignment. */
#reportsView #hoursMonthCalendar .hours-calendar-head > div {
  gap: 3px !important;
  align-content: center !important;
}

#reportsView #hoursMonthCalendar .hours-calendar-head strong {
  color: var(--ink) !important;
  font-size: var(--type-section-title) !important;
  font-weight: 780 !important;
  line-height: 1.08 !important;
  text-transform: none !important;
}

#reportsView #hoursMonthCalendar .hours-calendar-head span {
  color: var(--muted) !important;
  font-size: var(--type-caption) !important;
  font-weight: 620 !important;
  line-height: 1.2 !important;
  text-transform: none !important;
}

#reportsView .calendar-field .calendar-display-value {
  font-family: var(--font-ui) !important;
  font-size: var(--type-body) !important;
  font-weight: 720 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

#reportsView .time-form-note-row textarea {
  min-height: 136px !important;
  height: 136px !important;
  max-height: 136px !important;
}

#reportsView .time-form-actions {
  align-self: end !important;
}

/* Calm system 22: stretch work note to align submit with the calendar day grid. */
#reportsView .time-form-note-row textarea {
  min-height: 193px !important;
  height: 193px !important;
  max-height: 193px !important;
}

@media (max-width: 1280px) {
  #reportsView .time-form-note-row textarea {
    min-height: 180px !important;
    height: 180px !important;
    max-height: 180px !important;
  }
}

/* Calm system 25: align the Work card rhythm without pushing actions outside the card. */
#reportsView {
  --work-panel-height: clamp(500px, calc(100vh - 206px), 620px);
  --work-note-height: clamp(136px, calc(var(--work-panel-height) - 367px), 253px);
}

#reportsView #timeForm,
#reportsView #hoursMonthCalendar,
#reportsView .time-self-entries-panel {
  height: var(--work-panel-height) !important;
  max-height: var(--work-panel-height) !important;
}

#reportsView #hoursMonthCalendar .hours-calendar-head > div {
  transform: translateY(10px) !important;
}

#reportsView .time-form-note-row textarea {
  min-height: var(--work-note-height) !important;
  height: var(--work-note-height) !important;
  max-height: var(--work-note-height) !important;
}

#reportsView #timeSubmit {
  display: inline-grid !important;
  place-items: center !important;
}

@media (max-width: 1280px) {
  #reportsView #timeForm,
  #reportsView #hoursMonthCalendar,
  #reportsView .time-self-entries-panel {
    height: auto !important;
    max-height: none !important;
  }

  #reportsView #hoursMonthCalendar .hours-calendar-head > div {
    transform: none !important;
  }

  #reportsView .time-form-note-row textarea {
    min-height: 180px !important;
    height: 180px !important;
    max-height: 180px !important;
  }
}

/* Calm system 28: align the work calendar subtitle with the side-panel subtitles. */
#reportsView #hoursMonthCalendar .hours-calendar-head span {
  display: block !important;
  transform: translateY(7px) !important;
}

#reportsView #hoursMonthCalendar .hours-calendar-weekdays {
  margin-top: 19px !important;
}

@media (max-width: 1280px) {
  #reportsView #hoursMonthCalendar .hours-calendar-head span {
    transform: none !important;
  }

  #reportsView #hoursMonthCalendar .hours-calendar-weekdays {
    margin-top: 0 !important;
  }
}

/* Calm system 30: center calendar day content and compact monthly work entries. */
#reportsView #hoursMonthCalendar .hours-calendar-day {
  position: relative !important;
  display: block !important;
  padding: 0 !important;
  text-align: center !important;
}

#reportsView #hoursMonthCalendar .hours-calendar-day strong {
  position: absolute !important;
  top: 10px !important;
  left: 0 !important;
  right: 0 !important;
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  line-height: 1 !important;
}

#reportsView #hoursMonthCalendar .hours-calendar-day span {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--ink) !important;
  font-size: var(--type-card-title) !important;
  font-weight: 780 !important;
  line-height: 1 !important;
  text-align: center !important;
  pointer-events: none !important;
}

#reportsView #hoursMonthCalendar .hours-calendar-day span:empty {
  display: none !important;
}

#reportsView .time-entry-list {
  gap: 10px !important;
}

#reportsView .time-entry-item {
  display: grid !important;
  grid-template-columns: 72px minmax(0, 1fr) auto !important;
  grid-template-rows: auto !important;
  gap: 8px 14px !important;
  align-items: center !important;
  min-height: 82px !important;
  padding: 10px 14px !important;
}

#reportsView .time-entry-main {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: grid !important;
  gap: 4px !important;
  align-content: center !important;
  min-width: 0 !important;
}

#reportsView .time-entry-title-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 12px !important;
  align-items: baseline !important;
  min-width: 0 !important;
}

#reportsView .time-entry-title-row strong,
#reportsView .time-entry-hours {
  color: var(--ink) !important;
  font-size: var(--type-card-title) !important;
  font-weight: 780 !important;
  line-height: 1.18 !important;
}

#reportsView .time-entry-title-row strong:first-child,
#reportsView .time-entry-main > span {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#reportsView .time-entry-hours {
  justify-self: end !important;
  white-space: nowrap !important;
  font-variant-numeric: tabular-nums !important;
}

#reportsView .time-entry-main > span {
  color: var(--muted) !important;
  font-size: var(--type-body) !important;
  font-weight: 520 !important;
  line-height: 1.28 !important;
}

#reportsView .time-entry-actions {
  grid-column: 3 !important;
  grid-row: 1 !important;
  align-self: center !important;
  justify-self: end !important;
  min-width: 76px !important;
}

#reportsView .time-entry-actions {
  display: grid !important;
  gap: 4px !important;
}

#reportsView .time-entry-actions button {
  min-height: 28px !important;
  height: 28px !important;
  padding: 0 10px !important;
}

@media (max-width: 760px) {
  #reportsView .time-entry-item {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  #reportsView .time-entry-main {
    grid-column: 1 !important;
  }

  #reportsView .time-entry-actions {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
  }
}

/* Calm system 32: meetings behave and align like Work, with inline detail. */
#meetingsView {
  --meeting-panel-height: var(--work-panel-height, clamp(500px, calc(100vh - 206px), 620px));
}

#meetingsView #meetingForm,
#meetingsView .meeting-calendar-panel,
#meetingsView .meeting-list-panel {
  height: var(--meeting-panel-height) !important;
  max-height: var(--meeting-panel-height) !important;
}

#meetingsView #meetingForm {
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) !important;
  gap: 18px !important;
}

#meetingsView .meeting-form-fields {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px 18px !important;
  align-items: end !important;
}

#meetingsView .meeting-form-fields > label,
#meetingsView .meeting-form-fields input,
#meetingsView .meeting-form-fields select {
  min-width: 0 !important;
  width: 100% !important;
}

#meetingsView .calendar-field .calendar-display-value {
  font-family: var(--font-ui) !important;
  font-size: var(--type-body) !important;
  font-weight: 720 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

#meetingsView .meeting-participants-field {
  grid-column: 1 / -1 !important;
  position: relative !important;
  min-width: 0 !important;
  min-height: var(--system-field-height) !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 1px solid var(--calm-border-strong) !important;
  border-radius: var(--system-field-radius) !important;
  background: var(--calm-field) !important;
  box-shadow: none !important;
}

#meetingsView .meeting-participants-field[open] {
  z-index: 20 !important;
}

#meetingsView .meeting-participants-field > summary {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: center !important;
  min-height: var(--system-field-height) !important;
  padding: 0 16px !important;
  cursor: pointer !important;
  list-style: none !important;
}

#meetingsView .meeting-participants-field > summary::-webkit-details-marker {
  display: none !important;
}

#meetingsView .meeting-participants-field > summary span,
#meetingsView .meeting-participants-field > summary em {
  min-width: 0 !important;
  font-size: var(--type-body) !important;
  line-height: 1.2 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

#meetingsView .meeting-participants-field > summary span {
  color: var(--ink) !important;
  font-weight: 760 !important;
}

#meetingsView .meeting-participants-field > summary em {
  justify-self: end !important;
  max-width: 100% !important;
  overflow: hidden !important;
  color: var(--muted) !important;
  font-style: normal !important;
  font-weight: 640 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#meetingsView .meeting-participants-field > span,
#meetingsView .meeting-participants-field > small {
  display: none !important;
}

#meetingsView .meeting-participant-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 30 !important;
  margin: 0 !important;
  padding: 10px !important;
  border: 1px solid var(--calm-border-strong) !important;
  border-radius: var(--system-field-radius) !important;
  background: rgba(39, 39, 44, 0.98) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28) !important;
}

#meetingsView .meeting-participant-list label {
  display: grid !important;
  grid-template-columns: 18px minmax(0, 1fr) !important;
  gap: 8px !important;
  align-items: center !important;
  min-height: 34px !important;
  padding: 0 12px !important;
  border: 1px solid var(--calm-border) !important;
  border-radius: var(--system-pill-radius) !important;
  background: var(--calm-row) !important;
  color: var(--ink) !important;
  font-size: var(--type-body) !important;
  font-weight: 650 !important;
  line-height: 1.1 !important;
  text-transform: none !important;
}

#meetingsView .meeting-participant-list input {
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
}

#meetingsView .meeting-form-note-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) var(--system-action-height) !important;
  gap: 12px !important;
  min-height: 0 !important;
  align-self: stretch !important;
}

#meetingsView .meeting-form-note-row > label {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

#meetingsView .meeting-form-note-row textarea {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  resize: none !important;
}

#meetingsView .meeting-form-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-rows: var(--system-action-height) !important;
  gap: 8px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

#meetingsView .meeting-form-actions button,
#meetingsView #meetingSubmit,
#meetingsView #cancelMeetingEdit {
  width: 100% !important;
  height: var(--system-action-height) !important;
  min-height: var(--system-action-height) !important;
  max-height: var(--system-action-height) !important;
  padding: 0 16px !important;
  border-radius: var(--system-pill-radius) !important;
  line-height: 1.1 !important;
}

#meetingsView .meeting-form-actions .hidden {
  display: none !important;
}

#meetingsView .meeting-month-calendar .hours-calendar-day {
  position: relative !important;
  display: block !important;
  padding: 0 !important;
  text-align: center !important;
}

#meetingsView .meeting-month-calendar .hours-calendar-day strong {
  position: absolute !important;
  top: 10px !important;
  left: 0 !important;
  right: 0 !important;
  display: block !important;
  width: 100% !important;
  color: var(--muted) !important;
  font-size: var(--type-body) !important;
  font-weight: 720 !important;
  line-height: 1 !important;
  text-align: center !important;
}

#meetingsView .meeting-month-calendar .meeting-calendar-count {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--ink) !important;
  font-size: var(--type-card-title) !important;
  font-weight: 780 !important;
  line-height: 1 !important;
  pointer-events: none !important;
}

#meetingsView .meeting-list-panel .daily-meeting-item {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 10px 14px !important;
  align-items: center !important;
  height: auto !important;
  max-height: none !important;
  min-height: var(--system-card-min) !important;
  overflow: visible !important;
  cursor: pointer !important;
}

#meetingsView .meeting-list-panel .daily-meeting-item.is-selected {
  grid-template-columns: minmax(0, 1fr) 118px !important;
  align-items: start !important;
  grid-template-rows: auto !important;
  height: auto !important;
  min-height: 168px !important;
  overflow: hidden !important;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

#meetingsView .meeting-list-panel .daily-meeting-item .daily-main {
  display: grid !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  gap: 5px !important;
  align-content: start !important;
  align-self: start !important;
  height: auto !important;
  max-height: none !important;
  min-width: 0 !important;
  overflow: visible !important;
}

#meetingsView .meeting-list-panel .daily-meeting-item .meeting-detail-extra {
  display: none !important;
  grid-column: 1 / -1 !important;
  margin-top: 10px !important;
  padding-top: 10px !important;
  border-top: 1px solid var(--calm-border) !important;
}

#meetingsView .meeting-list-panel .daily-meeting-item.is-selected .meeting-detail-extra {
  display: grid !important;
  gap: 6px !important;
}

#meetingsView .meeting-list-panel .daily-meeting-item.is-selected .meeting-detail-extra small,
#meetingsView .meeting-list-panel .daily-meeting-item.is-selected .meeting-detail-extra p {
  display: block !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: var(--muted) !important;
  font-size: var(--type-caption) !important;
  font-weight: 620 !important;
  line-height: 1.35 !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

#meetingsView .meeting-list-panel .daily-meeting-item.is-selected .meeting-detail-extra p {
  display: -webkit-box !important;
}

#meetingsView .meeting-list-panel .daily-meeting-item .meeting-actions {
  display: none !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  gap: 6px !important;
  align-self: center !important;
  justify-self: end !important;
}

#meetingsView .meeting-list-panel .daily-meeting-item.is-selected .meeting-actions {
  display: grid !important;
}

#meetingsView .meeting-list-panel .daily-meeting-item .meeting-actions button {
  min-width: 92px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 12px !important;
}

@media (max-width: 1280px) {
  #meetingsView #meetingForm,
  #meetingsView .meeting-calendar-panel,
  #meetingsView .meeting-list-panel {
    height: auto !important;
    max-height: none !important;
  }

  #meetingsView .meeting-form-note-row {
    grid-template-rows: auto auto !important;
  }

  #meetingsView .meeting-form-note-row textarea {
    min-height: 180px !important;
    height: 180px !important;
    max-height: 180px !important;
  }
}

@media (max-width: 760px) {
  #meetingsView .meeting-form-fields,
  #meetingsView .meeting-participant-list {
    grid-template-columns: 1fr !important;
  }

  #meetingsView .meeting-list-panel .daily-meeting-item {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #meetingsView .meeting-list-panel .daily-meeting-item .meeting-actions {
    grid-column: 1 !important;
    grid-row: auto !important;
    justify-self: stretch !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Calm system 33: simplify meeting participants and make calendar counts explicit. */
#meetingsView .meeting-participants-field {
  border-radius: var(--system-field-radius) !important;
  background: var(--calm-field) !important;
}

#meetingsView .meeting-participants-field > summary {
  grid-template-columns: auto minmax(0, 1fr) 18px !important;
}

#meetingsView .meeting-participants-field > summary::after {
  content: "v" !important;
  justify-self: end !important;
  color: var(--muted) !important;
  font-size: 17px !important;
  line-height: 1 !important;
}

#meetingsView .meeting-participants-field[open] > summary::after {
  transform: rotate(180deg) !important;
}

#meetingsView .meeting-participant-list {
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  padding: 8px 0 !important;
  border-radius: 14px !important;
  background: rgba(37, 37, 42, 0.98) !important;
}

#meetingsView .meeting-participant-list label {
  grid-template-columns: 18px minmax(0, 1fr) !important;
  min-height: 34px !important;
  padding: 0 14px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

#meetingsView .meeting-participant-list label:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}

#meetingsView .meeting-month-calendar .meeting-calendar-count {
  inset: 50% auto auto 50% !important;
  width: 30px !important;
  height: 24px !important;
  border: 1px solid rgba(112, 154, 230, 0.72) !important;
  border-radius: 999px !important;
  background: rgba(112, 154, 230, 0.16) !important;
  transform: translate(-50%, -40%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

/* Calm system 34: meeting participants are a flat list, not a nested popover. */
#meetingsView #meetingForm {
  gap: 14px !important;
  overflow: hidden !important;
}

#meetingsView .meeting-form-fields {
  gap: 12px 18px !important;
}

#meetingsView .meeting-participants-field {
  display: grid !important;
  grid-column: 1 / -1 !important;
  gap: 8px !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

#meetingsView .meeting-participants-field > summary {
  display: none !important;
}

#meetingsView .meeting-participants-field > span {
  display: block !important;
  color: var(--muted) !important;
  font-size: var(--type-label) !important;
  font-weight: 760 !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

#meetingsView .meeting-participants-field > small {
  display: none !important;
}

#meetingsView .meeting-participant-list {
  position: static !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px 14px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#meetingsView .meeting-participant-list label,
#meetingsView .meeting-participant-list label:hover {
  display: grid !important;
  grid-template-columns: 17px minmax(0, 1fr) !important;
  gap: 7px !important;
  align-items: center !important;
  min-height: 24px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--ink) !important;
  font-size: var(--type-caption) !important;
  font-weight: 650 !important;
  line-height: 1.15 !important;
  text-transform: none !important;
}

#meetingsView .meeting-participant-list input {
  width: 16px !important;
  height: 16px !important;
}

#meetingsView .meeting-form-note-row {
  gap: 10px !important;
}

#meetingsView .meeting-form-note-row textarea {
  min-height: 100px !important;
}

#meetingsView #cancelMeetingEdit.hidden,
#meetingsView .meeting-form-actions .hidden {
  display: none !important;
}

/* Calm system 36: make Meetings follow the Work rhythm and remove nested form layers. */
#meetingsView {
  --meeting-form-gap: 10px;
  --meeting-participant-line: 24px;
}

#meetingsView #meetingForm {
  grid-template-rows: auto auto minmax(0, 1fr) !important;
  gap: var(--meeting-form-gap) !important;
  overflow: hidden !important;
}

#meetingsView #meetingForm .time-form-head {
  margin: 0 !important;
  padding-bottom: 0 !important;
}

#meetingsView #meetingForm .time-form-head > div {
  display: grid !important;
  gap: 8px !important;
}

#meetingsView .meeting-form-fields {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px 18px !important;
  align-items: end !important;
}

#meetingsView .meeting-participants-field {
  display: grid !important;
  grid-column: 1 / -1 !important;
  gap: 7px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

#meetingsView .meeting-participants-field > summary {
  display: none !important;
}

#meetingsView .meeting-participants-field > span {
  display: block !important;
  color: var(--muted) !important;
  font-size: var(--type-label) !important;
  font-weight: 760 !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

#meetingsView .meeting-participants-field > small {
  display: none !important;
}

#meetingsView .meeting-participant-list {
  position: static !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(156px, 1fr)) !important;
  gap: 4px 16px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#meetingsView .meeting-participant-list label,
#meetingsView .meeting-participant-list label:hover {
  display: grid !important;
  grid-template-columns: 16px minmax(0, 1fr) !important;
  gap: 7px !important;
  align-items: center !important;
  min-height: var(--meeting-participant-line) !important;
  height: var(--meeting-participant-line) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--ink) !important;
  font-size: var(--type-caption) !important;
  font-weight: 650 !important;
  line-height: 1.15 !important;
  text-transform: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#meetingsView .meeting-participant-list input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  max-width: 16px !important;
  min-height: 16px !important;
  max-height: 16px !important;
  margin: 0 !important;
  border: 1px solid var(--calm-border-strong) !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

#meetingsView .meeting-participant-list input[type="checkbox"]:checked {
  border-color: rgba(94, 168, 255, 0.9) !important;
  background: rgba(94, 168, 255, 0.45) !important;
  box-shadow: inset 0 0 0 4px rgba(24, 24, 28, 0.9) !important;
}

#meetingsView .meeting-form-note-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) var(--system-action-height) !important;
  gap: 10px !important;
  min-height: 0 !important;
  margin: 0 !important;
  align-items: stretch !important;
  align-content: stretch !important;
  align-self: stretch !important;
}

#meetingsView .meeting-form-note-row > label {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: 8px !important;
  min-height: 0 !important;
}

#meetingsView .meeting-form-note-row textarea {
  width: 100% !important;
  height: 100% !important;
  min-height: 96px !important;
  max-height: none !important;
  resize: none !important;
}

#meetingsView .meeting-form-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-rows: var(--system-action-height) !important;
  gap: 10px !important;
  min-height: 0 !important;
  overflow: visible !important;
}

#meetingsView .meeting-form-actions:has(#cancelMeetingEdit.hidden) {
  grid-template-columns: minmax(0, 1fr) !important;
}

#meetingsView .meeting-form-actions button,
#meetingsView #meetingSubmit,
#meetingsView #cancelMeetingEdit {
  width: 100% !important;
  height: var(--system-action-height) !important;
  min-height: var(--system-action-height) !important;
  max-height: var(--system-action-height) !important;
}

#meetingsView #cancelMeetingEdit.hidden,
#meetingsView .meeting-form-actions .hidden {
  display: none !important;
}

#meetingsView .meeting-calendar-panel .hours-calendar-head > div {
  gap: 3px !important;
  align-content: center !important;
  transform: translateY(10px) !important;
}

#meetingsView .meeting-calendar-panel .hours-calendar-head strong {
  color: var(--ink) !important;
  font-size: var(--type-section-title) !important;
  font-weight: 780 !important;
  line-height: 1.08 !important;
  text-transform: none !important;
}

#meetingsView .meeting-calendar-panel .hours-calendar-head span {
  display: block !important;
  color: var(--muted) !important;
  font-size: var(--type-caption) !important;
  font-weight: 620 !important;
  line-height: 1.2 !important;
  text-transform: none !important;
  transform: translateY(7px) !important;
}

#meetingsView .meeting-calendar-panel .hours-calendar-weekdays {
  margin-top: 19px !important;
}

@media (max-width: 1280px) {
  #meetingsView #meetingForm {
    height: auto !important;
    max-height: none !important;
  }

  #meetingsView .meeting-calendar-panel .hours-calendar-head > div,
  #meetingsView .meeting-calendar-panel .hours-calendar-head span {
    transform: none !important;
  }

  #meetingsView .meeting-calendar-panel .hours-calendar-weekdays {
    margin-top: 0 !important;
  }

  #meetingsView .meeting-form-note-row {
    grid-template-rows: auto auto !important;
  }

  #meetingsView .meeting-form-note-row textarea {
    height: 180px !important;
    min-height: 180px !important;
    max-height: 180px !important;
  }
}

@media (max-width: 760px) {
  #meetingsView .meeting-form-fields,
  #meetingsView .meeting-participant-list {
    grid-template-columns: 1fr !important;
  }
}

/* Calm system 39: meeting controls share one compact dropdown language. */
#meetingsView #meetingForm {
  overflow: visible !important;
  grid-template-rows: auto auto minmax(0, 1fr) !important;
  gap: 10px !important;
}

#meetingsView #meetingForm .time-form-head > div {
  gap: 8px !important;
}

#meetingsView .meeting-form-fields {
  position: relative !important;
  z-index: 4 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px 18px !important;
  align-items: end !important;
}

#meetingsView .meeting-form-fields > label,
#meetingsView .time-picker-field,
#meetingsView .calendar-field {
  position: relative !important;
  min-width: 0 !important;
}

#meetingsView .meeting-form-fields input,
#meetingsView .meeting-form-fields select {
  width: 100% !important;
  min-width: 0 !important;
  height: var(--system-field-height) !important;
  min-height: var(--system-field-height) !important;
  border-radius: var(--system-field-radius) !important;
  font-family: var(--font-ui) !important;
  font-size: var(--type-body) !important;
  font-weight: 720 !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

#meetingsView .calendar-field .calendar-display-value {
  font-family: var(--font-ui) !important;
  font-size: var(--type-body) !important;
  font-weight: 720 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

#meetingsView .time-picker-field input {
  cursor: pointer !important;
  padding-right: 44px !important;
}

#meetingsView .time-picker-field::after {
  content: "v" !important;
  position: absolute !important;
  right: 18px !important;
  bottom: calc((var(--system-field-height) - 18px) / 2) !important;
  color: var(--muted) !important;
  font-size: 18px !important;
  line-height: 1 !important;
  pointer-events: none !important;
}

#meetingsView .meeting-participant-list {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 80 !important;
  display: grid !important;
  gap: 7px !important;
  max-height: 228px !important;
  margin: 0 !important;
  padding: 10px !important;
  overflow: auto !important;
  border: 1px solid var(--calm-border-strong) !important;
  border-radius: var(--system-field-radius) !important;
  background: rgba(37, 37, 42, 0.98) !important;
  box-shadow: 0 22px 52px rgba(0, 0, 0, 0.38) !important;
  backdrop-filter: blur(22px) !important;
}

#meetingsView .meeting-participant-list label {
  display: grid !important;
  align-items: center !important;
  min-width: 0 !important;
  min-height: 36px !important;
  height: 36px !important;
  padding: 0 12px !important;
  border: 1px solid var(--calm-border) !important;
  border-radius: var(--system-pill-radius) !important;
  background: rgba(255, 255, 255, 0.035) !important;
  color: var(--ink) !important;
  font-family: var(--font-ui) !important;
  font-size: var(--type-caption) !important;
  font-weight: 680 !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  white-space: nowrap !important;
}

#meetingsView .meeting-participant-list label:hover {
  border-color: rgba(94, 168, 255, 0.62) !important;
  background: rgba(94, 168, 255, 0.16) !important;
}

#meetingsView .meeting-participants-field {
  display: block !important;
  grid-column: 1 / -1 !important;
  position: relative !important;
  min-width: 0 !important;
  min-height: var(--system-field-height) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 1px solid var(--calm-border-strong) !important;
  border-radius: var(--system-field-radius) !important;
  background: var(--calm-field) !important;
  box-shadow: none !important;
}

#meetingsView .meeting-participants-field[open] {
  z-index: 90 !important;
}

#meetingsView .meeting-participants-field > summary {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) 18px !important;
  gap: 12px !important;
  align-items: center !important;
  min-height: var(--system-field-height) !important;
  padding: 0 18px !important;
  cursor: pointer !important;
  list-style: none !important;
}

#meetingsView .meeting-participants-field > summary::-webkit-details-marker {
  display: none !important;
}

#meetingsView .meeting-participants-field > summary::after {
  content: "v" !important;
  justify-self: end !important;
  color: var(--muted) !important;
  font-size: 18px !important;
  line-height: 1 !important;
}

#meetingsView .meeting-participants-field[open] > summary::after {
  transform: rotate(180deg) !important;
}

#meetingsView .meeting-participants-field > summary span,
#meetingsView .meeting-participants-field > summary em {
  min-width: 0 !important;
  font-family: var(--font-ui) !important;
  font-size: var(--type-body) !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

#meetingsView .meeting-participants-field > summary span {
  color: var(--ink) !important;
  font-weight: 760 !important;
}

#meetingsView .meeting-participants-field > summary em {
  justify-self: end !important;
  overflow: hidden !important;
  color: var(--muted) !important;
  font-style: normal !important;
  font-weight: 640 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#meetingsView .meeting-participants-field > input[type="hidden"],
#meetingsView .meeting-participants-field > small {
  display: none !important;
}

#meetingsView .meeting-participant-list {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

#meetingsView .meeting-participant-list label {
  grid-template-columns: 18px minmax(0, 1fr) !important;
  gap: 8px !important;
  cursor: pointer !important;
}

#meetingsView .meeting-participant-list input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;
  margin: 0 !important;
  border: 1px solid var(--calm-border-strong) !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
}

#meetingsView .meeting-participant-list input[type="checkbox"]:checked {
  border-color: rgba(94, 168, 255, 0.88) !important;
  background: rgba(94, 168, 255, 0.48) !important;
  box-shadow: inset 0 0 0 4px rgba(24, 24, 28, 0.92) !important;
}

#meetingsView .meeting-form-note-row {
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) var(--system-action-height) !important;
  gap: 16px !important;
  min-height: 0 !important;
  margin: 0 !important;
  align-self: stretch !important;
  align-items: stretch !important;
}

#meetingsView .meeting-form-note-row > label {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: 8px !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

#meetingsView .meeting-form-note-row textarea {
  width: 100% !important;
  height: 100% !important;
  min-height: 88px !important;
  max-height: none !important;
  resize: none !important;
}

#meetingsView .meeting-form-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-rows: var(--system-action-height) !important;
  gap: 10px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: visible !important;
}

#meetingsView .meeting-form-actions:has(#cancelMeetingEdit.hidden) {
  grid-template-columns: minmax(0, 1fr) !important;
}

#meetingsView .meeting-form-actions button,
#meetingsView #meetingSubmit,
#meetingsView #cancelMeetingEdit {
  width: 100% !important;
  height: var(--system-action-height) !important;
  min-height: var(--system-action-height) !important;
  max-height: var(--system-action-height) !important;
  border-radius: var(--system-pill-radius) !important;
}

#meetingsView #cancelMeetingEdit.hidden,
#meetingsView .meeting-form-actions .hidden {
  display: none !important;
}

@media (max-width: 760px) {
  #meetingsView .meeting-participant-list {
    grid-template-columns: 1fr !important;
  }
}

/* Calm system 44: free time entry and centered participant rows. */
#meetingsView .time-picker-field input {
  cursor: text !important;
  padding-right: 18px !important;
}

#meetingsView .time-picker-field::after {
  display: none !important;
  content: none !important;
}

#meetingsView .meeting-participant-list label,
#meetingsView .meeting-participant-list label:hover {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 14px !important;
  line-height: 1 !important;
}

#meetingsView .meeting-participant-list input[type="checkbox"] {
  flex: 0 0 18px !important;
  align-self: center !important;
  transform: none !important;
}

/* Calm system 45: align the meeting form header rhythm with the work form. */
#meetingsView #meetingForm {
  gap: 16px !important;
}

#meetingsView #meetingForm .time-form-head {
  margin: 0 !important;
  padding: 0 0 12px !important;
}

#meetingsView #meetingForm .time-form-head > div {
  gap: 4px !important;
}

#meetingsView .meeting-form-fields {
  gap: 16px 18px !important;
}

/* Calm system 46: align the Work submit button with the Meeting submit button. */
#reportsView {
  --work-note-height: clamp(126px, calc(var(--work-panel-height) - 377px), 243px);
}

#reportsView #timeSubmit,
#reportsView #cancelTimeEdit {
  height: var(--system-action-height) !important;
  min-height: var(--system-action-height) !important;
  max-height: var(--system-action-height) !important;
}

/* Calm system 47: lower calendar values and simplify meeting counts. */
#reportsView #hoursMonthCalendar .hours-calendar-day span {
  transform: translateY(6px) !important;
}

#meetingsView .meeting-month-calendar .meeting-calendar-count {
  top: 56% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--ink) !important;
  transform: translate(-50%, -50%) !important;
}

/* Calm system 48: nearest meetings are compact links to the full list. */
#meetingsView .meeting-list-panel .daily-meeting-item,
#meetingsView .meeting-list-panel .daily-meeting-item.is-selected {
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: center !important;
  min-height: var(--final-card-height) !important;
  padding: 12px 16px !important;
}

#meetingsView .meeting-list-panel .daily-meeting-item .meeting-detail-extra,
#meetingsView .meeting-list-panel .daily-meeting-item.is-selected .meeting-detail-extra,
#meetingsView .meeting-list-panel .daily-meeting-item .meeting-actions,
#meetingsView .meeting-list-panel .daily-meeting-item.is-selected .meeting-actions {
  display: none !important;
}

/* Calm system 49: keep the meeting note and submit row separated in create and edit mode. */
#meetingsView {
  --meeting-note-height: clamp(78px, calc(var(--meeting-panel-height) - 448px), 124px);
}

#meetingsView #meetingForm {
  overflow: hidden !important;
}

#meetingsView .meeting-form-note-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto var(--system-action-height) !important;
  gap: 14px !important;
  min-height: 0 !important;
  margin: 0 !important;
  align-self: end !important;
  align-items: stretch !important;
  overflow: visible !important;
}

#meetingsView .meeting-form-note-row > label {
  display: grid !important;
  grid-template-rows: auto var(--meeting-note-height) !important;
  gap: 8px !important;
  min-height: 0 !important;
}

#meetingsView .meeting-form-note-row textarea {
  height: var(--meeting-note-height) !important;
  min-height: var(--meeting-note-height) !important;
  max-height: var(--meeting-note-height) !important;
  resize: none !important;
}

#meetingsView .meeting-form-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-rows: var(--system-action-height) !important;
  gap: 12px !important;
  min-height: var(--system-action-height) !important;
  max-height: var(--system-action-height) !important;
  overflow: visible !important;
}

#meetingsView .meeting-form-actions:has(#cancelMeetingEdit.hidden),
#meetingsView .meeting-form-actions:has(.ghost-action.hidden) {
  grid-template-columns: minmax(0, 1fr) !important;
}

#meetingsView .meeting-form-actions button,
#meetingsView #meetingSubmit,
#meetingsView #cancelMeetingEdit {
  height: var(--system-action-height) !important;
  min-height: var(--system-action-height) !important;
  max-height: var(--system-action-height) !important;
}

/* Calm system 50: meeting details open inline instead of in a second list. */
#meetingsView .meeting-detail-panel {
  display: none !important;
}

#dashboardView .daily-meeting-item,
#meetingsView .meeting-list-panel .daily-meeting-item,
#meetingsView .meeting-list-panel .daily-meeting-item.is-selected {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: start !important;
  min-height: var(--final-card-height) !important;
  height: auto !important;
  max-height: none !important;
  padding: 12px 16px !important;
  cursor: pointer !important;
  overflow: hidden !important;
}

#dashboardView .daily-meeting-item.is-selected,
#meetingsView .meeting-list-panel .daily-meeting-item.is-selected {
  min-height: 136px !important;
  border-color: var(--calm-border-strong) !important;
  background: var(--calm-row) !important;
}

#dashboardView .daily-meeting-item .daily-main,
#meetingsView .meeting-list-panel .daily-meeting-item .daily-main {
  display: grid !important;
  gap: 6px !important;
  min-width: 0 !important;
  width: 100% !important;
  overflow: hidden !important;
}

#dashboardView .daily-meeting-item .meeting-detail-extra,
#meetingsView .meeting-list-panel .daily-meeting-item .meeting-detail-extra {
  display: none !important;
  gap: 6px !important;
  margin-top: 8px !important;
  padding-top: 10px !important;
  border-top: 1px solid var(--calm-border) !important;
}

#dashboardView .daily-meeting-item.is-selected .meeting-detail-extra,
#meetingsView .meeting-list-panel .daily-meeting-item.is-selected .meeting-detail-extra {
  display: grid !important;
}

#dashboardView .daily-meeting-item .meeting-detail-extra small,
#dashboardView .daily-meeting-item .meeting-detail-extra p,
#meetingsView .meeting-list-panel .daily-meeting-item .meeting-detail-extra small,
#meetingsView .meeting-list-panel .daily-meeting-item .meeting-detail-extra p {
  margin: 0 !important;
  color: var(--muted) !important;
  font-size: var(--type-caption) !important;
  font-weight: 620 !important;
  line-height: 1.35 !important;
}

#meetingsView .meeting-list-panel .daily-meeting-item .meeting-actions {
  display: none !important;
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-top: 10px !important;
  width: 100% !important;
}

#meetingsView .meeting-list-panel .daily-meeting-item.is-selected .meeting-actions {
  display: grid !important;
}

#meetingsView .meeting-list-panel .daily-meeting-item .meeting-actions button {
  width: 100% !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 12px !important;
}

/* Calm system 52: return to the stable inline card and only tune its spacing. */
#dashboardView .daily-meeting-item.is-selected,
#meetingsView .meeting-list-panel .daily-meeting-item.is-selected {
  min-height: var(--final-card-height) !important;
  padding: 14px 16px !important;
  overflow: hidden !important;
}

#dashboardView .daily-meeting-item.is-selected .daily-main,
#meetingsView .meeting-list-panel .daily-meeting-item.is-selected .daily-main {
  gap: 7px !important;
}

#dashboardView .daily-meeting-item.is-selected .meeting-detail-extra,
#meetingsView .meeting-list-panel .daily-meeting-item.is-selected .meeting-detail-extra {
  margin-top: 10px !important;
  padding-top: 10px !important;
}

#meetingsView .meeting-list-panel .daily-meeting-item.is-selected .meeting-actions {
  margin-top: 10px !important;
}

/* Calm system 53: meeting card content is a single clean vertical stack. */
#dashboardView .daily-meeting-item,
#meetingsView .meeting-list-panel .daily-meeting-item {
  display: block !important;
  box-sizing: border-box !important;
  min-height: var(--final-card-height) !important;
  height: auto !important;
  max-height: none !important;
  padding: 12px 16px !important;
  overflow: hidden !important;
}

#dashboardView .daily-meeting-item.is-selected,
#meetingsView .meeting-list-panel .daily-meeting-item.is-selected {
  min-height: var(--final-card-height) !important;
  height: auto !important;
  max-height: none !important;
  padding: 12px 16px 14px !important;
  overflow: hidden !important;
}

#dashboardView .daily-meeting-item .daily-main,
#meetingsView .meeting-list-panel .daily-meeting-item .daily-main,
#dashboardView .daily-meeting-item.is-selected .daily-main,
#meetingsView .meeting-list-panel .daily-meeting-item.is-selected .daily-main {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 7px !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
}

#dashboardView .daily-meeting-item .daily-main > strong,
#meetingsView .meeting-list-panel .daily-meeting-item .daily-main > strong {
  display: block !important;
  min-width: 0 !important;
}

#dashboardView .daily-meeting-item .daily-main > small,
#meetingsView .meeting-list-panel .daily-meeting-item .daily-main > small {
  display: block !important;
  min-width: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#dashboardView .daily-meeting-item .meeting-detail-extra,
#meetingsView .meeting-list-panel .daily-meeting-item .meeting-detail-extra {
  display: none !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}

#dashboardView .daily-meeting-item.is-selected .meeting-detail-extra,
#meetingsView .meeting-list-panel .daily-meeting-item.is-selected .meeting-detail-extra {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 8px !important;
  margin-top: 10px !important;
  padding-top: 10px !important;
  border-top: 1px solid var(--calm-border) !important;
}

#dashboardView .daily-meeting-item.is-selected .meeting-detail-extra small,
#dashboardView .daily-meeting-item.is-selected .meeting-detail-extra p,
#meetingsView .meeting-list-panel .daily-meeting-item.is-selected .meeting-detail-extra small,
#meetingsView .meeting-list-panel .daily-meeting-item.is-selected .meeting-detail-extra p {
  display: block !important;
  margin: 0 !important;
  min-width: 0 !important;
  overflow: visible !important;
  color: var(--muted) !important;
  font-size: var(--type-caption) !important;
  font-weight: 620 !important;
  line-height: 1.35 !important;
  text-overflow: clip !important;
  white-space: normal !important;
}

#meetingsView .meeting-list-panel .daily-meeting-item .meeting-detail-extra .meeting-actions {
  display: none !important;
  width: 100% !important;
  margin: 2px 0 0 !important;
}

#meetingsView .meeting-list-panel .daily-meeting-item.is-selected .meeting-detail-extra .meeting-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

#meetingsView .meeting-list-panel .daily-meeting-item.is-selected .meeting-detail-extra .meeting-actions button {
  width: 100% !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  padding: 0 12px !important;
}

/* Calm system 54: meeting cards expand as one card, with no divider or overlap. */
#dashboardView .daily-meeting-item,
#meetingsView .meeting-list-panel .daily-meeting-item {
  position: relative !important;
  display: block !important;
  box-sizing: border-box !important;
  min-height: var(--final-card-height) !important;
  height: auto !important;
  max-height: none !important;
  padding: var(--final-card-padding-y) var(--final-card-padding-x) !important;
  overflow: hidden !important;
}

#dashboardView .daily-meeting-item .daily-main,
#meetingsView .meeting-list-panel .daily-meeting-item .daily-main {
  position: static !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 7px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  overflow: visible !important;
  transform: none !important;
}

#dashboardView .daily-meeting-item .daily-main > strong,
#dashboardView .daily-meeting-item .daily-main > small,
#meetingsView .meeting-list-panel .daily-meeting-item .daily-main > strong,
#meetingsView .meeting-list-panel .daily-meeting-item .daily-main > small {
  position: static !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}

#dashboardView .daily-meeting-item .daily-main > small,
#meetingsView .meeting-list-panel .daily-meeting-item .daily-main > small {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#dashboardView .daily-meeting-item .meeting-detail-extra,
#meetingsView .meeting-list-panel .daily-meeting-item .meeting-detail-extra {
  display: none !important;
  position: static !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

#dashboardView .daily-meeting-item.is-selected,
#meetingsView .meeting-list-panel .daily-meeting-item.is-selected {
  min-height: calc(var(--final-card-height) + 88px) !important;
  height: auto !important;
  max-height: none !important;
  padding: var(--final-card-padding-y) var(--final-card-padding-x) !important;
  border-color: var(--calm-border-strong) !important;
  background: var(--calm-row) !important;
  overflow: hidden !important;
}

#dashboardView .daily-meeting-item.is-selected .meeting-detail-extra,
#meetingsView .meeting-list-panel .daily-meeting-item.is-selected .meeting-detail-extra {
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
  margin-top: 4px !important;
  padding: 0 !important;
  border: 0 !important;
}

#dashboardView .daily-meeting-item.is-selected .meeting-detail-extra small,
#dashboardView .daily-meeting-item.is-selected .meeting-detail-extra p,
#meetingsView .meeting-list-panel .daily-meeting-item.is-selected .meeting-detail-extra small,
#meetingsView .meeting-list-panel .daily-meeting-item.is-selected .meeting-detail-extra p {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--muted) !important;
  font-size: var(--type-caption) !important;
  font-weight: 620 !important;
  line-height: 1.35 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  transform: none !important;
}

#meetingsView .meeting-list-panel .daily-meeting-item > .meeting-actions,
#meetingsView .meeting-list-panel .daily-meeting-item .daily-main > .meeting-actions {
  display: none !important;
}

#meetingsView .meeting-list-panel .daily-meeting-item .meeting-detail-extra .meeting-actions {
  display: none !important;
  position: static !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}

#meetingsView .meeting-list-panel .daily-meeting-item.is-selected .meeting-detail-extra .meeting-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-top: 4px !important;
}

#meetingsView .meeting-list-panel .daily-meeting-item.is-selected .meeting-detail-extra .meeting-actions button {
  position: static !important;
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  transform: none !important;
}

/* Calm system 55: the same inline meeting actions in dashboard cards. */
#dashboardView .daily-meeting-item .meeting-detail-extra .meeting-actions {
  display: none !important;
  position: static !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}

#dashboardView .daily-meeting-item.is-selected .meeting-detail-extra .meeting-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-top: 4px !important;
}

#dashboardView .daily-meeting-item.is-selected .meeting-detail-extra .meeting-actions button {
  position: static !important;
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  transform: none !important;
}

/* Calm system 56: restore real inner offset for expanded meeting cards. */
#dashboardView .daily-meeting-item,
#meetingsView .meeting-list-panel .daily-meeting-item {
  --meeting-card-pad-x: 22px;
  --meeting-card-pad-y: 16px;
  display: block !important;
  height: auto !important;
  max-height: none !important;
  padding: var(--meeting-card-pad-y) var(--meeting-card-pad-x) !important;
  min-height: var(--final-card-height) !important;
}

#dashboardView .daily-meeting-item.is-selected,
#meetingsView .meeting-list-panel .daily-meeting-item.is-selected {
  display: block !important;
  height: max-content !important;
  max-height: none !important;
  padding: var(--meeting-card-pad-y) var(--meeting-card-pad-x) !important;
  min-height: max-content !important;
}

#dashboardView .daily-meeting-item .daily-main,
#meetingsView .meeting-list-panel .daily-meeting-item .daily-main,
#dashboardView .daily-meeting-item.is-selected .daily-main,
#meetingsView .meeting-list-panel .daily-meeting-item.is-selected .daily-main {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  height: auto !important;
  max-height: none !important;
  width: 100% !important;
  max-width: 100% !important;
  gap: 8px !important;
}

#dashboardView .daily-meeting-item .daily-main > strong,
#meetingsView .meeting-list-panel .daily-meeting-item .daily-main > strong {
  padding: 0 !important;
  line-height: 1.18 !important;
}

#dashboardView .daily-meeting-item .daily-main > small,
#meetingsView .meeting-list-panel .daily-meeting-item .daily-main > small {
  padding: 0 !important;
  line-height: 1.32 !important;
}

#dashboardView .daily-meeting-item.is-selected .meeting-detail-extra,
#meetingsView .meeting-list-panel .daily-meeting-item.is-selected .meeting-detail-extra {
  gap: 8px !important;
  margin-top: 10px !important;
  padding: 0 !important;
  border: 0 !important;
}

#dashboardView .daily-meeting-item.is-selected .meeting-detail-extra small,
#dashboardView .daily-meeting-item.is-selected .meeting-detail-extra p,
#meetingsView .meeting-list-panel .daily-meeting-item.is-selected .meeting-detail-extra small,
#meetingsView .meeting-list-panel .daily-meeting-item.is-selected .meeting-detail-extra p {
  padding: 0 !important;
  line-height: 1.36 !important;
}

#dashboardView .daily-meeting-item.is-selected .meeting-detail-extra .meeting-actions,
#meetingsView .meeting-list-panel .daily-meeting-item.is-selected .meeting-detail-extra .meeting-actions {
  width: 100% !important;
  margin-top: 12px !important;
  gap: 12px !important;
}

#dashboardView .daily-meeting-item.is-selected .meeting-detail-extra .meeting-actions button,
#meetingsView .meeting-list-panel .daily-meeting-item.is-selected .meeting-detail-extra .meeting-actions button {
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
}

@media (max-width: 760px) {
  #dashboardView .daily-meeting-item,
  #meetingsView .meeting-list-panel .daily-meeting-item {
    --meeting-card-pad-x: 18px;
    --meeting-card-pad-y: 14px;
  }
}

/* Calm system 60: let closed meeting cards breathe when the summary wraps. */
#dashboardView .daily-meeting-item:not(.is-selected),
#meetingsView .meeting-list-panel .daily-meeting-item:not(.is-selected) {
  --meeting-card-pad-y: 19px;
  height: max-content !important;
  min-height: var(--final-card-height) !important;
}

#dashboardView .daily-meeting-item:not(.is-selected) .daily-main,
#meetingsView .meeting-list-panel .daily-meeting-item:not(.is-selected) .daily-main {
  gap: 9px !important;
}

#dashboardView .daily-meeting-item:not(.is-selected) .daily-main > small,
#meetingsView .meeting-list-panel .daily-meeting-item:not(.is-selected) .daily-main > small {
  line-height: 1.36 !important;
}

@media (max-width: 760px) {
  #dashboardView .daily-meeting-item:not(.is-selected),
  #meetingsView .meeting-list-panel .daily-meeting-item:not(.is-selected) {
    --meeting-card-pad-y: 17px;
  }
}

/* Calm system 62: match the meeting note-to-submit breathing with work entry. */
#meetingsView .meeting-form-note-row {
  gap: 20px !important;
}

/* Calm system 63: compact project status/actions into one 2 x 4 rhythm. */
#projectsView .status-cell {
  overflow: visible !important;
}

#projectsView .status-cell .project-column-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-content: start !important;
  align-items: stretch !important;
  justify-items: stretch !important;
  gap: 8px 10px !important;
  width: min(100%, 390px) !important;
  max-width: 390px !important;
  margin-left: auto !important;
}

#projectsView .status-cell .project-column-list .row-actions {
  display: contents !important;
}

#projectsView .status-cell .project-column-list > .status,
#projectsView .status-cell .project-column-list > .pin-action,
#projectsView .status-cell .project-column-list > .coordination-phase-action,
#projectsView .status-cell .project-column-list > .project-detail-action,
#projectsView .status-cell .project-column-list > .inline-action,
#projectsView .status-cell .project-column-list .row-actions button {
  box-sizing: border-box !important;
  grid-column: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: var(--system-pill-radius) !important;
  font-size: var(--type-action) !important;
  line-height: 1.1 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#projectsView .status-cell .project-column-list > .status {
  justify-self: stretch !important;
  justify-content: center !important;
  text-transform: uppercase !important;
}

@media (max-width: 980px) {
  #projectsView .status-cell .project-column-list {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Calm system 65: page title lives in the same calm panel language as the app cards. */
.topbar {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: stretch !important;
  gap: var(--system-gap) !important;
  min-height: 0 !important;
  margin: 0 0 22px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.topbar .view-title-group {
  box-sizing: border-box !important;
  display: grid !important;
  align-content: center !important;
  align-items: center !important;
  justify-content: stretch !important;
  gap: 7px !important;
  min-width: 0 !important;
  min-height: 92px !important;
  width: 100% !important;
  padding: 22px 26px !important;
  border: 1px solid var(--calm-border) !important;
  border-radius: var(--system-panel-radius) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),
    var(--calm-panel) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.18) !important;
}

.topbar .view-title-group h1,
.topbar #viewTitle {
  margin: 0 !important;
  color: var(--ink) !important;
  font-family: var(--font-display) !important;
  font-size: var(--type-page-title) !important;
  font-weight: 780 !important;
  line-height: var(--leading-tight) !important;
}

.topbar .time-top-summary {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 0 9px !important;
  min-width: 0 !important;
  margin: 0 !important;
  color: var(--muted) !important;
  font-family: var(--font-ui) !important;
  font-size: var(--type-caption) !important;
  font-weight: 650 !important;
  line-height: 1.32 !important;
}

.topbar .time-top-summary.hidden {
  display: none !important;
}

.topbar .time-top-summary::before {
  content: none !important;
}

.topbar .time-top-summary strong {
  display: inline-flex !important;
  align-items: center !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  color: inherit !important;
  background: transparent !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  white-space: nowrap !important;
}

.topbar .time-top-summary strong + strong::before {
  content: "·" !important;
  margin: 0 9px 0 0 !important;
  color: rgba(247, 244, 236, 0.38) !important;
  font-weight: inherit !important;
}

@media (max-width: 980px) {
  .topbar {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .topbar .view-title-group {
    min-height: 84px !important;
    padding: 20px 22px !important;
  }
}

/* Calm system 66: page titles sit free in the layout, no panel box around them. */
.topbar {
  align-items: center !important;
  margin: 0 0 var(--system-gap) !important;
}

.topbar .view-title-group {
  min-height: 0 !important;
  padding: 10px 2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

@media (max-width: 980px) {
  .topbar .view-title-group {
    min-height: 0 !important;
    padding: 6px 2px !important;
  }
}

/* Calm system 66: work and meeting forms fill their panel height; spare height
   flows into the note textarea so the submit button always sits at the bottom,
   aligned with the calendar panel next to it. No stray gaps between rows. */
#meetingsView .form-panel,
#reportsView .form-panel {
  grid-template-rows: auto auto minmax(0, 1fr) !important;
  align-content: stretch !important;
  align-items: stretch !important;
}

#meetingsView .meeting-form-fields,
#reportsView .time-form-fields {
  align-content: start !important;
}

#meetingsView .meeting-form-note-row,
#reportsView .time-form-note-row {
  grid-template-rows: minmax(0, 1fr) auto !important;
  gap: var(--system-gap-sm) !important;
  align-items: stretch !important;
  align-self: stretch !important;
  height: 100% !important;
  min-height: 0 !important;
}

#meetingsView .meeting-form-note-row > label,
#reportsView .time-form-note-row > label {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  align-content: stretch !important;
  gap: 8px !important;
}

#meetingsView .meeting-form-note-row textarea,
#reportsView .time-form-note-row textarea {
  height: 100% !important;
  min-height: 104px !important;
  max-height: none !important;
  resize: none !important;
}

/* Calm system 67: one shared rhythm for entry forms + identical calendar text
   across Práce (work) and Schůzky (meetings). One gap value everywhere. */
:root {
  --form-row-gap: 16px;
}

/* Same vertical rhythm between every form row in both entry forms. */
#meetingsView #meetingForm,
#reportsView #timeForm,
#meetingsView .form-panel,
#reportsView .form-panel {
  gap: var(--form-row-gap) !important;
  row-gap: var(--form-row-gap) !important;
}

#meetingsView .meeting-form-fields,
#reportsView .time-form-fields {
  row-gap: var(--form-row-gap) !important;
}

/* The gap between the "Co se má řešit" textarea and the submit button
   equals the field-to-field gap (same distance as Klient -> Účastníci). */
#meetingsView .meeting-form-note-row,
#reportsView .time-form-note-row {
  gap: var(--form-row-gap) !important;
  row-gap: var(--form-row-gap) !important;
}

/* Every field label uses the same label -> control gap, so "Datum" and the
   other labels sit at the same rhythm in both forms. */
#meetingsView .meeting-form-fields > label,
#meetingsView .meeting-form-fields > .calendar-field,
#meetingsView .meeting-form-fields > .time-picker-field,
#reportsView .time-form-fields > label,
#reportsView .time-form-fields > .calendar-field,
#meetingsView .meeting-form-note-row > label,
#reportsView .time-form-note-row > label {
  gap: 8px !important;
}

/* --- Calendars: identical day number in both views --- */
#reportsView #hoursMonthCalendar .hours-calendar-day strong,
#meetingsView .meeting-month-calendar .hours-calendar-day strong {
  color: var(--muted) !important;
  font-family: var(--font-ui) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  top: 9px !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

/* --- Calendars: identical value (hours / meeting count), same place --- */
#reportsView #hoursMonthCalendar .hours-calendar-day span,
#meetingsView .meeting-month-calendar .meeting-calendar-count {
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transform: translateY(6px) !important;
  color: var(--ink) !important;
  font-family: var(--font-number) !important;
  font-size: 15px !important;
  font-weight: 780 !important;
  line-height: 1 !important;
  pointer-events: none !important;
}

/* Calm system 68: one dropdown design everywhere + calendar aligned to the form.
   - selects look like the Účastníci expander (same field + same chevron)
   - weekday row (Po Út St...) reads like the DATUM / ČAS labels
   - calendar header height matches the form header, so "Po Út St" lines up with
     "DATUM ČAS" and the day cells line up with the Datum / Čas inputs. */
:root {
  --chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6L8 10.5L12.5 6' fill='none' stroke='%23b8b4a9' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Selects share the exact field look of the participants expander — everywhere. */
.app-shell select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  min-height: var(--system-field-height) !important;
  height: var(--system-field-height) !important;
  padding: 0 44px 0 18px !important;
  border: 1px solid var(--calm-border-strong) !important;
  border-radius: var(--system-field-radius) !important;
  background-color: var(--calm-field) !important;
  background-image: var(--chevron-down) !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  background-size: 16px 16px !important;
  color: var(--ink) !important;
  font-family: var(--font-ui) !important;
  font-size: var(--type-body) !important;
  font-weight: 760 !important;
}

/* Same crisp chevron on the Účastníci expander (replaces the letter "v"). */
#meetingsView .meeting-participants-field > summary::after {
  content: "" !important;
  width: 16px !important;
  height: 16px !important;
  background: var(--chevron-down) center / 16px 16px no-repeat !important;
  transition: transform 0.16s ease !important;
}
#meetingsView .meeting-participants-field[open] > summary::after {
  transform: rotate(180deg) !important;
}

/* Weekday header row reads like the DATUM / ČAS field labels. */
#meetingsView .hours-calendar-weekdays span,
#reportsView .hours-calendar-weekdays span {
  color: var(--muted) !important;
  font-family: var(--font-ui) !important;
  font-size: 11px !important;
  font-weight: 760 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
}

/* Month prev / next: same rounded control, same muted chevron, left & right. */
#meetingsView .hours-calendar-head button,
#reportsView .hours-calendar-head button {
  width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  border: 1px solid var(--calm-border-strong) !important;
  border-radius: 999px !important;
  background: var(--calm-field) !important;
  color: var(--muted) !important;
  font-size: 18px !important;
  line-height: 1 !important;
}
#meetingsView .hours-calendar-head button:hover,
#reportsView .hours-calendar-head button:hover {
  color: var(--ink) !important;
  border-color: var(--calm-border-strong) !important;
  background: var(--calm-row-hover) !important;
}

/* Calendar header matches the form header height, so the weekday row aligns
   with the DATUM / ČAS labels and the day grid aligns with the input fields. */
#meetingsView .hours-calendar-head,
#reportsView .hours-calendar-head {
  min-height: 45px !important;
  align-items: center !important;
  margin: 0 0 16px !important;
}

/* Calm system 69: identical form-header rhythm in Práce and Schůzky, so the
   DATUM/PROJEKT labels line up with the weekday row and nothing jumps when
   switching tabs. Both heads: no bottom margin, same 12px bottom padding. */
#meetingsView .form-panel > .panel-head,
#reportsView .form-panel > .panel-head {
  margin: 0 !important;
  padding: 0 0 12px !important;
}

/* Calm system 70: deterministic textarea -> button gap in both entry forms.
   The textarea used to overflow its label box by a few pixels (box-sizing),
   which made the gap differ between Práce and Schůzky. Pin it down so the gap
   is exactly the note-row gap (16px) in both, and the button never jumps. */
#meetingsView .meeting-form-note-row textarea,
#reportsView .time-form-note-row textarea {
  box-sizing: border-box !important;
  margin: 0 !important;
  min-height: 0 !important;
}

#meetingsView .meeting-form-note-row > label,
#reportsView .time-form-note-row > label {
  min-height: 0 !important;
}

#meetingsView .meeting-form-actions,
#reportsView .time-form-actions {
  grid-auto-rows: var(--system-action-height) !important;
  align-items: end !important;
}

#meetingsView .meeting-form-actions > button,
#reportsView .time-form-actions > button {
  height: var(--system-action-height) !important;
  min-height: var(--system-action-height) !important;
  max-height: var(--system-action-height) !important;
  align-self: end !important;
  margin: 0 !important;
}

/* Calm system 71: meeting list cards are compact and expand in place on click.
   Content is anchored to the top in BOTH states, with the same padding, so the
   date/time never moves when expanding. No divider line inside the card. */
#meetingsView .meeting-list-panel .daily-meeting-item {
  min-height: 0 !important;
  height: auto !important;
  padding: 14px 16px !important;
  align-items: start !important;
}

/* The summary line (direct child) stays a single line in BOTH states, so it
   never reflows / jumps when expanding. The full text lives in the detail. */
#meetingsView .meeting-list-panel .daily-meeting-item .daily-main > small {
  -webkit-line-clamp: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#meetingsView .meeting-list-panel .daily-meeting-item:not(.is-selected) .meeting-detail-extra,
#meetingsView .meeting-list-panel .daily-meeting-item:not(.is-selected) .meeting-actions {
  display: none !important;
}

/* Expanded (clicked): same top padding, so the date stays put; detail grows
   below. No divider line. */
#meetingsView .meeting-list-panel .daily-meeting-item.is-selected {
  align-items: start !important;
  padding: 14px 16px !important;
}

#meetingsView .meeting-list-panel .daily-meeting-item.is-selected .meeting-detail-extra small,
#meetingsView .meeting-list-panel .daily-meeting-item.is-selected .meeting-detail-extra p {
  white-space: normal !important;
  -webkit-line-clamp: unset !important;
}

#meetingsView .meeting-list-panel .daily-meeting-item.is-selected .meeting-detail-extra {
  display: grid !important;
  gap: 6px !important;
  margin-top: 8px !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}

#meetingsView .meeting-list-panel .daily-meeting-item.is-selected .meeting-actions {
  display: flex !important;
  gap: 8px !important;
  margin-top: 2px !important;
}

/* Calm system 72: work entries (Práce) use the same card layout as the meeting
   cards. Collapsed = date (header) + project + hours; clicked = Fáze / Popis
   práce + Upravit / Smazat. Single column, top-anchored, no divider. */
#reportsView .time-self-entries-panel .time-entry-item {
  display: block !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 14px 16px !important;
  cursor: pointer !important;
}

#reportsView .time-self-entries-panel .time-entry-item .time-entry-main {
  display: grid !important;
  gap: 4px !important;
  min-width: 0 !important;
}

#reportsView .time-self-entries-panel .time-entry-item .time-entry-title-row {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 12px !important;
  min-width: 0 !important;
}

/* Date reads as the card header, exactly like the meeting date/time. */
#reportsView .time-self-entries-panel .time-entry-item .time-entry-title-row > strong:first-child {
  color: var(--ink) !important;
  font-family: var(--font-display) !important;
  font-size: var(--type-card-title) !important;
  font-weight: 780 !important;
}

#reportsView .time-self-entries-panel .time-entry-item .time-entry-hours {
  flex: none !important;
  color: var(--ink) !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums !important;
}

/* Project summary: one line in both states, so it never reflows. */
#reportsView .time-self-entries-panel .time-entry-item .time-entry-summary {
  color: var(--muted) !important;
  font-family: var(--font-ui) !important;
  font-size: var(--type-body) !important;
  font-weight: 520 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Detail (Fáze / Popis práce / actions) hidden until the card is expanded. */
#reportsView .time-self-entries-panel .time-entry-item:not(.is-selected) .time-entry-extra {
  display: none !important;
}

#reportsView .time-self-entries-panel .time-entry-item.is-selected .time-entry-extra {
  display: block !important;
  margin-top: 8px !important;
}

#reportsView .time-self-entries-panel .time-entry-item.is-selected .time-entry-extra p {
  display: block !important;
  grid-column: auto !important;
  grid-row: auto !important;
  margin: 0 0 6px !important;
  color: var(--muted) !important;
  font-family: var(--font-ui) !important;
  font-size: var(--type-caption) !important;
  font-weight: 620 !important;
  line-height: 1.36 !important;
}

#reportsView .time-self-entries-panel .time-entry-item.is-selected .time-entry-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-column: auto !important;
  grid-row: auto !important;
  width: 100% !important;
  gap: 12px !important;
  margin-top: 10px !important;
}

#reportsView .time-self-entries-panel .time-entry-item.is-selected .time-entry-actions button {
  width: 100% !important;
  min-width: 0 !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 12px !important;
}

/* Calm system 73: unified detail labels across meetings and work entries. */
.detail-label {
  color: var(--ink) !important;
  font-weight: 700 !important;
}

/* Calm system 74: meeting list cards match the work-entry card size exactly
   (same natural height, padding and inner gap). */
#meetingsView .meeting-list-panel .meeting-list .daily-meeting-item {
  min-height: 0 !important;
  padding: 14px 16px !important;
}

#meetingsView .meeting-list-panel .meeting-list .daily-meeting-item .daily-main {
  gap: 4px !important;
}

/* Calm system 75: the last-column list panels (Nejbližší schůzky / Moje práce
   v měsíci) share the same header height, so the first card starts at the same
   level in both — aligned with the calendar day rows on the left. */
#meetingsView .meeting-list-panel > .panel-head,
#reportsView .time-self-entries-panel > .panel-head {
  min-height: 62px !important;
  align-items: flex-start !important;
  margin: 0 0 16px !important;
}

/* Calm system 76: coordination panel headers keep their natural height (never
   shrink), so all three line up and the scrolling lists no longer slide under
   the titles. Subtitles stay on one line for a uniform header height. */
#coordinationView .coordination-control-panel > .panel-head,
#coordinationView .coordination-status-panel > .panel-head,
#coordinationView .coordination-timeline-panel > .panel-head {
  flex: 0 0 auto !important;
  min-height: 50px !important;
  margin: 0 0 16px !important;
  padding: 0 !important;
}

#coordinationView .coordination-control-panel > .panel-head > div,
#coordinationView .coordination-status-panel > .panel-head > div,
#coordinationView .coordination-timeline-panel > .panel-head > div {
  display: grid !important;
  gap: 4px !important;
  min-width: 0 !important;
}

#coordinationView .coordination-control-panel > .panel-head span,
#coordinationView .coordination-status-panel > .panel-head span,
#coordinationView .coordination-timeline-panel > .panel-head span {
  display: block !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* The metrics column scrolls like the other two instead of pushing the header. */
#coordinationView .coordination-status-panel .coordination-metrics {
  min-height: 0 !important;
  overflow-y: auto !important;
}

/* Calm system 77: coordination intro matches Práce / Schůzky — no divider lines
   under the titles or inside the cards, and the selected-project column fits
   its panel without a scrollbar. */
#coordinationView .panel-head {
  border-bottom: 0 !important;
}

#coordinationView .coordination-progress-card {
  border-bottom: 0 !important;
  gap: 10px !important;
}

/* Fit the metrics column without scrolling. */
#coordinationView .coordination-status-panel .coordination-metrics {
  overflow: visible !important;
  gap: 8px !important;
}

#coordinationView .coordination-metric {
  min-height: 80px !important;
  padding: 9px 12px !important;
  overflow: hidden !important;
}

/* Calm system 78: coordination metrics/progress typography follows the same
   scale as the rest of the app (15px card titles, 12px labels, consistent
   weights). */
/* Project name is the heading (like the left project cards); phase is the
   muted subtitle under it. */
#coordinationView .coordination-selected-project span {
  color: var(--ink) !important;
  font-family: var(--font-display) !important;
  font-size: var(--type-card-title) !important;
  font-weight: 780 !important;
}

#coordinationView .coordination-selected-project strong {
  color: var(--muted) !important;
  font-family: var(--font-ui) !important;
  font-size: var(--type-body) !important;
  font-weight: 520 !important;
}

#coordinationView .coordination-progress-head > div > span,
#coordinationView .coordination-metric > span,
#coordinationView .coordination-metric > small {
  color: var(--muted) !important;
  font-size: var(--type-caption) !important;
  font-weight: 560 !important;
}

#coordinationView .coordination-progress-head strong,
#coordinationView .coordination-metric > strong {
  font-family: var(--font-display) !important;
  font-size: var(--type-section-title) !important;
  font-weight: 760 !important;
  font-variant-numeric: tabular-nums !important;
}

/* Calm system 79: the timeline (Nejbližší termíny) starts at the same level as
   the project list and the selected-project column — no more offset. */
#coordinationView .coordination-timeline {
  margin-top: 12px !important;
}

/* Calm system 80: coordination "Přístup zaměstnanců" is a simple inline set of
   toggle chips (no dropdown, no overlay); clean empty state; card archive. */
#coordinationView .coordination-access-inline {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px 12px !important;
  margin: 0 !important;
  padding: 11px 14px !important;
  border: 1px solid var(--calm-border) !important;
  border-radius: var(--system-field-radius) !important;
  background: var(--calm-field) !important;
}

#coordinationView .coordination-access-label {
  color: var(--muted) !important;
  font-size: var(--type-caption) !important;
  font-weight: 620 !important;
}

#coordinationView .coordination-access-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  min-width: 0 !important;
}

#coordinationView .access-chip {
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 14px !important;
  border: 1px solid var(--calm-border-strong) !important;
  border-radius: var(--system-pill-radius) !important;
  background: transparent !important;
  color: var(--ink) !important;
  font-family: var(--font-ui) !important;
  font-size: var(--type-caption) !important;
  font-weight: 640 !important;
  cursor: pointer !important;
}

#coordinationView .access-chip.is-on {
  border-color: var(--accent) !important;
  background: var(--soft) !important;
  color: var(--accent-dark) !important;
}

#coordinationView .coordination-access-empty {
  color: var(--muted) !important;
  font-size: var(--type-caption) !important;
}

/* Clean empty state for the selected-project column. */
#coordinationView .coordination-empty-state {
  display: grid !important;
  align-content: center !important;
  min-height: 120px !important;
  padding: 24px !important;
  border: 1px dashed var(--calm-border) !important;
  border-radius: var(--system-panel-radius) !important;
  color: var(--muted) !important;
  font-size: var(--type-body) !important;
  text-align: center !important;
}

/* Calm system 81: the selected-project column fills its panel with one uniform
   gap; the progress card absorbs the slack so the last stat ("Po termínu")
   ends at the bottom, level with the timeline column. */
/* The selected-project column: progress card on top, the three stats in a row
   (spread across the width, not stacked), access chips at the bottom. Much
   less dense — no scrollbar. */
#coordinationView .coordination-status-panel .coordination-metrics {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: auto auto 1fr !important;
  gap: 12px !important;
  align-content: stretch !important;
  overflow: visible !important;
}

#coordinationView .coordination-progress-card {
  grid-column: 1 / -1 !important;
  align-self: start !important;
  justify-content: flex-start !important;
}

#coordinationView .coordination-metrics > .coordination-metric {
  align-self: stretch !important;
  min-height: var(--coord-card-h) !important;
}

#coordinationView .coordination-metrics > .coordination-access-inline {
  grid-column: 1 / -1 !important;
  align-self: end !important;
}

/* Calm system 82: richer selected-project card (client / deadline / hours) and
   a project list that fills its panel so the last row lines up with the bottom
   of the other columns when everything fits. */
#coordinationView .coordination-project-facts {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin-top: 2px !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}

#coordinationView .coordination-project-facts > div {
  display: grid !important;
  gap: 3px !important;
  min-width: 0 !important;
}

/* Spread the three facts edge to edge: client left, deadline centred, hours
   right — mirrors the "Stav koordinace ... 1/6" row below it. */
#coordinationView .coordination-project-facts > div:nth-child(2) {
  justify-items: center !important;
  text-align: center !important;
}

#coordinationView .coordination-project-facts > div:nth-child(3) {
  justify-items: end !important;
  text-align: right !important;
}

#coordinationView .coordination-project-facts span {
  color: var(--muted) !important;
  font-size: var(--type-caption) !important;
  font-weight: 560 !important;
}

#coordinationView .coordination-project-facts strong {
  color: var(--ink) !important;
  font-family: var(--font-ui) !important;
  font-size: var(--type-body) !important;
  font-weight: 680 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Project list fills the panel; rows stretch to align the last row at the
   bottom when they fit, otherwise the list scrolls. */
/* Projects are a single-column list, same width as the timeline column. */
#coordinationView .coordination-context-grid {
  grid-template-columns: 1fr !important;
  grid-auto-rows: auto !important;
  align-content: start !important;
  gap: 8px !important;
}

#coordinationView .coordination-context-card {
  min-height: 0 !important;
}

/* Calm system 83: typography consolidation — every meta/caption text in the
   coordination panels uses the SAME token, so "same thing" never shows a
   different size (e.g. "12 po termínu" vs "4 po termínu"). */
#coordinationView .coordination-progress-foot,
#coordinationView .coordination-progress-foot span,
#coordinationView .coordination-progress-head > em,
#coordinationView .coordination-metric > span,
#coordinationView .coordination-metric > small {
  font-size: var(--type-caption) !important;
  font-weight: 560 !important;
  line-height: 1.35 !important;
}

/* Card titles / section labels share their tokens too. */
#coordinationView .coordination-progress-head > div > span {
  font-size: var(--type-caption) !important;
  font-weight: 560 !important;
}

/* Calm system 84: project cards as full-width list rows (number | name+phase |
   stats+progress), same width as the timeline column. */
#coordinationView .coordination-context-grid .coordination-context-card {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) 190px !important;
  grid-template-rows: auto auto !important;
  grid-template-areas:
    "num name stats"
    "num phase bar" !important;
  align-items: center !important;
  gap: 4px 14px !important;
  height: auto !important;
  min-height: 60px !important;
  max-height: none !important;
  padding: 12px 16px !important;
  overflow: hidden !important;
  text-align: left !important;
}

#coordinationView .coordination-context-card > .coordination-card-progress {
  min-width: 0 !important;
}

#coordinationView .coordination-context-card > .coordination-card-number {
  grid-area: num !important;
  align-self: center !important;
}

#coordinationView .coordination-context-card > strong {
  grid-area: name !important;
  align-self: end !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: var(--type-card-title) !important;
  font-weight: 780 !important;
}

#coordinationView .coordination-context-card > small {
  grid-area: phase !important;
  align-self: start !important;
  color: var(--muted) !important;
  font-size: var(--type-caption) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#coordinationView .coordination-context-card > em {
  grid-area: stats !important;
  align-self: end !important;
  justify-self: end !important;
  max-width: 100% !important;
  text-align: right !important;
  color: var(--muted) !important;
  font-style: normal !important;
  font-size: var(--type-caption) !important;
  font-weight: 560 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#coordinationView .coordination-context-card > .coordination-card-progress {
  grid-area: bar !important;
  align-self: center !important;
  width: 100% !important;
}

/* Calm system 85: "Co je potřeba řešit" item — rebuilt clean. One clear
   deadline chip (no triplicated "X po termínu"), 4 tidy meta fields, actions in
   a calm row, one shared font scale. */
#coordinationView .coordination-item {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: start !important;
  padding: 16px 18px !important;
  border-radius: var(--system-row-radius) !important;
}

#coordinationView .coordination-item .coordination-check {
  margin: 2px 0 0 !important;
  align-self: start !important;
}

#coordinationView .coordination-item .coordination-main {
  display: grid !important;
  gap: 11px !important;
  min-width: 0 !important;
}

#coordinationView .coordination-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 14px !important;
}

#coordinationView .coordination-head-titles {
  display: grid !important;
  gap: 5px !important;
  min-width: 0 !important;
}

#coordinationView .coordination-item .coordination-type,
#coordinationView .coordination-meta span b {
  font-size: var(--type-label) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  color: var(--muted) !important;
}

#coordinationView .coordination-head-titles > strong {
  color: var(--ink) !important;
  font-family: var(--font-display) !important;
  font-size: var(--type-card-title) !important;
  font-weight: 780 !important;
  line-height: 1.25 !important;
}

#coordinationView .coordination-item .coordination-meta {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
  gap: 8px 22px !important;
}
#coordinationView .coordination-item .coordination-meta span {
  display: grid !important;
  gap: 2px !important;
  min-width: 0 !important;
  color: var(--ink) !important;
  font-size: var(--type-caption) !important;
  font-weight: 560 !important;
  line-height: 1.35 !important;
  white-space: normal !important;
  overflow: visible !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}
#coordinationView .coordination-item .coordination-meta span b {
  display: block !important;
}

#coordinationView .coordination-item .coordination-deadline-track {
  height: 6px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

#coordinationView .coordination-item > .coordination-main > p,
#coordinationView .coordination-item .coordination-main p {
  margin: 0 !important;
  color: var(--muted) !important;
  font-size: var(--type-caption) !important;
  font-weight: 560 !important;
  line-height: 1.4 !important;
}

#coordinationView .coordination-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 3px !important;
}
#coordinationView .coordination-actions button {
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 14px !important;
  border-radius: var(--system-pill-radius) !important;
  font-size: var(--type-caption) !important;
  font-weight: 640 !important;
}

/* Calm system 86: "Co je potřeba řešit" items sit in two columns (they don't
   need the full width), so the working list is half as tall. Collapses to one
   column on narrower screens. */
#coordinationView .coordination-group-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-content: start !important;
}

@media (max-width: 1180px) {
  #coordinationView .coordination-group-list {
    grid-template-columns: 1fr !important;
  }
}

/* Calm system 87: unified card height across the coordination columns.
   Left project rows, right timeline rows and the middle stat cards all share
   one height module, so the columns read as one grid. */
:root {
  --coord-card-h: 94px;
}

#coordinationView .coordination-context-grid .coordination-context-card {
  min-height: var(--coord-card-h) !important;
  align-content: center !important;
}

#coordinationView .coordination-timeline-item {
  min-height: var(--coord-card-h) !important;
  gap: 2px !important;
  padding: 11px 16px !important;
  align-content: center !important;
}

/* Calm system 88: colour the whole coordination item by deadline status so it
   is obvious at a glance (red = po termínu, amber = blíží se), plus a clear
   highlight when you jump to it from the deadline list. */
#coordinationView .coordination-item {
  border: 1px solid var(--calm-border) !important;
  border-left: 4px solid rgba(255, 255, 255, 0.14) !important;
  background: var(--calm-panel) !important;
  transition: box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease !important;
}

#coordinationView .coordination-item.is-late {
  border-color: rgba(255, 92, 103, 0.4) !important;
  border-left: 4px solid var(--brand-red) !important;
  background: linear-gradient(0deg, rgba(255, 92, 103, 0.11), rgba(255, 92, 103, 0.11)), var(--calm-panel) !important;
}

#coordinationView .coordination-item.is-done {
  border-left: 4px solid rgba(122, 170, 110, 0.7) !important;
  opacity: 0.82 !important;
}

/* Jump-to highlight: a clear ring for ~1.8 s after clicking a deadline. */
#coordinationView .coordination-item.is-focused {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px var(--accent), 0 0 0 7px rgba(94, 168, 255, 0.28) !important;
  scroll-margin-top: 90px !important;
}

/* Calm system 89: colour the right-hand timeline items by status too. */
#coordinationView .coordination-timeline-item {
  border-left: 4px solid rgba(255, 255, 255, 0.14) !important;
  transition: border-color 0.18s ease, background 0.18s ease !important;
}
#coordinationView .coordination-timeline-item.is-late {
  border-color: rgba(255, 92, 103, 0.4) !important;
  border-left: 4px solid var(--brand-red) !important;
  background: linear-gradient(0deg, rgba(255, 92, 103, 0.11), rgba(255, 92, 103, 0.11)), var(--calm-panel) !important;
}
#coordinationView .coordination-timeline-item.is-done {
  border-left: 4px solid rgba(122, 170, 110, 0.7) !important;
  opacity: 0.82 !important;
}

/* Calm system 90: "Co je potřeba řešit" as compact full-width rows — name first,
   then druh, facts, note, the time axis with its deadline label, and actions. */
#coordinationView .coordination-group-list {
  grid-template-columns: 1fr !important;
  gap: 8px !important;
}

#coordinationView .coordination-item {
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  padding: 14px 18px !important;
}

#coordinationView .coordination-item .coordination-main {
  display: grid !important;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 2.5fr) 160px auto !important;
  grid-template-areas:
    "titles meta axis actions"
    "titles note axis actions" !important;
  align-items: center !important;
  gap: 8px 22px !important;
}

/* Name first (heading), druh under it. */
#coordinationView .coordination-item .coordination-head-titles {
  grid-area: titles !important;
  display: grid !important;
  gap: 3px !important;
  min-width: 0 !important;
}
#coordinationView .coordination-item .coordination-head-titles > strong {
  order: 0 !important;
  color: var(--ink) !important;
  font-family: var(--font-display) !important;
  font-size: var(--type-card-title) !important;
  font-weight: 780 !important;
  line-height: 1.25 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}
#coordinationView .coordination-item .coordination-head-titles > .coordination-type {
  order: 1 !important;
}

#coordinationView .coordination-item .coordination-meta {
  grid-area: meta !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 4px 16px !important;
}
#coordinationView .coordination-item .coordination-meta span {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}
#coordinationView .coordination-item .coordination-meta span b { display: inline !important; margin-right: 4px !important; }

/* Komentář sits under the three meta columns (frees the title column). Label on
   top like the meta fields, text clamped to two lines below it. */
#coordinationView .coordination-item .coordination-note {
  grid-area: note !important;
  display: block !important;
  margin: 0 !important;
  min-width: 0 !important;
}
#coordinationView .coordination-item .coordination-note > b {
  display: block !important;
  margin-bottom: 2px !important;
  color: var(--muted) !important;
  font-size: var(--type-label) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
}
#coordinationView .coordination-item .coordination-note > span {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  color: var(--ink) !important;
  font-size: var(--type-caption) !important;
  font-weight: 560 !important;
  line-height: 1.35 !important;
}
#coordinationView .coordination-item .coordination-note i { opacity: 0.6 !important; }

/* Time axis: the bar with its deadline label right underneath. */
#coordinationView .coordination-item .coordination-axis {
  grid-area: axis !important;
  display: grid !important;
  gap: 5px !important;
  align-content: center !important;
}
#coordinationView .coordination-item .coordination-deadline-track {
  align-self: center !important;
}
#coordinationView .coordination-item .coordination-deadline-label {
  font-size: var(--type-caption) !important;
  font-weight: 700 !important;
  color: var(--muted) !important;
  white-space: normal !important;
}
#coordinationView .coordination-item .coordination-deadline-label.is-late { color: #ffbcc4 !important; }
#coordinationView .coordination-item .coordination-deadline-label.is-done { color: #bfe3b6 !important; }

#coordinationView .coordination-item .coordination-actions {
  grid-area: actions !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 6px !important;
}
#coordinationView .coordination-item .coordination-actions .inline-action {
  width: 100% !important;
  justify-content: center !important;
  text-align: center !important;
  white-space: nowrap !important;
}

@media (max-width: 1340px) {
  #coordinationView .coordination-item .coordination-main {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 170px !important;
    grid-template-areas:
      "titles meta axis"
      "note   note actions" !important;
    gap: 8px 20px !important;
  }
}

@media (max-width: 980px) {
  #coordinationView .coordination-item .coordination-main {
    grid-template-columns: 1fr !important;
    grid-template-areas: "titles" "meta" "note" "axis" "actions" !important;
  }
}

/* Calm system 91: no divider line under coordination group headers (same as
   everywhere else — cards read fine without it). */
#coordinationView .coordination-group-head {
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Calm system 92: tidy the "Přidat položku" form into a clean grid, same rhythm
   as the work / meeting entry forms. */
#coordinationView .coordination-form {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  align-items: start !important;
}

#coordinationView .coordination-form > label {
  display: grid !important;
  align-content: start !important;
  gap: 8px !important;
  min-width: 0 !important;
  margin: 0 !important;
  color: var(--muted) !important;
  font-size: var(--type-label) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
}

#coordinationView .coordination-form > label input:not([type="checkbox"]),
#coordinationView .coordination-form > label select,
#coordinationView .coordination-form > label textarea,
#coordinationView .coordination-form .coordination-date-row > label input,
#coordinationView .coordination-form .coordination-date-row > label select {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
}

/* Calendar-display inputs must keep their raw ISO text invisible so only the
   formatted overlay span shows (otherwise "2026-02-23" bleeds through). Kept at
   higher specificity than the generic --ink field-colour rules above. */
#coordinationView .coordination-form > label input.calendar-display-input,
#coordinationView .coordination-form .coordination-date-row > label input.calendar-display-input {
  color: transparent !important;
  caret-color: transparent !important;
}

/* Full-width blocks: name, the compact date row, note and the actions. */
#coordinationView .coordination-form > .coordination-date-row,
#coordinationView .coordination-form > .coordination-note-field,
#coordinationView .coordination-form > .coordination-form-actions {
  grid-column: 1 / -1 !important;
}

/* Podáno / Lhůta / Výsledný termín sit in one tight three-up row — dates are
   short, so they don't need a full half-column each. */
#coordinationView .coordination-form > .coordination-date-row {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
  align-items: start !important;
}
#coordinationView .coordination-form .coordination-date-row > label {
  display: grid !important;
  align-content: start !important;
  gap: 8px !important;
  min-width: 0 !important;
  margin: 0 !important;
  color: var(--muted) !important;
  font-size: var(--type-label) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
}

#coordinationView .coordination-form > .coordination-note-field textarea {
  min-height: 84px !important;
  resize: vertical !important;
}

#coordinationView .coordination-form > .coordination-form-actions {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  margin-top: 4px !important;
}

/* Calm system 93: group header shows the overdue / approaching count. */
#coordinationView .coordination-group-late { color: #ffb0ba !important; font-weight: 700 !important; }
#coordinationView .coordination-group-soon { color: #FFC46A !important; font-weight: 700 !important; }

/* Calm system 94: archive lives in the selected-project header (top-right),
   not on the compact project rows (which it used to break). */
#coordinationView .coordination-selected-project {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
}
#coordinationView .coordination-selected-project-titles {
  display: grid !important;
  gap: 2px !important;
  min-width: 0 !important;
}
#coordinationView .coordination-archive-action {
  flex: none !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 14px !important;
  border-radius: var(--system-pill-radius) !important;
  font-size: var(--type-caption) !important;
  font-weight: 640 !important;
}

/* ================= Calm finance ================= */
/* The money list had a broken grid: the header used 7 columns but the rows fell
   back to a 5-column rule, so Částka + Smazat wrapped onto a second line and the
   delete button stretched full width. Pin header and rows to the SAME 7 columns
   and align everything to the shared calm rhythm. */
#financeView .money-list {
  display: grid !important;
  gap: 8px !important;
  padding: 10px !important;
  border-radius: var(--system-card-radius, 18px) !important;
}
#financeView .money-header,
#financeView .money-item {
  display: grid !important;
  grid-template-columns: 118px minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1fr) 96px 118px 88px !important;
  align-items: center !important;
  gap: 14px !important;
}
#financeView .money-header {
  padding: 8px 16px !important;
  color: var(--muted) !important;
  font-size: var(--type-label) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  background: transparent !important;
}
/* "ČÁSTKA" header must sit above the right-aligned amounts (6th column). */
#financeView .money-header > span:nth-child(6) {
  justify-self: end !important;
  text-align: right !important;
}
#financeView .money-item {
  min-height: 52px !important;
  padding: 8px 16px !important;
  border-radius: var(--system-row-radius, 14px) !important;
}
#financeView .money-item > span {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: var(--type-caption) !important;
}
#financeView .money-item .money-type {
  justify-self: start !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  font-size: var(--type-label) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  white-space: nowrap !important;
}
#financeView .money-item .money-description {
  color: var(--ink) !important;
  font-weight: 600 !important;
}
#financeView .money-item .money-amount {
  justify-self: end !important;
  padding: 0 !important;
  background: transparent !important;
  font-variant-numeric: tabular-nums !important;
  font-size: var(--type-action) !important;
  font-weight: 720 !important;
  white-space: nowrap !important;
}
#financeView .money-item .money-amount.positive { color: #8fe0a5 !important; }
#financeView .money-item .money-amount.negative { color: #ff9ba6 !important; }
#financeView .money-item .inline-action {
  justify-self: end !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 30px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  font-size: var(--type-caption) !important;
  white-space: nowrap !important;
}

/* Finance filter — one calm, symmetric block: a full-width segmented control
   with six equal segments, an even four-up field row, and an aligned footer. */
#financeView .finance-filter-bar {
  display: grid !important;
  gap: 16px !important;
  margin: 4px 0 !important;
  padding: 16px !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--system-card-radius, 18px) !important;
  background: rgba(255, 255, 255, 0.02) !important;
}
#financeView .finance-type-filter {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 6px !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
  padding: 4px !important;
  border-radius: 999px !important;
}
#financeView .finance-type-filter button {
  min-height: 34px !important;
  padding: 0 6px !important;
  border-radius: 999px !important;
  text-align: center !important;
  white-space: nowrap !important;
  font-size: var(--type-caption) !important;
  font-weight: 600 !important;
}
#financeView .finance-filter-fields {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto !important;
  gap: 14px !important;
  align-items: end !important;
}
/* "Vyčistit filtr" rides on the same row as the four selects (no extra footer
   row), so the filter block stays short. */
#financeView .finance-reset-cell {
  display: flex !important;
  align-items: flex-end !important;
}
#financeView .finance-reset-cell .ghost-action {
  min-height: var(--system-action-height, 40px) !important;
  padding: 0 16px !important;
  white-space: nowrap !important;
}
#financeView .finance-filter-fields label {
  display: grid !important;
  gap: 6px !important;
  min-width: 0 !important;
  margin: 0 !important;
  color: var(--muted) !important;
  font-size: var(--type-label) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
}
#financeView .finance-filter-fields label.hidden {
  display: none !important;
}
#financeView .finance-filter-fields select,
#financeView .finance-filter-fields input {
  margin: 0 !important;
  width: 100% !important;
  min-height: 40px !important;
  font-size: var(--type-caption) !important;
}

/* Cleaner finance: drop the divider lines. No border-bottom under panel titles,
   and the table header is plain label text (no boxed strip). */
#financeView .panel-head {
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
}
#financeView .money-header {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* ================= Calm closing (Uzávěrka) ================= */
/* Layout: people list down the left, and the right side split along its height —
   the selected person on top, their reports underneath. Done with grid areas so
   the markup stays a plain three-section grid. */
/* The whole block is one screenful, the same height Práce/Schůzky use, so the
   view doesn't grow with the number of people: the list scrolls inside. */
#closingView .closing-overview-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.75fr) !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  grid-template-areas:
    "people detail"
    "people report" !important;
  gap: var(--three-panel-gap, 16px) !important;
  align-items: stretch !important;
  height: var(--three-panel-height) !important;
  max-height: var(--three-panel-height) !important;
}
#closingView .closing-overview-grid > .closing-column-panel:nth-child(1) { grid-area: people !important; }
#closingView .closing-overview-grid > .closing-column-panel:nth-child(2) { grid-area: detail !important; }
#closingView .closing-overview-grid > .closing-column-panel:nth-child(3) { grid-area: report !important; }
#closingView .closing-overview-grid > .closing-column-panel {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: hidden !important;
}
/* The person card is only as tall as its fields; the report takes the rest. */
#closingView .closing-overview-grid > .closing-column-panel:nth-child(2) {
  grid-template-rows: auto auto !important;
}
@media (max-width: 1180px) {
  #closingView .closing-overview-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: "people" "detail" "report" !important;
    height: auto !important;
    max-height: none !important;
  }
  #closingView .closing-overview-grid > .closing-column-panel { overflow: visible !important; }
  #closingView .time-people-list { max-height: 420px !important; }
}

#closingView .panel-head {
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
}
#closingView .closing-col-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
}
#closingView .closing-col-head > div { min-width: 0 !important; }
#closingView .closing-col-head h2 {
  margin: 0 0 2px !important;
  font-family: var(--font-display) !important;
  font-size: var(--type-card-title) !important;
  font-weight: 780 !important;
}
#closingView .closing-col-head > div > span {
  display: block !important;
  color: var(--muted) !important;
  font-size: var(--type-caption) !important;
  line-height: 1.35 !important;
}
#closingView .closing-col-head .small-action,
#closingView .closing-col-head .danger-action { flex: none !important; }

/* Per-person rate & role editor: name + facts on top, then the three fields and
   the save button on one tidy line (they're short — no need to stack them). */
#closingView .closing-person-form {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto !important;
  grid-template-areas:
    "name  name  facts facts"
    "role  cost  from  save" !important;
  gap: 14px !important;
  align-content: start !important;
  align-items: end !important;
}
#closingView .closing-person-form > .closing-person-facts { grid-area: facts !important; }
#closingView .closing-person-form > .cpf-role { grid-area: role !important; }
#closingView .closing-person-form > .cpf-cost { grid-area: cost !important; }
#closingView .closing-person-form > .cpf-from { grid-area: from !important; }
#closingView .closing-person-form > .cpf-save { grid-area: save !important; }
@media (max-width: 900px) {
  #closingView .closing-person-form {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-areas:
      "name  facts"
      "role  cost"
      "from  save" !important;
  }
}
#closingView .closing-person-facts {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}
#closingView .closing-person-facts span {
  display: grid !important;
  gap: 3px !important;
  padding: 9px 11px !important;
  border-radius: var(--system-row-radius, 12px) !important;
  background: rgba(255, 255, 255, 0.035) !important;
  font-size: var(--type-action) !important;
  font-weight: 720 !important;
  color: var(--ink) !important;
}
#closingView .closing-person-facts b {
  font-size: var(--type-label) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  color: var(--muted) !important;
}
#closingView .closing-person-form > label {
  display: grid !important;
  gap: 6px !important;
  margin: 0 !important;
  color: var(--muted) !important;
  font-size: var(--type-label) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
}
#closingView .closing-person-form > label input,
#closingView .closing-person-form > label select {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
  min-height: 40px !important;
  width: 100% !important;
}
/* Keep the calendar's raw ISO value invisible so only the formatted overlay
   shows (otherwise "2026-02-13" bleeds through the label). */
#closingView .closing-person-form > label input.calendar-display-input {
  color: transparent !important;
  caret-color: transparent !important;
}
#closingView .closing-person-form .primary-action {
  margin-top: 0 !important;
  align-self: end !important;
  min-height: 40px !important;
  white-space: nowrap !important;
}
#closingView .closing-person-empty {
  color: var(--muted) !important;
  font-size: var(--type-caption) !important;
  line-height: 1.4 !important;
}

/* Full-width payroll-basis block below the three columns. */
#closingView .closing-below-panel {
  margin-top: 16px !important;
  padding: 16px !important;
  border: 1px solid rgba(247, 244, 236, 0.09) !important;
  border-radius: var(--radius-sm) !important;
  background: rgba(255, 255, 255, 0.035) !important;
}
#closingView .closing-below-panel .table-wrap { margin-top: 12px !important; }

/* No frames inside frames: the panel is the only card. Rows and tables sit
   flat on it, using the shared row radius instead of the big card radius. */
#closingView .time-people-list {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 8px !important;
  align-content: start !important;
  overflow-y: auto !important;
  min-height: 0 !important;
}
#closingView .time-person-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas:
    "role  hours"
    "name  hours" !important;
  align-items: center !important;
  gap: 1px 12px !important;
  width: 100% !important;
  min-height: 0 !important;
  padding: 10px 14px !important;
  border: 0 !important;
  border-radius: var(--system-row-radius, 14px) !important;
  background: rgba(255, 255, 255, 0.035) !important;
  text-align: left !important;
}
#closingView .time-person-card > span { grid-area: role !important; }
#closingView .time-person-card > strong {
  grid-area: name !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: var(--type-card-title) !important;
}
#closingView .time-person-card > small {
  grid-area: hours !important;
  justify-self: end !important;
  text-align: right !important;
  white-space: nowrap !important;
}
#closingView .time-person-card.active {
  background: rgba(94, 168, 255, 0.16) !important;
  border: 0 !important;
  box-shadow: inset 0 0 0 1px rgba(94, 168, 255, 0.4) !important;
}

/* The report table is inside the panel already — drop its duplicate frame. */
#closingView .closing-time-detail,
#closingView .closing-below-panel .table-wrap {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  min-height: 0 !important;
}
#closingView .closing-person-facts span {
  border-radius: var(--system-row-radius, 14px) !important;
}

/* ============================================================================
   UNIFIED THEME · palette D (Grafit + Indigo)
   Single source of truth, appended last so it overrides every earlier :root
   block and the scattered hardcoded gold. Colours/radii flow only from here.
   ========================================================================= */
:root {
  /* neutrals — graphite */
  --surface: #0C0C10; --surface-2: #121218; --bg: #0C0C10;
  --panel: rgba(24, 24, 31, 0.86); --panel-2: rgba(33, 33, 41, 0.92);
  --surface-glass: rgba(18, 18, 24, 0.80);
  --surface-row: rgba(255, 255, 255, 0.045); --surface-row-hover: rgba(255, 255, 255, 0.08);
  --sidebar: rgba(15, 15, 20, 0.92);
  --ink: #F2F1F7; --ink-soft: rgba(242, 241, 247, 0.82);
  --muted: rgba(242, 241, 247, 0.56); --muted-strong: rgba(242, 241, 247, 0.72);
  --line: rgba(242, 241, 247, 0.12); --line-strong: rgba(242, 241, 247, 0.20);
  --field: rgba(255, 255, 255, 0.055); --field-strong: rgba(255, 255, 255, 0.09);
  /* accent — indigo (fill darkened to #635EEC so white text clears WCAG AA 4.5:1) */
  --accent: #635EEC; --accent-hover: #554FE2; --accent-dark: #A5A2FA; --accent-tint: #A5A2FA; --on-accent: #ffffff;
  --soft: rgba(94, 168, 255, 0.16);
  --brand-gold: #635EEC; --action-gold: #635EEC; --action-gold-soft: rgba(94, 168, 255, 0.16);
  --brand-blue: #5AA9FF; --action-blue: #5AA9FF; --brand-red: #FF5C67; --brand-wine: #2a2340;
  /* semantic — reserved, separate from accent */
  --good: #30D158; --success: #30D158; --warn: #FF9F0A; --warning: #FF9F0A; --danger: #FF5C67; --info: #5AA9FF;
  --good-bg: rgba(48, 209, 88, 0.14); --good-line: rgba(48, 209, 88, 0.30);
  --warn-bg: rgba(255, 159, 10, 0.14); --warn-line: rgba(255, 159, 10, 0.32);
  --bad-bg: rgba(255, 92, 103, 0.13); --bad-line: rgba(255, 92, 103, 0.30);
  --blue-bg: rgba(90, 169, 255, 0.15); --blue-line: rgba(90, 169, 255, 0.32);
  --ui-good-bg: rgba(48, 209, 88, 0.14); --ui-good-line: rgba(48, 209, 88, 0.30);
  --ui-warn-bg: rgba(255, 159, 10, 0.13); --ui-warn-line: rgba(255, 159, 10, 0.32);
  --ui-bad-bg: rgba(255, 92, 103, 0.11); --ui-bad-line: rgba(255, 92, 103, 0.30);
  /* radii + shape */
  --radius: 18px; --radius-sm: 12px; --control-height: 40px;
  --system-panel-radius: 18px; --system-card-radius: 16px; --system-row-radius: 14px;
  --system-field-radius: 12px; --system-pill-radius: 999px;
  --system-field-height: 42px; --system-action-height: 40px;
  --calm-panel: rgba(24, 24, 31, 0.88); --calm-row: rgba(255, 255, 255, 0.045);
  --calm-row-hover: rgba(255, 255, 255, 0.08); --calm-field: rgba(255, 255, 255, 0.055);
  --calm-border: rgba(242, 241, 247, 0.12); --calm-border-strong: rgba(242, 241, 247, 0.20);
  --shadow: 0 18px 54px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* Page ground: near-black graphite with a faint indigo bloom top-right. */
body {
  background:
    radial-gradient(1100px 560px at 82% -12%, rgba(94, 168, 255, 0.08), transparent 60%),
    #0C0C10 !important;
}

/* Primary button: solid indigo + white text (was a gold gradient, dark text). */
.primary-action {
  border-color: transparent !important;
  color: #ffffff !important;
  background: var(--accent) !important;
  box-shadow: 0 8px 22px rgba(94, 168, 255, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
}
.primary-action:hover {
  color: #ffffff !important;
  background: var(--accent-hover) !important;
}

/* ============================================================================
   UNIFIED: smooth tab switch — every view fades/rises in the same way, so
   moving between tabs feels like one continuous app, not a reload.
   ========================================================================= */
@media (prefers-reduced-motion: no-preference) {
  .view.active {
    animation: viewFadeIn 0.24s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }
  @keyframes viewFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  /* Consistent hover/press feel on all action buttons and rows. */
  .primary-action, .secondary-action, .ghost-action, .inline-action,
  .small-action, .danger-action, .nav-item, .segmented-control button {
    transition: background 0.16s ease, border-color 0.16s ease,
                color 0.16s ease, transform 0.12s ease, box-shadow 0.16s ease !important;
  }
  .primary-action:active, .secondary-action:active, .ghost-action:active,
  .inline-action:active, .small-action:active, .danger-action:active {
    transform: translateY(0.5px);
  }
}

/* ============================================================================
   UNIFIED page/section head — identical layout, spacing and (no) dividers on
   every tab, so the "head" reads the same everywhere.
   ========================================================================= */
.panel-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 14px !important;
  margin: 0 0 16px !important;
  padding-bottom: 0 !important;
  border-bottom: 0 !important;
}
.panel-head > div { min-width: 0 !important; }
/* Section title keeps one type treatment across all heads (subtitle spans were
   already consistent; leave them so status pills / counts stay untouched). */
.panel-head > div > h2,
.panel-head > h2 {
  margin: 0 !important;
  font-family: var(--font-display) !important;
  font-size: var(--type-section-title) !important;
  font-weight: 780 !important;
  line-height: var(--leading-title) !important;
}

/* Neutralise the three heads that kept their own gap (dashboard 14, work/meeting
   form heads 12) so every head sits 16px above its content. */
#dashboardView .daily-panel .panel-head { margin-bottom: 16px !important; }
#reportsView .form-panel > .panel-head,
#meetingsView .form-panel > .panel-head,
#reportsView .time-form-head,
#meetingsView #meetingForm .time-form-head { margin: 0 0 16px !important; padding-bottom: 0 !important; }

/* ============================================================================
   UNIFIED empty state — one dashed-box look for every "nothing here yet"
   placeholder (the empty() helper and the coordination empty share it).
   ========================================================================= */
.empty,
#coordinationView .coordination-empty-state {
  display: grid !important;
  place-content: center !important;
  gap: 4px !important;
  min-height: 96px !important;
  padding: 22px 24px !important;
  border: 1px dashed var(--line-strong) !important;
  border-radius: var(--system-card-radius, 16px) !important;
  background: rgba(255, 255, 255, 0.02) !important;
  color: var(--muted) !important;
  font-size: var(--type-body) !important;
  line-height: 1.45 !important;
  text-align: center !important;
}

/* =========================================================================
   DATA ACTIONS · export/import/smazat data (append-only, §8)
   Skupina tlačítek v hlavě „Podklady pro výplaty".
   ========================================================================= */
.closing-below-panel .closing-col-head .data-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  align-items: center !important;
}

/* =========================================================================
   MONEY ACTIONS · Upravit + Smazat v řádku pohybu (append-only, §8)
   7. buňka gridu .money-item drží dvě tlačítka vedle sebe, zarovnaná vpravo.
   ========================================================================= */
.money-item .money-actions {
  display: inline-flex !important;
  gap: 8px !important;
  align-items: center !important;
  justify-content: flex-end !important;
}

/* =========================================================================
   UZÁVĚRKA · KPI dlaždice (#closingMetrics) — orphan-free (append-only, §8)
   7 dlaždic: auto-fit dřív dával 6+1 (osiřelá poslední) i 3+3+1. Pevné
   počty sloupců drží jen bezpečná rozložení: 7 v řádku → 4+3 → 1 na mobilu.
   ========================================================================= */
#closingMetrics {
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
}
@media (max-width: 1500px) {
  #closingMetrics {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 768px) {
  #closingMetrics {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================================
   ARCHIV · výsledkové pilulky — hodnoty se ořezávaly (append-only, §8)
   Pilulka má ~115px; label + hodnota na jednom flex řádku nechávaly hodnotě
   0–19px („178 668 Kč" nebylo vidět). Dvouřádkový grid: tečka vlevo přes
   oba řádky, label nahoře, hodnota pod ním s povoleným zalomením — nikdy
   se neusekne, pilulka roste do výšky.
   ========================================================================= */
#archiveView .archive-result-pill,
#archiveView .archive-result-grid .archive-result-pill,
#archiveView .status-cell .archive-result-pill {
  display: grid !important;
  grid-template-columns: 6px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  justify-content: stretch !important;
  width: auto !important;
  min-height: 42px !important;
  column-gap: 8px !important;
  row-gap: 1px !important;
  padding: 6px 10px !important;
}
#archiveView .archive-result-pill::before,
#archiveView .archive-result-grid .archive-result-pill::before,
#archiveView .status-cell .archive-result-pill::before {
  grid-row: 1 / span 2 !important;
}
#archiveView .archive-result-pill span,
#archiveView .archive-result-pill strong,
#archiveView .archive-result-grid .archive-result-pill span,
#archiveView .archive-result-grid .archive-result-pill strong,
#archiveView .status-cell .archive-result-pill span,
#archiveView .status-cell .archive-result-pill strong {
  margin-left: 0 !important;
  min-width: 0 !important;
  text-align: left !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}
#archiveView .archive-result-pill span,
#archiveView .archive-result-grid .archive-result-pill span {
  font-size: 11px !important;
  line-height: 1.15 !important;
}
#archiveView .archive-result-pill strong,
#archiveView .archive-result-grid .archive-result-pill strong {
  font-size: 12px !important;
  line-height: 1.2 !important;
}
/* hint-dot „?" zůstává kompaktní vedle labelu */
#archiveView .archive-result-pill span .hint-dot {
  white-space: nowrap !important;
}

/* Archiv · chipy „Výsledek fáze" (.metric-hint-item) — tvrdý ořez bez
   ellipsis (nowrap + hidden, obsah 157–171px v ~155px sloupci). Povolíme
   zalomení: částka zůstane vcelku, label se zalomí pod ni. */
#archiveView .performance-metrics .metric-hint-item {
  flex-wrap: wrap !important;
  white-space: normal !important;
  overflow: visible !important;
  height: auto !important;
  line-height: 1.3 !important;
}
#archiveView .performance-metrics .metric-hint-item strong {
  white-space: nowrap !important; /* částku nelámat uvnitř */
}

/* =========================================================================
   UNIFIED CONTROLS · vlna A auditu konzistence (append-only, §8)
   Runtime audit našel 31 variant tlačítek (inline-action měl 5 výšek podle
   záložky), 2 radiusy panelů (22/18) a 2 tvarové rodiny řádků (22/14).
   Tento blok vynucuje jeden systém; výšky vycházejí z --system-* tokenů.
   ========================================================================= */

/* Pozn.: starší vrstvy používají ID-selektory s !important; zdvojené
   :is(#view):is(#view) dává specificitu (2,x,x) a spolehlivě je přebíjí. */

/* 1) Akce v řádcích seznamů/tabulek — kompaktní, všude stejné */
button.inline-action,
:is(#dashboardView, #reportsView, #meetingsView, #projectsView, #coordinationView, #financeView, #closingView, #archiveView, #peopleView):is(#dashboardView, #reportsView, #meetingsView, #projectsView, #coordinationView, #financeView, #closingView, #archiveView, #peopleView) button.inline-action {
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 12px !important;
  font-size: 12px !important;
  font-weight: 720 !important;
}

/* 2) Samostatné sekundární akce — plná výška systému */
button.ghost-action,
:is(#dashboardView, #reportsView, #meetingsView, #projectsView, #coordinationView, #financeView, #closingView, #archiveView, #peopleView):is(#dashboardView, #reportsView, #meetingsView, #projectsView, #coordinationView, #financeView, #closingView, #archiveView, #peopleView) :is(button.ghost-action, button.secondary-action) {
  height: var(--system-action-height, 40px) !important;
  min-height: var(--system-action-height, 40px) !important;
  padding: 0 14px !important;
  font-size: 13px !important;
  font-weight: 760 !important;
}

/* 3) Primární akce — zarovnaná s poli formulářů (42px) */
button.primary-action,
:is(#dashboardView, #reportsView, #meetingsView, #projectsView, #coordinationView, #financeView, #closingView, #archiveView, #peopleView):is(#dashboardView, #reportsView, #meetingsView, #projectsView, #coordinationView, #financeView, #closingView, #archiveView, #peopleView) button.primary-action {
  height: var(--system-field-height, 42px) !important;
  min-height: var(--system-field-height, 42px) !important;
  padding: 0 16px !important;
  font-size: 13px !important;
  font-weight: 760 !important;
}

/* 4) Panely — jeden poloměr všude (bylo 22px v Přehled/Práce/Schůzky) */
.panel,
:is(#dashboardView, #reportsView, #meetingsView, #projectsView, #coordinationView, #financeView, #closingView, #archiveView, #peopleView):is(#dashboardView, #reportsView, #meetingsView, #projectsView, #coordinationView, #financeView, #closingView, #archiveView, #peopleView) .panel {
  border-radius: var(--system-panel-radius, 18px) !important;
}

/* 5) Položky seznamů — jedna tvarová rodina (radius 14, padding 14/16;
      Přehled měl 19px/22px a radius 22px, Schůzky 14/16 a 22px).
      .task-item má vlastní vnitřní layout (padding 0) — nechává se. */
:is(#dashboardView, #reportsView, #meetingsView, #projectsView, #coordinationView, #financeView, #closingView, #archiveView, #peopleView):is(#dashboardView, #reportsView, #meetingsView, #projectsView, #coordinationView, #financeView, #closingView, #archiveView, #peopleView) :is(.daily-item, .daily-meeting-item, .time-entry-item):not(.task-item) {
  border-radius: var(--system-row-radius, 14px) !important;
  padding: 14px 16px !important;
}
:is(#dashboardView, #reportsView, #meetingsView, #projectsView, #coordinationView, #financeView, #closingView, #archiveView, #peopleView):is(#dashboardView, #reportsView, #meetingsView, #projectsView, #coordinationView, #financeView, #closingView, #archiveView, #peopleView) .daily-item.task-item {
  border-radius: var(--system-row-radius, 14px) !important;
}

/* 6) Viditelný focus ring (a11y) — klávesnicová navigace všude stejná.
      Nesahá na color inputů (past calendar-display-input, §7). */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent-tint, #A5A2FA) !important;
  outline-offset: 2px !important;
}

/* 7) Nativní checkbox/radio v barvě akcentu (bylo iOS systémová modrá) */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--accent, #635EEC) !important;
}

/* 8) Selecty ve filtru Financí blíž zbytku systému (bylo 12px) */
.finance-filter-fields select {
  font-size: 13px !important;
}

/* 9) Finance: sloupec akcí v Pohybech byl 88px (stavěno na jedno tlačítko
      Smazat); od přidání „Upravit" potřebuje ~132px. Flexibilní sloupce
      popisů absorbují rozdíl. */
#financeView .money-header,
#financeView .money-item {
  grid-template-columns: 118px minmax(0, 1.55fr) minmax(0, 1fr) minmax(0, 1fr) 96px 118px 132px !important;
}

/* 10) Uzávěrka: pod-nadpisy panelů převedeny z h2 na h3 (sémantická
       hierarchie — 22px h2 je jen hlava panelu „Měsíční uzávěrka").
       Vzhled beze změny: 15px/780 display font, jako dřívější h2 pravidla. */
#closingView :is(.closing-col-head, .closing-column-panel, .closing-projects-panel, .closing-below-panel) h3 {
  margin: 0 0 2px !important;
  color: var(--ink) !important;
  font-family: var(--font-display, "Manrope", sans-serif) !important;
  font-size: var(--type-card-title, 15px) !important;
  font-weight: 780 !important;
  line-height: 1.25 !important;
}

/* =========================================================================
   ARCHIV · pravý sloupec sladěn s Projekty (append-only, §8)
   Bylo: badge+Vrátit, pod tím Detail výkonu, pod tím 4 pilulky pod sebou
   s výškami 42–55px — vertikálně rozházené. Nyní: 2sloupcová mřížka jako
   stavový sloupec Projektů — [Dokončeno | Vrátit], [Detail výkonu ―――],
   pilulky 2×2 se společnou výškou řádku.
   ========================================================================= */
#archiveView .archive-outcome-wrap {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  align-content: start !important;
}
#archiveView .archive-right-actions {
  display: contents !important; /* badge a Vrátit = dvě buňky mřížky */
}
#archiveView .archive-right-actions .archive-state-label,
#archiveView .archive-right-actions button {
  width: 100% !important;
  min-height: 40px !important;
  height: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
#archiveView .archive-outcome-wrap > .archive-detail-action {
  grid-column: 1 / -1 !important;
  width: 100% !important;
}
#archiveView .archive-result-grid,
#archiveView .status-cell .archive-result-grid {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}
/* Pilulky: společná minimální výška, label na jednom řádku (jsou krátké),
   hodnota se smí zalomit — výšku pak srovná řádek mřížky. */
#archiveView .archive-result-pill,
#archiveView .archive-result-grid .archive-result-pill,
#archiveView .status-cell .archive-result-pill {
  min-height: 48px !important;
  align-content: center !important;
}
#archiveView .archive-result-pill span,
#archiveView .archive-result-grid .archive-result-pill span,
#archiveView .status-cell .archive-result-pill span {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
/* těsné 2px: menší vodorovný padding pilulek, ať se „Výkon / h ?" vejde */
#archiveView .archive-result-pill,
#archiveView .archive-result-grid .archive-result-pill,
#archiveView .status-cell .archive-result-pill {
  padding: 6px 8px !important;
}

/* =========================================================================
   TOOLTIPY v „Detail výkonu" (Projekty + Archiv) — čitelnost (append, §8)
   Tečky „?" v detailních řadách sedí u levého okraje buňky; 270px tooltip
   centrovaný pod tečkou přetékal vlevo a overflow:hidden buňky ho ořízl.
   Kotvíme ho k levému okraji tečky (roste doprava, kde je místo) a buňkám
   výkonu povolujeme přetečení (kvůli tooltipům u spodních řad).
   ========================================================================= */
.external-cost-inline-detail .hint-dot::after,
.performance-detail-row .hint-dot::after {
  left: 0 !important;
  transform: translate(0, 4px) !important;
}
.external-cost-inline-detail .hint-dot:hover::after,
.external-cost-inline-detail .hint-dot:focus-visible::after,
.performance-detail-row .hint-dot:hover::after,
.performance-detail-row .hint-dot:focus-visible::after {
  transform: translate(0, 0) !important;
}
#archiveView td.project-performance-cell,
#archiveView .archive-performance-cell,
#projectsView td.project-performance-cell {
  overflow: visible !important;
}

/* =========================================================================
   ARCHIV · výsledkové pilulky = stejný vzhled jako chipy „Výsledek fáze"
   (append, §8). Hodnota nahoře tučně, popisek pod ní, centrováno — jediný
   rozdíl zůstává barevné tónování dobré/špatné. Tečka ::before skryta,
   tón nese pozadí a barva hodnoty.
   ========================================================================= */
#archiveView .archive-result-pill,
#archiveView .archive-result-grid .archive-result-pill,
#archiveView .status-cell .archive-result-pill {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1px !important;
  min-height: 42px !important;
  padding: 5px 10px !important;
  border-radius: 16px !important;
  text-align: center !important;
}
#archiveView .archive-result-pill::before,
#archiveView .archive-result-grid .archive-result-pill::before,
#archiveView .status-cell .archive-result-pill::before {
  display: none !important;
}
#archiveView .archive-result-pill strong,
#archiveView .archive-result-grid .archive-result-pill strong,
#archiveView .status-cell .archive-result-pill strong {
  order: -1 !important;
  font-size: 13px !important;
  font-weight: 760 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  white-space: normal !important;
  overflow: visible !important;
}
#archiveView .archive-result-pill span,
#archiveView .archive-result-grid .archive-result-pill span,
#archiveView .status-cell .archive-result-pill span {
  color: var(--muted) !important;
  font-size: 12px !important;
  font-weight: 760 !important;
  line-height: 1.2 !important;
  text-align: center !important;
}

/* =========================================================================
   UNIFIED BARS · jedna podoba časových/progres os v celé aplikaci (append, §8)
   Audit našel 5 variant tracků: Projekty/Archiv 7px·r999·bílá 0.075,
   Koordinace 6px·r99·krém 0.09 / 6px·r999·bílá 0.08 / 7px·r999·krém 0.106
   (krémové = pozůstatek zlaté éry). Sjednoceno: 6px, pill, bílá 0.08.
   ========================================================================= */
.mini-progress .bar,
.timeline-bar,
.coordination-deadline-track,
.coordination-card-progress,
.coordination-mini-timeline,
.coordination-progress-track,
#coordinationView .coordination-item .coordination-deadline-track {
  height: 6px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.08) !important;
}
/* Tečka na časové ose: na 100 % přetékala 2–5px za track („ulomená bublina")
   a jinak jen kopíruje hranu výplně — odstraněna všude. */
.timeline-dot {
  display: none !important;
}
/* Výsledkové pilulky Archivu: všechny stejně vysoké (nejvyšší v mřížce určuje
   výšku všem — konec „různě vysokých oken"). */
#archiveView .archive-result-grid,
#archiveView .status-cell .archive-result-grid {
  grid-auto-rows: 1fr !important;
}

/* =========================================================================
   RESPONZIVITA · Projekty + Archiv (append, §8)
   Tabulky měly min-width 1160px a sloupcová minima 280/520/260 — pod
   ~1280px se nic neskládalo, jen se objevil vodorovný scroll v panelu.
   Pod 1280px se řádek skládá do karty: identita → chipy/osy → výsledky.
   ========================================================================= */
@media (max-width: 1280px) {
  #projectsView table,
  #archiveView table {
    min-width: 0 !important;
    width: 100% !important;
  }
  #projectsView thead,
  #archiveView thead {
    display: none !important; /* karty jsou samopopisné */
  }
  #projectsView tbody tr,
  #archiveView tbody tr {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }
  #projectsView tbody td,
  #archiveView tbody td {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}

/* =========================================================================
   RESPONZIVITA · Finance — Pohyby peněz (append, §8)
   Tabulka pohybů držela 7 sloupců na každé šířce → na ~900px 133 ořezaných
   textů. Pod 1100px se řádek skládá do karty:
   [Druh | Částka] / [Popis] / [Kdo | Kam] / [Datum | akce].
   ========================================================================= */
@media (max-width: 1100px) {
  #financeView .money-header {
    display: none !important;
  }
  #financeView .money-item {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "type amount"
      "desc desc"
      "owner place"
      "date actions" !important;
    row-gap: 6px !important;
    column-gap: 14px !important;
    padding: 12px 16px !important;
  }
  #financeView .money-item .money-type { grid-area: type; }
  #financeView .money-item .money-amount { grid-area: amount; text-align: right !important; }
  #financeView .money-item .money-description {
    grid-area: desc;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
  }
  #financeView .money-item .money-owner { grid-area: owner; }
  #financeView .money-item .money-place {
    grid-area: place;
    text-align: right !important;
  }
  #financeView .money-item .money-date { grid-area: date; color: var(--muted) !important; }
  #financeView .money-item .money-actions { grid-area: actions; justify-content: flex-end !important; }
}

/* Koordinace · fakta vybraného projektu: dlouhé jméno klienta se ořezávalo
   ellipsis bez tooltipu — povoleno zalomení na druhý řádek. */
#coordinationView .coordination-project-facts strong {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere !important;
}

/* =========================================================================
   UZÁVĚRKA · přestavba na dvě sekce (append, §8)
   Sekce 1 „Lidé" = panel-head + třísloupcový grid (hlava seznamu lidí se
   přesunula do panel-head, první sloupec je už jen scrollující seznam).
   Sekce 2 „Měsíční uzávěrka" = hlava s měsícem/uzavřením + metriky +
   Podklady pro výplaty + Projekty v měsíci — pod-bloky FLAT, bez rámečků
   v rámečku (panel je jediná karta).
   ========================================================================= */
#closingView .closing-overview-grid > .closing-column-panel:nth-child(1) {
  grid-template-rows: minmax(0, 1fr) !important; /* bez hlavy: seznam bere celou výšku */
}
#closingView .closing-below-panel {
  margin-top: 4px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}
#closingView .closing-projects-plain {
  display: block !important;
  margin-top: 22px !important;
}
#closingView .closing-projects-plain h3 {
  margin: 0 0 10px !important;
  color: var(--ink) !important;
  font-family: var(--font-display, "Manrope", sans-serif) !important;
  font-size: var(--type-card-title, 15px) !important;
  font-weight: 780 !important;
  line-height: 1.25 !important;
}

/* =========================================================================
   TYPOGRAFIE FORMULÁŘŮ · jeden font pro všechny kontroly (append, §8)
   V jedné sekci se potkávaly tři řezy: select/input Inter 500, kalendářový
   displej data Inter 720 UPPERCASE (působí jako cizí font), fakta 13px.
   Sjednoceno: rodina Inter, váha 560; datum bez verzálek; fakta 14px.
   ========================================================================= */
input,
select,
textarea {
  font-family: var(--font-ui, "Inter", sans-serif) !important;
  font-weight: 560 !important;
}
.calendar-display-value {
  font-family: var(--font-ui, "Inter", sans-serif) !important;
  font-size: 14px !important;
  font-weight: 560 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
#closingView .closing-person-facts span {
  font-size: 14px !important;
}

/* =========================================================================
   SELECT POPOVER · rozbalení výběrů ve stylu kalendáře (append, §8)
   Nativní systémové menu (bílé, světle modrý highlight) nahrazeno vlastním
   popoverem — stejný panel, radius, stín a akcentová logika jako kalendář.
   ========================================================================= */
.select-popover {
  padding: 8px !important;
}
.select-popover .select-popover-list {
  display: grid !important;
  gap: 2px !important;
  max-height: 316px !important;
  overflow-y: auto !important;
}
.select-popover .select-popover-option {
  display: block !important;
  width: 100% !important;
  padding: 9px 12px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: var(--ink) !important;
  font-family: var(--font-ui, "Inter", sans-serif) !important;
  font-size: 14px !important;
  font-weight: 560 !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: background 0.14s ease, color 0.14s ease !important;
}
.select-popover .select-popover-option:hover,
.select-popover .select-popover-option:focus-visible {
  background: rgba(94, 168, 255, 0.16) !important;
  color: var(--accent-tint, #A5A2FA) !important;
}
.select-popover .select-popover-option.is-selected {
  background: var(--accent, #635EEC) !important;
  color: #ffffff !important;
}
.select-popover .select-popover-option[disabled] {
  opacity: 0.45 !important;
  cursor: default !important;
}
/* Projekty v měsíci: table-wrap uvnitř zdědil panelový vzhled (rámeček
   v rámečku) — původní odrámečkování cílilo na starý název
   .closing-projects-panel. Tabulka sedí flat jako Podklady pro výplaty. */
#closingView .closing-projects-plain .table-wrap {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* =========================================================================
   UZÁVĚRKA · hlava měsíce + subtilní metriky (append, §8)
   1) Otevřený měsíc / měsíc / Uzavřít měsíc = jeden vodorovný řádek akcí,
      stejný vizuál jako Exportovat zálohu / Importovat / Smazat data.
   2) Metriky o dost subtilnější (bývaly 112px vysoké dlaždice s 26px čísly).
   3) Každá metrika má hint-dot „?" s vysvětlením — tooltip kotvený vlevo,
      aby ho neořízl okraj panelu.
   ========================================================================= */
#closingView .closing-controls {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px !important;
}
#closingView .closing-controls .closing-month-field {
  display: block !important;
  margin: 0 !important;
}
#closingView .closing-controls .closing-month-field input {
  height: var(--system-action-height, 40px) !important;
  width: 132px !important;
}

/* Subtilní metriky — platí pro .metrics globálně (Uzávěrka i Finance),
   ať stejná komponenta vypadá všude stejně. */
.metrics {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  gap: 10px !important;
}
.metrics .metric {
  min-height: 0 !important;
  padding: 10px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  justify-content: center !important;
}
.metrics .metric span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 11px !important;
}
.metrics .metric strong {
  font-size: 17px !important;
  font-weight: 760 !important;
  line-height: 1.2 !important;
}
.metrics .metric .hint-dot::after {
  left: 0 !important;
  transform: translate(0, 4px) !important;
}
.metrics .metric .hint-dot:hover::after,
.metrics .metric .hint-dot:focus-visible::after {
  transform: translate(0, 0) !important;
}
/* pole měsíce přesně 40px jako okolní akce (pole mají jinak 42px) */
#closingView .closing-controls .closing-month-field input {
  min-height: 40px !important;
  height: 40px !important;
  box-sizing: border-box !important;
}
/* tooltip „?" v metrice se nesmí oříznout o dlaždici */
.metrics .metric {
  overflow: visible !important;
}

/* =========================================================================
   UZÁVĚRKA · doladění hlavy a metrik (append, §8)
   1) Pole měsíce: label byl o ~38px širší než input uvnitř → falešná díra
      v řadě. Label = přesně šířka pole, hodnota centrovaná.
   2) Metriky napevno 3 na řádek (bylo auto-fit → 4+2).
   3) Otazníky: kroužek měl display:flex bez centrování (glyf mimo střed)
      a 24px byl vedle 11px popisku obří — 18px, glyf přesně uprostřed.
   ========================================================================= */
#closingView .closing-controls .closing-month-field {
  width: 140px !important;
  flex: 0 0 140px !important;
}
#closingView .closing-controls .closing-month-field input {
  width: 100% !important;
  text-align: center !important;
}
#closingView .metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
@media (max-width: 900px) {
  #closingView .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 560px) {
  #closingView .metrics { grid-template-columns: minmax(0, 1fr) !important; }
}
.metrics .metric .hint-dot {
  display: inline-grid !important;
  place-content: center !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  padding: 0 !important;
  font-size: 10px !important;
  line-height: 1 !important;
}
/* dorážka: pole měsíce drželo min-width 170px z jiné vrstvy; kroužek „?"
   držel width 24px ze specifičtějšího pravidla */
#closingView .closing-controls .closing-month-field,
#closingView .closing-controls .closing-month-field input {
  min-width: 0 !important;
  max-width: 140px !important;
}
#closingView .metrics .metric .hint-dot,
.metrics .metric .hint-dot {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
}

/* =========================================================================
   UZÁVĚRKA · řada měsíce: od–do + jeden font (append, §8)
   V řadě se potkávaly tři řezy (pill Inter 12/520, hodnota Inter 14/560,
   tlačítka Manrope 13/760). Vše sjednoceno na font tlačítek. Pole zobrazují
   „červenec 2026" (overlay z syncDateInputDisplays, month formát).
   ========================================================================= */
#closingView .closing-controls .closing-range-sep,
#closingView .closing-controls .closing-month-field input,
#closingView .closing-controls .closing-month-field .calendar-display-value {
  font-family: var(--font-display, "Manrope", sans-serif) !important;
  font-size: 13px !important;
  font-weight: 760 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
#closingView .closing-controls .closing-range-sep {
  color: var(--muted) !important;
}
/* šířka polí: „listopad 2026" se musí vejít */
#closingView .closing-controls .closing-month-field,
#closingView .closing-controls .closing-month-field input {
  width: 150px !important;
  max-width: 150px !important;
  flex-basis: 150px !important;
}
/* formátovaná hodnota přesně přes pole, centrovaná */
#closingView .closing-controls .closing-month-field {
  position: relative !important;
}
#closingView .closing-controls .closing-month-field .calendar-display-value {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  pointer-events: none !important;
  color: var(--ink) !important;
}
/* label pole měsíce přesně 40px jako zbytek řady */
#closingView .closing-controls .closing-month-field {
  height: 40px !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}

/* =========================================================================
   UZÁVĚRKA · přepínač Měsíc/Období (append, §8)
   Místo matoucího „červenec – červenec": výchozí je jeden měsíc s tlačítkem
   Uzavřít; segment „Období" odkryje od–do a uzavírání schová (stejný vzor
   segmentů jako filtr Financí). Výška sladěná s řadou (40px).
   ========================================================================= */
#closingView .closing-controls .closing-mode-switch {
  display: inline-flex !important;
  align-items: stretch !important;
  height: var(--system-action-height, 40px) !important;
  margin: 0 !important;
}
#closingView .closing-controls .closing-mode-switch button {
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 14px !important;
  font-family: var(--font-display, "Manrope", sans-serif) !important;
  font-size: 13px !important;
  font-weight: 760 !important;
}
/* .hidden musí vyhrát nad display:block polí měsíce */
#closingView .closing-controls .closing-month-field.hidden {
  display: none !important;
}
/* Řada měsíce: jeden tvar a tón pro všechny tři prvky — pill 999px,
   border 0.12, pozadí 0.043 (jako ghost tlačítka). Segment měl radius 12
   a krémový border ze staré palety, pole mělo radius 12. */
#closingView .closing-controls .closing-mode-switch {
  border-radius: 999px !important;
  border: 1px solid rgba(242, 241, 247, 0.12) !important;
  background: rgba(255, 255, 255, 0.043) !important;
  padding: 4px !important;
}
#closingView .closing-controls .closing-month-field input {
  border-radius: 999px !important;
  border: 1px solid rgba(242, 241, 247, 0.12) !important;
  background: rgba(255, 255, 255, 0.043) !important;
}

/* =========================================================================
   SROVNÁNÍ · pole měsíce vertikálně + Od/Do ve Financích (append, §8)
   1) Input v labelu pole měsíce seděl na textové baseline → 6px posun dolů
      proti segmentu a tlačítku. Label je flex, input roztažený.
   2) Od/Do ve filtru Financí dostaly .calendar-field → zobrazují
      „červenec 2026" stejně jako Uzávěrka (kompaktní 13px).
   ========================================================================= */
#closingView .closing-controls .closing-month-field:not(.hidden) {
  display: flex !important;
  align-items: stretch !important;
}
#closingView .closing-controls .closing-month-field input {
  display: block !important;
  margin: 0 !important;
  align-self: stretch !important;
}
#financeView .finance-custom-period .calendar-display-value {
  font-size: 13px !important;
}
/* overlay data zdědil margin-top 4px z .compact-label vrstvy → text seděl
   4px pod středem pole */
#closingView .closing-controls .closing-month-field .calendar-display-value {
  margin: 0 !important;
}

/* =========================================================================
   UZÁVĚRKA · stabilní výšky při přepínání lidí (append, §8)
   Pod 1180px měly panely volnou výšku → výkaz rostl podle počtu zápisů
   a při přepnutí člověka vše skákalo. Výkaz má pevnou výšku a scrolluje
   UVNITŘ; karta Sazba a role drží jednotnou výšku. Nad 1180px navíc dlouhý
   výkaz dřív overflow:hidden ořízl bez možnosti scrollu — nyní scrolluje.
   ========================================================================= */
#closingView .closing-time-detail {
  overflow-y: auto !important;
  min-height: 0 !important;
}
#closingView .closing-person-form {
  min-height: 190px !important;
}
@media (max-width: 1180px) {
  #closingView .closing-time-detail {
    height: 360px !important;
    max-height: 360px !important;
  }
}

/* =========================================================================
   UZÁVĚRKA · sekce Lidé = tři plnohodnotné panely (append, §8)
   Sloupce dostaly class .panel (stejné karty jako Přehled/Práce); první
   sloupec má zase hlavu → vrací se mu dvouřádkový grid (dřívější dorážka
   mu dala jednořádkový).
   ========================================================================= */
#closingView .closing-overview-grid > .closing-column-panel:nth-child(1) {
  grid-template-rows: auto minmax(0, 1fr) !important;
}

/* Tooltipy „?" nesmí mizet pod sousedními okny/dlaždicemi: dlaždice ani
   řádek s tečkou nesmí prohrát s pozdějším sourozencem ve vykreslování. */
.metrics .metric {
  position: relative !important;
}
.metrics .metric:hover {
  z-index: 90 !important;
}
.hint-dot::after {
  z-index: 999 !important;
}
.performance-detail-row {
  position: relative !important;
}
.performance-detail-row:hover {
  z-index: 90 !important;
}

/* =========================================================================
   UZÁVĚRKA · Lidé/Sazba/Výkaz = TŘI SLOUPCE VEDLE SEBE (append, §8)
   Dřív 2 sloupce (Lidé vlevo, dva panely nad sebou vpravo) — sjednoceno
   na třísloupcový řádek stejně vysokých karet jako v Přehledu.
   ========================================================================= */
#closingView .closing-overview-grid {
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr) minmax(0, 1.2fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  grid-template-areas: "people detail report" !important;
}
/* prostřední panel: hlava + obsah, obsah smí scrollovat */
#closingView .closing-overview-grid > .closing-column-panel:nth-child(2) {
  grid-template-rows: auto minmax(0, 1fr) !important;
}
#closingView .closing-person-form {
  overflow-y: auto !important;
  min-height: 0 !important;
  align-content: start !important;
}
/* Sazba a role ve svislém sloupci: 4sloupcová mřížka formuláře se mačkala
   (ořez data i tlačítka PDF) → 2 sloupce pod sebou */
#closingView .closing-person-form {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  grid-template-areas:
    "name name"
    "facts facts"
    "role cost"
    "from save"
    "pdf pdf" !important;
  gap: 12px !important;
}
#closingView .closing-person-form .cpf-save {
  grid-area: save !important;
  align-self: end !important;
  width: 100% !important;
}
#closingView .closing-person-form .cpf-pdf {
  grid-area: pdf !important;
  width: 100% !important;
}
/* pod 1180px se tři sloupce skládají pod sebe (pozdější pravidlo výše
   přebilo starý media stack — nutný vlastní override) */
@media (max-width: 1180px) {
  #closingView .closing-overview-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    grid-template-areas: "people" "detail" "report" !important;
    height: auto !important;
    max-height: none !important;
  }
}
/* úzké šířky: segment Měsíc/Období se nesmí roztahovat (dědil flex-grow) */
@media (max-width: 1180px) {
  #closingView .closing-controls {
    max-width: 100% !important;
  }
  #closingView .closing-controls .closing-mode-switch {
    width: max-content !important;
    flex: 0 0 auto !important;
  }
  #closingView .closing-controls .closing-mode-switch button {
    flex: 0 0 auto !important;
    width: auto !important;
  }
}
/* úzké šířky: hlava uzávěrky se láme — kontroly spadnou pod titul */
@media (max-width: 1180px) {
  #closingView .panel-head {
    flex-wrap: wrap !important;
  }
  #closingView .closing-controls {
    min-width: 0 !important;
    width: 100% !important;
    justify-content: flex-start !important;
  }
}
/* jméno v kartě osoby se smí zalomit (užší sloupec Lidé) */
#closingView .time-person-card strong {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere !important;
  line-height: 1.2 !important;
}

/* =========================================================================
   UZÁVĚRKA · karta Sazba a role: výplň + výkaz po uzavření (append, §8)
   Duplicitní jméno odstraněno (je v podtitulu hlavy). Prázdný zbytek karty
   plní Historie sazeb; místo „Uložit PDF" je „Stáhnout výkaz (PDF)" jen po
   uzavření měsíce (jinak vysvětlující poznámka). + mezera pod trojicí karet.
   ========================================================================= */
#closingView .closing-overview-grid {
  margin-bottom: 18px !important;
}
#closingView .closing-person-form {
  grid-template-areas:
    "facts facts"
    "role cost"
    "from save"
    "history history"
    "pdf pdf" !important;
}
#closingView .closing-person-form .cpf-history {
  grid-area: history !important;
  display: grid !important;
  gap: 6px !important;
  align-content: start !important;
  padding: 12px 14px !important;
  border: 1px dashed var(--line-strong) !important;
  border-radius: 14px !important;
}
#closingView .closing-person-form .cpf-history b {
  color: var(--muted) !important;
  font-size: 11px !important;
  font-weight: 740 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}
#closingView .closing-person-form .cpf-history span {
  color: var(--ink-soft, rgba(242, 241, 247, 0.82)) !important;
  font-size: 13px !important;
  font-weight: 560 !important;
}
#closingView .closing-person-form .cpf-pdf-note {
  grid-area: pdf !important;
  margin: 0 !important;
  color: var(--muted) !important;
  font-size: 12px !important;
  font-weight: 560 !important;
  line-height: 1.45 !important;
  text-align: center !important;
}

/* =========================================================================
   TYPOGRAFIE · redukce repertoáru (append, §8) — audit našel 46 kombinací
   font×velikost×váha (12 vah, 8 variant uppercase labelů). Role:
   nadpisy Manrope 780 · tlačítka Manrope 720/760 · text Inter 560 ·
   hodnoty Inter 700 · labely/badge Inter 11/700 UPPERCASE.
   ========================================================================= */

/* 1) Textové prvky: váhy 400/520/600/640/650 → 560 */
.bar-label span,
.money-item .money-owner,
.money-item .money-place,
.money-item .money-date,
.money-item .money-description,
.project-phase-row-title em,
button.access-chip {
  font-weight: 560 !important;
}

/* 2) Uppercase labely: jedna varianta Inter 11/700 (bylo 8 variant —
      th 740, dny kalendáře 760, metriky 760, money hlavička Manrope…) */
th,
.hours-calendar-weekdays span,
.metrics .metric > span,
.money-header span,
.cpf-history b,
.closing-person-facts b,
.time-person-card > span:first-child {
  font-family: var(--font-ui, "Inter", sans-serif) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

/* 3) Badge pilulky: Manrope/620 pryč z drobných — Inter 11/700 UP */
.money-type,
.coordination-type,
.coordination-card-number,
.cell-stack .status {
  font-family: var(--font-ui, "Inter", sans-serif) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}

/* TYPOGRAFIE · iterace 2 — dorážky zdrojů se silnější specificitou */
/* texty na 560 (td byly 400, small 520, popisy 600) */
td,
small,
dt,
dd,
.finance-filter-summary {
  font-weight: 560 !important;
}
#financeView .money-item .money-description {
  font-weight: 560 !important;
}
/* labely — vítězily view-vrstvy (th 740, dny kalendáře 760) */
#dashboardView th, #reportsView th, #meetingsView th, #projectsView th,
#coordinationView th, #financeView th, #closingView th, #archiveView th {
  font-family: var(--font-ui, "Inter", sans-serif) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}
#reportsView .hours-calendar-weekdays span {
  font-weight: 700 !important;
}
#closingView .cpf-history b {
  font-weight: 700 !important;
}
/* status badge v tabulkách projektů/archivu = stejná badge role */
#projectsView .cell-stack .status,
#archiveView .cell-stack .status {
  font-family: var(--font-ui, "Inter", sans-serif) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}
/* částky pohybů: Manrope 720 → Inter 700 (hodnotová role) */
#financeView .money-item .money-amount {
  font-family: var(--font-ui, "Inter", sans-serif) !important;
  font-weight: 700 !important;
}
/* popisky pilulek a fází: 760 → 700 */
#archiveView .archive-result-pill span,
.project-phase-row-title span {
  font-weight: 700 !important;
}

/* Koordinace: názvy projektů na kontextových kartách se ořezávaly ellipsis
   (nezávislé na typografii — odhaleno auditem) — povoleny max 2 řádky */
#coordinationView .coordination-context-card strong {
  white-space: normal !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  line-height: 1.25 !important;
}

/* =========================================================================
   TERMÍNY · zpožděné otevřené fáze červeně (append, §8)
   Dokončené fáze nově říkají „dokončeno v termínu / X dní před/po termínu"
   (deadlineDistanceLabel). Otevřená fáze po termínu dostává is-late —
   stejná červená řeč jako zpožděné položky Koordinace.
   ========================================================================= */
.bar-label span.is-late {
  color: #ff9aaa !important;
  font-weight: 700 !important;
}
.performance-metrics .metric-hint-item.is-late,
#projectsView .performance-metrics .metric-hint-item.is-late {
  border-color: rgba(255, 92, 103, 0.45) !important;
  background: rgba(255, 92, 103, 0.14) !important;
}
.performance-metrics .metric-hint-item.is-late,
.performance-metrics .metric-hint-item.is-late strong {
  color: #ffbcc4 !important;
}

/* =========================================================================
   BLUEPRINT / RASTR — R1 (19.–20. 7. 2026, odsouhlaseno uživatelem)
   Kompletní vizuální překlopení podle design-mocky/A-rastr-bahnschrift-full:
   jeden font Bahnschrift (DIN 1451, lokální Windows), blueprint paleta,
   ostré rohy, hairline linky, rastr 44 px na pozadí.
   NÁVRAT K PALETĚ D: smazat celý tento blok (končí značkou KONEC R1).
   ========================================================================= */

/* --- R1.1 · Jeden font na všem (PDF reporty v iframe nedotčeny) --- */
body, body * {
  font-family: "Bahnschrift", "Segoe UI", sans-serif !important;
}
h1, h2, h3, h4, .panel-head h2, button, strong {
  font-stretch: normal;
}
th,
label,
small,
.metrics .metric > span,
.money-header span,
.panel-head span,
.bar-label span,
.status,
.metric-hint-item,
.coordination-type,
.money-type {
  font-stretch: normal;
}
body { font-feature-settings: "tnum" 1; }

/* --- R1.2 · Tokeny: blueprint paleta + ostré rohy --- */
:root {
  --font-ui: "Bahnschrift", "Segoe UI", sans-serif;
  --font-display: "Bahnschrift", "Segoe UI", sans-serif;
  --surface: #0C111B; --surface-2: #0F1521; --bg: #0C111B;
  --panel: #111827; --panel-2: #131C2E; --calm-panel: #111827;
  --surface-glass: rgba(16, 23, 38, 0.92);
  --surface-row: rgba(160, 176, 208, 0.07); --surface-row-hover: rgba(160, 176, 208, 0.13);
  --calm-row: rgba(160, 176, 208, 0.07); --calm-row-hover: rgba(160, 176, 208, 0.13);
  --sidebar: rgba(10, 14, 22, 0.95);
  --ink: #E8E5DC; --ink-soft: rgba(232, 229, 220, 0.85);
  --muted: #8B94A8; --muted-strong: #A6AEBF;
  --line: rgba(160, 176, 208, 0.38); --line-strong: rgba(160, 176, 208, 0.55);
  --calm-border: rgba(160, 176, 208, 0.38); --calm-border-strong: rgba(160, 176, 208, 0.55);
  --field: rgba(160, 176, 208, 0.08); --calm-field: rgba(160, 176, 208, 0.08);
  --field-strong: rgba(160, 176, 208, 0.14);
  --accent: #62A8FF; --accent-hover: #82BAFF; --accent-dark: #9CC8FF; --accent-tint: #9CC8FF;
  --on-accent: #0C111B;
  --soft: rgba(98, 168, 255, 0.16);
  --brand-gold: #62A8FF; --action-gold: #62A8FF; --action-gold-soft: rgba(98, 168, 255, 0.16);
  --brand-blue: #62A8FF; --action-blue: #62A8FF; --brand-red: #FF5D4C;
  --good: #5BC77E; --success: #5BC77E; --warn: #F5C36B; --warning: #F5C36B;
  --danger: #FF5D4C; --info: #62A8FF;
  --good-bg: rgba(91, 199, 126, 0.13); --good-line: rgba(91, 199, 126, 0.4);
  --warn-bg: rgba(245, 195, 107, 0.13); --warn-line: rgba(245, 195, 107, 0.4);
  --bad-bg: rgba(255, 93, 76, 0.12); --bad-line: rgba(255, 93, 76, 0.42);
  --blue-bg: rgba(98, 168, 255, 0.13); --blue-line: rgba(98, 168, 255, 0.4);
  --ui-good-bg: rgba(91, 199, 126, 0.13); --ui-good-line: rgba(91, 199, 126, 0.4);
  --ui-warn-bg: rgba(245, 195, 107, 0.13); --ui-warn-line: rgba(245, 195, 107, 0.4);
  --ui-bad-bg: rgba(255, 93, 76, 0.12); --ui-bad-line: rgba(255, 93, 76, 0.42);
  --radius: 2px; --radius-sm: 2px;
  --system-panel-radius: 2px; --system-card-radius: 2px; --system-row-radius: 2px;
  --system-field-radius: 2px; --system-pill-radius: 3px;
  --shadow: none;
}

/* --- R1.3 · Pozadí: blueprint s rastrem 44 px --- */
body {
  background:
    repeating-linear-gradient(0deg, rgba(120, 140, 185, 0.07) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, rgba(120, 140, 185, 0.07) 0 1px, transparent 1px 44px),
    #0C111B !important;
}

/* --- R1.4 · Panely: hairline, ostré rohy, bez skla --- */
.panel {
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* --- R1.5 · Ostré rohy plošně (přebíjí literální 999px/22px vrstvy) --- */
button.inline-action,
button.ghost-action,
button.primary-action,
:is(#dashboardView, #reportsView, #meetingsView, #projectsView, #coordinationView, #financeView, #closingView, #archiveView, #peopleView):is(#dashboardView, #reportsView, #meetingsView, #projectsView, #coordinationView, #financeView, #closingView, #archiveView, #peopleView) :is(button.inline-action, button.ghost-action, button.secondary-action, button.primary-action) {
  border-radius: 3px !important;
}
.status,
.archive-state-label,
.chip,
.access-chip,
.metric-hint-item,
.segmented-control,
.segmented-control button,
.closing-mode-switch,
.closing-mode-switch button,
.nav-item {
  border-radius: 3px !important;
}
input, select, textarea,
#closingView .closing-controls .closing-month-field input {
  border-radius: 2px !important;
}
.metrics .metric, .money-item, .daily-item, .daily-meeting-item, .time-entry-item,
.coordination-item, .time-person-card, .team-row, .month-chip,
.archive-result-pill, .performance-detail-row, .table-wrap, td, th,
.calendar-popover, .select-popover, .select-popover .select-popover-option,
.empty, #coordinationView .coordination-empty-state,
.dashboard-task-form, .money-form, .external-cost-inline-detail {
  border-radius: 2px !important;
}

/* --- R1.6 · Navigace: aktivní = červená linka, žádná pilulka --- */
.nav-item {
  background: transparent !important;
  border: 1px solid transparent !important;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-stretch: normal;
}
.nav-item.active {
  background: transparent !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  box-shadow: inset 0 -3px 0 #FF5D4C !important;
}

/* --- R1.7 · Tlačítka: primary modrá s tmavým textem, ghost hairline --- */
button.primary-action,
:is(#dashboardView, #reportsView, #meetingsView, #projectsView, #coordinationView, #financeView, #closingView, #archiveView, #peopleView):is(#dashboardView, #reportsView, #meetingsView, #projectsView, #coordinationView, #financeView, #closingView, #archiveView, #peopleView) button.primary-action {
  background: var(--accent) !important;
  color: #0C111B !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
button.primary-action:hover { background: var(--accent-hover) !important; color: #0C111B !important; }
button.ghost-action,
button.inline-action {
  background: rgba(160, 176, 208, 0.06) !important;
  border: 1px solid var(--line) !important;
}
button.ghost-action.danger-action, button.inline-action.danger-inline {
  background: rgba(255, 93, 76, 0.1) !important;
  border-color: rgba(255, 93, 76, 0.5) !important;
  color: #FFB3AA !important;
}

/* --- R1.8 · Nadpisy: verzálky pro hlavy panelů --- */
.panel-head h2, h1#viewTitle {
  text-transform: uppercase;
  letter-spacing: .03em;
}
.panel-head > div > span { font-stretch: normal; letter-spacing: .06em; }

/* --- R1.9 · Focus ring a výběry v modré --- */
button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible {
  outline-color: var(--accent) !important;
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent) !important; }
.select-popover .select-popover-option.is-selected { background: var(--accent) !important; color: #0C111B !important; }
.select-popover .select-popover-option:hover { background: rgba(98,168,255,.16) !important; color: var(--accent-tint) !important; }

/* --- R1.10 · Osy: plné výplně, jemnější track --- */
.mini-progress .bar, .timeline-bar,
.coordination-deadline-track, .coordination-card-progress,
.coordination-mini-timeline, .coordination-progress-track,
#coordinationView .coordination-item .coordination-deadline-track {
  background: rgba(160, 176, 208, 0.12) !important;
  border-radius: 1px !important;
}
/* KONEC R1 =============================================================== */

/* --- R1b · dorážky po runtime skenu --- */
/* Bahnschrift je v kondenzovaných řezech širší v boldu — názvy v denních
   kartách a kontextu Koordinace smí na 2 řádky místo ellipsis */
#dashboardView .daily-list strong,
#coordinationView .coordination-context-card strong,
#coordinationView .coordination-timeline-item strong {
  white-space: normal !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  line-height: 1.25 !important;
}
#coordinationView .coordination-context-card small {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
/* aktivni polozka navigace: cervena linka (prohravala se .nav vrstvou) */
.nav .nav-item.active,
.sidebar .nav-item.active,
nav .nav-item.active {
  background: transparent !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  box-shadow: inset 0 -3px 0 #FF5D4C !important;
}
/* KONEC R1b ============================================================= */

/* --- R1c · finalni doražky --- */
#dashboardView#dashboardView .daily-list strong,
#dashboardView#dashboardView .daily-item strong {
  white-space: normal !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  line-height: 1.25 !important;
}
html body .nav .nav-item.active,
.nav-item.nav-item.nav-item.active {
  background: transparent !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  box-shadow: inset 0 -3px 0 #FF5D4C !important;
}
/* KONEC R1c ============================================================= */

/* =========================================================================
   T1 · TYPOGRAFIE (schválená škála) + R2 · TVAROVÁ INTEGRACE RASTR
   (20. 7. 2026) — 8 rolí, 2 váhy (500/700), 4 line-heighty, šířky dle role.
   NÁVRAT: smazat blok (končí „KONEC T1+R2").
   ========================================================================= */

/* --- T1.0 · Legacy tokeny přemapovány na novou škálu (velký zásah zdarma) --- */
:root {
  --type-page-title: 26px;
  --type-section-title: 18px;
  --type-card-title: 15px;
  --type-body: 13px;
  --type-action: 13px;
  --type-caption: 12px;
  --type-label: 11px;
  --calm-body: 13px;
}

/* --- T1.1 · Základ: body 13/500/1.5 --- */
body {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
}

/* --- T1.2 · display (H1 stránky): 26/700/SC/1.1 UP --- */
h1#viewTitle {
  font-size: 26px !important;
  font-weight: 700 !important;
  font-stretch: normal !important;
  line-height: 1.1 !important;
  letter-spacing: .02em !important;
  text-transform: uppercase !important;
}

/* --- T1.3 · title (H2 hlava panelu): 18/700/SC/1.1 UP --- */
.panel-head h2, .slab h2,
:is(#dashboardView, #reportsView, #meetingsView, #projectsView, #coordinationView, #financeView, #closingView, #archiveView, #peopleView):is(#dashboardView, #reportsView, #meetingsView, #projectsView, #coordinationView, #financeView, #closingView, #archiveView, #peopleView) .panel-head h2 {
  font-size: 18px !important;
  font-weight: 700 !important;
  font-stretch: normal !important;
  line-height: 1.1 !important;
  letter-spacing: .02em !important;
  text-transform: uppercase !important;
}

/* --- T1.4 · heading (H3): 15/700/SC/1.2 --- */
h3,
#closingView :is(.closing-col-head, .closing-column-panel, .closing-projects-plain, .closing-below-panel) h3 {
  font-size: 15px !important;
  font-weight: 700 !important;
  font-stretch: normal !important;
  line-height: 1.2 !important;
  letter-spacing: .01em !important;
}

/* --- T1.5 · item (názvy položek): 14/700/SC/1.3 --- */
.daily-item strong,
.daily-meeting-item strong,
.time-entry-item strong,
.coordination-item h3,
.coordination-context-card strong,
.meeting-detail-card strong,
.project-main-cell strong,
.time-person-card strong,
.money-item .money-description,
#dashboardView#dashboardView .daily-list strong {
  font-size: 14px !important;
  font-weight: 700 !important;
  font-stretch: normal !important;
  line-height: 1.3 !important;
  letter-spacing: .01em !important;
}

/* --- T1.6 · value (čísla/částky): 13/700/normal/1.2 --- */
strong,
b,
.money-item .money-amount,
#financeView .money-item .money-amount,
.archive-result-pill strong,
#archiveView .archive-result-pill strong,
.metric-hint-item strong,
.closing-person-facts span {
  font-weight: 700 !important;
}
.money-item .money-amount,
#financeView .money-item .money-amount,
.archive-result-pill strong,
#archiveView .archive-result-pill strong {
  font-size: 13px !important;
  font-stretch: normal !important;
  line-height: 1.2 !important;
  letter-spacing: .02em !important;
}
/* hodnoty metrik: 17 -> 15 (role heading velikost) */
.metrics .metric strong,
#closingView .metrics .metric strong,
#financeView .metrics .metric strong {
  font-size: 15px !important;
  font-weight: 700 !important;
  font-stretch: normal !important;
  line-height: 1.2 !important;
}

/* --- T1.7 · body (text, pole, tlačítka): 13/500 resp. 700/1.5 --- */
td, dt, dd, p, em, .empty,
input, select, textarea,
.calendar-display-value,
.select-popover .select-popover-option {
  font-size: 13px !important;
  font-weight: 500 !important;
  font-stretch: normal !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
}
td strong, td b { font-weight: 700 !important; }

/* --- T1.8 · meta (popisky/podtituly): 12/500/C/1.5 --- */
small,
.panel-head > div > span,
.panel-head span,
.card .meta,
.daily-item small,
.money-item .money-owner,
.money-item .money-place,
.money-item .money-date,
.bar-label span,
.time-person-card small,
.coordination-item .coordination-meta span,
.finance-filter-summary,
.form-note,
.cpf-history span,
.cpf-pdf-note {
  font-size: 12px !important;
  font-weight: 500 !important;
  font-stretch: normal !important;
  line-height: 1.5 !important;
  letter-spacing: .04em !important;
}

/* --- T1.9 · label (mikro/th/badge/tab/kóty): 11/700/C/1.2 UP --- */
th,
label,
legend,
#dashboardView th,
#reportsView th,
#meetingsView th,
#projectsView th,
#coordinationView th,
#financeView th,
#closingView th,
#archiveView th,
.metrics .metric > span,
.money-header span,
.status,
.archive-state-label,
.money-type,
.coordination-type,
.coordination-card-number,
#projectsView .cell-stack .status,
#archiveView .cell-stack .status,
.cpf-history b,
.closing-person-facts b,
.time-person-card > span:first-child,
.hours-calendar-weekdays span,
#reportsView .hours-calendar-weekdays span,
.nav-item,
.segmented-control button,
.closing-mode-switch button {
  font-size: 11px !important;
  font-weight: 700 !important;
  font-stretch: normal !important;
  line-height: 1.2 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}
label { display: block; }
label > input, label > select, label > textarea { text-transform: none !important; letter-spacing: 0 !important; }

/* --- T1.10 · Tlačítka: 13/700/SC, verzálky (DIN akce) --- */
button.inline-action,
button.ghost-action,
button.primary-action,
:is(#dashboardView, #reportsView, #meetingsView, #projectsView, #coordinationView, #financeView, #closingView, #archiveView, #peopleView):is(#dashboardView, #reportsView, #meetingsView, #projectsView, #coordinationView, #financeView, #closingView, #archiveView, #peopleView) :is(button.inline-action, button.ghost-action, button.secondary-action, button.primary-action) {
  font-size: 12px !important;
  font-weight: 700 !important;
  font-stretch: normal !important;
  line-height: 1.2 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}

/* =========================================================================
   R2 · TVAROVÁ INTEGRACE
   ========================================================================= */

/* R2.1 · Hlava panelu jako titulní blok listu: hairline pod hlavou */
.panel-head,
#closingView .panel-head {
  border-bottom: 1px solid var(--line) !important;
  padding-bottom: 12px !important;
  margin-bottom: 14px !important;
}

/* R2.2 · Stavy jako razítka: hairline obrys, verzálky, bez výplně */
.status,
.archive-state-label {
  background: transparent !important;
  border: 1.5px solid currentColor !important;
  padding: 4px 9px !important;
}

/* R2.3 · Checkboxy a kruhové checky hranaté */
.coordination-check {
  border-radius: 3px !important;
}
.hint-dot {
  border-radius: 3px !important;
}

/* R2.4 · Prázdné stavy: čárkovaný rám v hairline modré */
.empty, #coordinationView .coordination-empty-state {
  border: 1px dashed var(--line-strong) !important;
  border-radius: 2px !important;
}
/* KONEC T1+R2 ============================================================ */

/* --- T1b · dorazky vah (ocas 520-800 -> 500/700) --- */
html body strong, html body b { font-weight: 700 !important; }
html body small, html body em { font-weight: 500 !important; }
#financeView#financeView .money-item .money-description {
  font-size: 14px !important; font-weight: 700 !important;
  font-stretch: normal !important; line-height: 1.3 !important;
}
#coordinationView#coordinationView .coordination-note span,
#coordinationView#coordinationView .coordination-item .coordination-meta span {
  font-weight: 500 !important;
}
#projectsView#projectsView .row-actions button,
#projectsView#projectsView .project-column-list button {
  font-size: 12px !important; font-weight: 700 !important;
  font-stretch: normal !important; letter-spacing: .06em !important;
  text-transform: uppercase !important; line-height: 1.2 !important;
}
.coordination-check, .meeting-calendar-count { font-weight: 700 !important; }
button.access-chip {
  font-size: 11px !important; font-weight: 700 !important;
  font-stretch: normal !important; letter-spacing: .08em !important;
  text-transform: uppercase !important;
}
#coordinationView#coordinationView .coordination-card-number {
  font-size: 11px !important; font-weight: 700 !important; font-stretch: normal !important;
}
#archiveView#archiveView .archive-result-pill span {
  font-size: 11px !important; font-weight: 700 !important;
  font-stretch: normal !important; letter-spacing: .08em !important;
  text-transform: uppercase !important;
}
#dashboardView#dashboardView .daily-main small,
#coordinationView#coordinationView .coordination-context-card small {
  font-size: 12px !important; font-weight: 500 !important; font-stretch: normal !important;
}
/* KONEC T1b ============================================================= */

/* --- T1c · finalni kladivo na vahovy ocas --- */
:is(#dashboardView, #reportsView, #meetingsView, #projectsView, #coordinationView, #financeView, #closingView, #archiveView, #peopleView):is(#dashboardView, #reportsView, #meetingsView, #projectsView, #coordinationView, #financeView, #closingView, #archiveView, #peopleView) strong,
:is(#dashboardView, #reportsView, #meetingsView, #projectsView, #coordinationView, #financeView, #closingView, #archiveView, #peopleView):is(#dashboardView, #reportsView, #meetingsView, #projectsView, #coordinationView, #financeView, #closingView, #archiveView, #peopleView) b {
  font-weight: 700 !important;
}
:is(#dashboardView, #reportsView, #meetingsView, #projectsView, #coordinationView, #financeView, #closingView, #archiveView, #peopleView):is(#dashboardView, #reportsView, #meetingsView, #projectsView, #coordinationView, #financeView, #closingView, #archiveView, #peopleView) em,
:is(#dashboardView, #reportsView, #meetingsView, #projectsView, #coordinationView, #financeView, #closingView, #archiveView, #peopleView):is(#dashboardView, #reportsView, #meetingsView, #projectsView, #coordinationView, #financeView, #closingView, #archiveView, #peopleView) small {
  font-weight: 500 !important;
}
:is(#dashboardView, #reportsView, #meetingsView, #projectsView, #coordinationView, #financeView, #closingView, #archiveView, #peopleView):is(#dashboardView, #reportsView, #meetingsView, #projectsView, #coordinationView, #financeView, #closingView, #archiveView, #peopleView) :is(.access-chip, .meeting-calendar-count, .hours-calendar-weekdays span, .archive-result-pill strong, .coordination-card-number) {
  font-weight: 700 !important;
}
/* KONEC T1c ============================================================= */

/* --- T1d · vyrovnani majitelu: 24 -> 18 (title role) --- */
#financeView#financeView .owner-balance-summary strong,
#financeView#financeView .owner-balance-grid strong {
  font-size: 18px !important; font-weight: 700 !important;
  font-stretch: normal !important; line-height: 1.1 !important;
}
/* KONEC T1d ============================================================= */

/* --- R2b · Koordinace: karta projektu svisle (nazev prvni, osa dole) --- */
#coordinationView#coordinationView .coordination-context-card {
  grid-template-columns: auto minmax(0, 1fr) !important;
  grid-template-areas:
    "num name"
    "phase phase"
    "stats stats"
    "bar bar" !important;
  row-gap: 5px !important;
  column-gap: 10px !important;
  align-items: center !important;
}
#coordinationView#coordinationView .coordination-context-card > .coordination-card-number { grid-area: num !important; }
#coordinationView#coordinationView .coordination-context-card > strong {
  grid-area: name !important;
  -webkit-line-clamp: 2 !important;
}
#coordinationView#coordinationView .coordination-context-card > small { grid-area: phase !important; }
#coordinationView#coordinationView .coordination-context-card > em { grid-area: stats !important; text-align: left !important; }
#coordinationView#coordinationView .coordination-context-card > .coordination-card-progress { grid-area: bar !important; width: 100% !important; }
/* KONEC R2b ============================================================= */

/* --- R2c · Koordinace: tri stejne siroke sloupce (jako Uzaverka) --- */
@media (min-width: 1181px) {
  #coordinationView#coordinationView .coordination-page {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
/* KONEC R2c ============================================================= */

/* --- R2d · Uzaverka: tri stejne sloupce + tlacitko v hlave nepreteka --- */
@media (min-width: 1181px) {
  #closingView#closingView .closing-overview-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
.panel-head {
  flex-wrap: wrap !important;
  row-gap: 10px !important;
}
.panel-head > div {
  min-width: 0 !important;
}
.panel-head > button,
.panel-head .ghost-action,
.panel-head .primary-action {
  flex: 0 0 auto !important;
}
/* KONEC R2d ============================================================= */

/* --- R3 · Cisty Bahnschrift Regular: zadne sirkove rezy (20. 7. 2026) --- */
/* Uzivatel: "cisto a jasne fontem Bahnschrift Regular, zadny uzsi, sirsi" */
body, body *, body *::before, body *::after {
  font-stretch: normal !important;
}
/* prostrkani sjednotit: labely/tlacitka max .05em, zbytek 0 */
th,
label,
.metrics .metric > span,
.money-header span,
.status,
.archive-state-label,
.money-type,
.coordination-type,
.nav-item,
.segmented-control button,
.closing-mode-switch button,
button.inline-action,
button.ghost-action,
button.primary-action,
.cpf-history b,
.closing-person-facts b,
.archive-result-pill span,
.coordination-card-number,
.hours-calendar-weekdays span,
.access-chip {
  letter-spacing: .05em !important;
}
h1, h2, h3, h4, strong, b, td, small, em, p, input, select, textarea {
  letter-spacing: 0 !important;
}

/* hlava panelu BEZ linky (uzivatel: "oddelej tu linku") */
.panel-head,
#closingView .panel-head {
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 14px !important;
}

/* karty lidi v Uzaverce: kompaktni, stejny styl jako radky jinde */
#closingView#closingView .time-person-card {
  min-height: 0 !important;
  height: auto !important;
  padding: 12px 14px !important;
  background: var(--surface-row, rgba(160, 176, 208, 0.07)) !important;
  border: 1px solid var(--line) !important;
  border-radius: 2px !important;
  row-gap: 2px !important;
}
#closingView#closingView .time-person-card.active {
  background: rgba(98, 168, 255, 0.14) !important;
  border-color: rgba(98, 168, 255, 0.55) !important;
}
/* KONEC R3 ============================================================== */

/* =========================================================================
   D1 · iOS x ATELIER (20. 7. 2026, odsouhlaseno) — NAHRAZUJE RASTR/blueprint
   Podle design-mocky/D-ios-tech.html (dark) + D-ios-tech-komponenty.html:
   Space Grotesk, mekke karty 20px se stinem, tint stitky, kapslova navigace,
   iOS kalendar/select/posuvniky. NAVRAT: smazat blok (konci KONEC D1).
   ========================================================================= */

/* --- D1.1 · Font: Space Grotesk vsude (prebiji Bahnschrift z R1) --- */
body, body * {
  font-family: "Space Grotesk", "Bahnschrift", "Segoe UI", sans-serif !important;
}

/* --- D1.2 · Tokeny: D dark paleta + mekke tvary --- */
:root {
  --font-ui: "Space Grotesk", sans-serif;
  --font-display: "Space Grotesk", sans-serif;
  --surface: #0D0F14; --surface-2: #12141B; --bg: #0D0F14;
  --panel: #171A22; --panel-2: #1D2129; --calm-panel: #171A22;
  --surface-glass: rgba(23, 26, 34, 0.88);
  --surface-row: #1D2129; --surface-row-hover: #232837;
  --calm-row: #1D2129; --calm-row-hover: #232837;
  --sidebar: rgba(13, 15, 20, 0.92);
  --ink: #F2F1EC; --ink-soft: rgba(242, 241, 236, 0.86);
  --muted: #878EA0; --muted-strong: #9BA2B4;
  --line: rgba(150, 160, 190, 0.14); --line-strong: rgba(150, 160, 190, 0.26);
  --calm-border: rgba(150, 160, 190, 0.14); --calm-border-strong: rgba(150, 160, 190, 0.26);
  --field: #1D2129; --calm-field: #1D2129; --field-strong: #232837;
  --accent: #5EA8FF; --accent-hover: #7FBAFF; --accent-dark: #9CC8FF; --accent-tint: #9CC8FF;
  --on-accent: #0A1220;
  --soft: rgba(94, 168, 255, 0.16);
  --brand-gold: #F0BE62; --action-gold: #5EA8FF; --action-gold-soft: rgba(94, 168, 255, 0.16);
  --brand-blue: #5EA8FF; --action-blue: #5EA8FF; --brand-red: #FF6257;
  --good: #4FC97C; --success: #4FC97C; --warn: #F0BE62; --warning: #F0BE62;
  --danger: #FF6257; --info: #5EA8FF;
  --good-bg: rgba(79, 201, 124, 0.15); --good-line: rgba(79, 201, 124, 0.4);
  --warn-bg: rgba(240, 190, 98, 0.16); --warn-line: rgba(240, 190, 98, 0.4);
  --bad-bg: rgba(255, 98, 87, 0.15); --bad-line: rgba(255, 98, 87, 0.42);
  --blue-bg: rgba(94, 168, 255, 0.16); --blue-line: rgba(94, 168, 255, 0.4);
  --ui-good-bg: rgba(79, 201, 124, 0.15); --ui-good-line: rgba(79, 201, 124, 0.4);
  --ui-warn-bg: rgba(240, 190, 98, 0.16); --ui-warn-line: rgba(240, 190, 98, 0.4);
  --ui-bad-bg: rgba(255, 98, 87, 0.15); --ui-bad-line: rgba(255, 98, 87, 0.42);
  --radius: 20px; --radius-sm: 14px;
  --system-panel-radius: 20px; --system-card-radius: 16px; --system-row-radius: 14px;
  --system-field-radius: 12px; --system-pill-radius: 999px;
  --shadow: 0 8px 28px rgba(0, 0, 0, 0.42);
}

/* --- D1.3 · Pozadi: ciste, bez rastru --- */
body {
  background: #0D0F14 !important;
}

/* --- D1.4 · Panely: karty se stinem, bez ramecku --- */
.panel {
  background: var(--panel) !important;
  border: 0 !important;
  border-radius: 20px !important;
  box-shadow: var(--shadow) !important;
}

/* --- D1.5 · Zaobleni (prepis ostrych rohu z R1.5) --- */
button.inline-action,
button.ghost-action,
button.primary-action,
:is(#dashboardView, #reportsView, #meetingsView, #projectsView, #coordinationView, #financeView, #closingView, #archiveView, #peopleView):is(#dashboardView, #reportsView, #meetingsView, #projectsView, #coordinationView, #financeView, #closingView, #archiveView, #peopleView) :is(button.inline-action, button.ghost-action, button.secondary-action, button.primary-action) {
  border-radius: 12px !important;
}
.status,
.archive-state-label,
.chip,
.access-chip,
.metric-hint-item {
  border-radius: 8px !important;
}
.segmented-control, .closing-mode-switch { border-radius: 12px !important; padding: 3px !important; background: var(--panel-2) !important; border: 0 !important; }
.segmented-control button, .closing-mode-switch button { border-radius: 9px !important; }
.nav-item { border-radius: 999px !important; }
input, select, textarea,
#closingView .closing-controls .closing-month-field input {
  border-radius: 12px !important;
  background: var(--panel-2) !important;
  border: 1px solid var(--line) !important;
}
.metrics .metric, .money-item, .daily-item, .daily-meeting-item, .time-entry-item,
.coordination-item, .time-person-card, .team-row, .month-chip,
.archive-result-pill, .performance-detail-row, .table-wrap, td, th,
.empty, #coordinationView .coordination-empty-state,
.dashboard-task-form, .money-form, .external-cost-inline-detail {
  border-radius: 14px !important;
}
.calendar-popover, .select-popover {
  border-radius: 16px !important;
  background: var(--panel-2) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadow) !important;
}
.select-popover .select-popover-option { border-radius: 11px !important; }
.hint-dot { border-radius: 50% !important; }

/* --- D1.6 · Radky/karty uvnitr panelu: tmavsi vrstva, bez ramu --- */
.daily-item, .daily-meeting-item, .time-entry-item, .money-item,
.coordination-item, .time-person-card, .team-row,
#closingView#closingView .time-person-card {
  background: var(--panel-2) !important;
  border: 0 !important;
  box-shadow: none !important;
}
#closingView#closingView .time-person-card.active {
  background: rgba(94, 168, 255, 0.16) !important;
  border: 0 !important;
  box-shadow: inset 0 0 0 1.5px var(--accent) !important;
}
.metrics .metric {
  background: var(--panel-2) !important;
  border: 0 !important;
}

/* --- D1.7 · Tlacitka: iOS (sentence case, 600) --- */
button.inline-action,
button.ghost-action,
button.primary-action,
:is(#dashboardView, #reportsView, #meetingsView, #projectsView, #coordinationView, #financeView, #closingView, #archiveView, #peopleView):is(#dashboardView, #reportsView, #meetingsView, #projectsView, #coordinationView, #financeView, #closingView, #archiveView, #peopleView) :is(button.inline-action, button.ghost-action, button.secondary-action, button.primary-action) {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 600 !important;
}
button.primary-action,
:is(#dashboardView, #reportsView, #meetingsView, #projectsView, #coordinationView, #financeView, #closingView, #archiveView, #peopleView):is(#dashboardView, #reportsView, #meetingsView, #projectsView, #coordinationView, #financeView, #closingView, #archiveView, #peopleView) button.primary-action {
  background: var(--accent) !important;
  color: var(--on-accent) !important;
  border: 0 !important;
}
button.primary-action:hover { background: var(--accent-hover) !important; color: var(--on-accent) !important; }
button.ghost-action,
button.inline-action {
  background: var(--panel-2) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
}
button.ghost-action.danger-action, button.inline-action.danger-inline {
  background: var(--bad-bg) !important;
  border-color: rgba(255, 98, 87, 0.4) !important;
  color: var(--danger) !important;
}

/* --- D1.8 · Nadpisy: sentence case (iOS), bez verzalek --- */
h1#viewTitle,
.panel-head h2,
:is(#dashboardView, #reportsView, #meetingsView, #projectsView, #coordinationView, #financeView, #closingView, #archiveView, #peopleView):is(#dashboardView, #reportsView, #meetingsView, #projectsView, #coordinationView, #financeView, #closingView, #archiveView, #peopleView) .panel-head h2 {
  text-transform: none !important;
  letter-spacing: -0.01em !important;
}
h1#viewTitle { font-size: 28px !important; }

/* --- D1.9 · Navigace: aktivni = modra kapsle --- */
.nav-item {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}
.nav .nav-item.active,
.sidebar .nav-item.active,
.nav-item.nav-item.nav-item.active,
html body .nav .nav-item.active {
  background: var(--soft) !important;
  color: var(--accent) !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* --- D1.10 · Stitky stavu: tint (bg z barvy stavu) --- */
.status,
.archive-state-label {
  border: 0 !important;
  padding: 4px 9px !important;
  background: color-mix(in srgb, currentColor 15%, transparent) !important;
}
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
  .status,
.archive-state-label {
    background: rgba(150, 160, 190, 0.14) !important;
  }
}

/* --- D1.11 · Osy: zaoblene, jemne --- */
.mini-progress .bar, .timeline-bar,
.coordination-deadline-track, .coordination-card-progress,
.coordination-mini-timeline, .coordination-progress-track,
#coordinationView .coordination-item .coordination-deadline-track {
  height: 5px !important;
  border: 0 !important;
  border-radius: 3px !important;
  background: rgba(150, 160, 190, 0.16) !important;
  overflow: hidden !important;
}
.bar-fill, .timeline-fill { border-radius: 3px !important; }

/* --- D1.12 · Fokus a formularove akcenty --- */
button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px !important;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(94, 168, 255, 0.22) !important;
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent) !important; }
.select-popover .select-popover-option.is-selected { background: var(--accent) !important; color: var(--on-accent) !important; }
.select-popover .select-popover-option:hover { background: var(--soft) !important; color: var(--accent-tint) !important; }

/* --- D1.13 · Posuvniky (scrollbary) --- */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(150, 160, 190, 0.28); border-radius: 5px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(150, 160, 190, 0.45); border: 2px solid transparent; background-clip: content-box; }

/* --- D1.14 · Prazdne stavy: mekke --- */
.empty, #coordinationView .coordination-empty-state {
  border: 1px dashed var(--line-strong) !important;
  border-radius: 14px !important;
  background: transparent !important;
}
/* KONEC D1 ============================================================== */

/* --- D1b · Dorazka: kalendar — vybrany den plny akcent (dle D mocku) --- */
.calendar-popover .calendar-grid button {
  background: transparent !important;
  border: 0 !important;
  color: var(--ink-soft) !important;
}
.calendar-popover .calendar-grid button:hover {
  background: var(--soft) !important;
  color: var(--accent-tint) !important;
}
.calendar-popover .calendar-grid button.active,
html body .calendar-popover .calendar-grid button.active {
  background: var(--accent) !important;
  color: var(--on-accent) !important;
  font-weight: 700 !important;
}
.calendar-popover .calendar-grid button.today:not(.active) {
  box-shadow: inset 0 0 0 1.5px var(--accent) !important;
  color: var(--accent-tint) !important;
}
.calendar-popover .calendar-head button {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: var(--ink) !important;
}
/* KONEC D1b */

/* --- D1c · Dorazka: segmenty sentence-case, aktivni = akcent (dle D mocku) --- */
.segmented-control button, .closing-mode-switch button,
html body :is(.segmented-control, .closing-mode-switch) button {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--muted) !important;
  background: transparent !important;
  border: 0 !important;
}
.segmented-control button.active, .closing-mode-switch button.active,
html body :is(.segmented-control, .closing-mode-switch) button.active {
  background: var(--accent) !important;
  color: var(--on-accent) !important;
  box-shadow: none !important;
}
/* KONEC D1c */

/* --- D1d · Sjednocena soustava zaobleni + akce ukolu (20. 7. 2026) ---
   Pravidlo: panel 20 · radek/karta 14 · pole+samostatne tlacitko 12 ·
   VSECHNY drobne prvky uvnitr radku 9 (chipy, stitky, checkboxy, inline
   tlacitka, komentarova kapsle) — zadny mix "skoro ctverec vs. kruh". */
button.inline-action,
.subtle-comment-action,
.status,
.archive-state-label,
.chip,
.access-chip,
.metric-hint-item,
.month-chip,
.archive-result-pill,
html body :is(button.inline-action, .subtle-comment-action) {
  border-radius: 9px !important;
}
.coordination-check, .comment-check,
html body :is(.coordination-check, .comment-check) {
  border-radius: 9px !important;
  border: 1.5px solid var(--line-strong) !important;
  background: transparent !important;
}
.coordination-check:hover, .comment-check:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}
.comment-check.is-checked, .task-item.is-done .coordination-check {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--on-accent) !important;
}
.subtle-comment-action {
  background: rgba(150, 160, 190, 0.12) !important;
  border: 0 !important;
  color: var(--muted-strong) !important;
}
.subtle-comment-action:hover {
  background: var(--soft) !important;
  color: var(--accent-tint) !important;
}
.task-unread-badge { border-radius: 999px !important; }

/* Akce ukolu: pravy sloupec — Upravit nahore, komentare pod nim */
.task-row { align-items: flex-start !important; }
.task-actions {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 6px !important;
  flex: 0 0 auto !important;
  margin-left: auto !important;
}
.task-actions .subtle-comment-action { margin: 0 !important; }

/* Inline formular upravy ukolu — stejny vzor jako pridavaci formular */
.task-edit-form {
  margin-top: 10px !important;
  background: rgba(150, 160, 190, 0.07) !important;
  border: 0 !important;
  padding: 12px !important;
}
.task-edit-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.task-edit-actions .danger-action { margin-left: auto; }
/* KONEC D1d */

/* --- D1d-fix · inline-action 9px i proti ID kladivu z D1.5 --- */
:is(#dashboardView, #reportsView, #meetingsView, #projectsView, #coordinationView, #financeView, #closingView, #archiveView, #peopleView):is(#dashboardView, #reportsView, #meetingsView, #projectsView, #coordinationView, #financeView, #closingView, #archiveView, #peopleView) button.inline-action {
  border-radius: 9px !important;
}
/* KONEC D1d-fix */

/* --- D1e · Pole terminu ukolu: calendar-field bez textoveho labelu --- */
.task-date-field {
  display: block !important;
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
}
.task-date-field .calendar-display-value {
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  pointer-events: none !important;
}
.task-date-field input { width: 100% !important; }
/* KONEC D1e */

/* --- D1e-fix · svisle vycentrovani overlay data --- */
.task-date-field .calendar-display-value { line-height: 1 !important; font-size: 13px !important; }
/* KONEC D1e-fix */

/* --- D1f · Posledni kapsle + presny stred overlay data --- */
.status.is-open, .status.is-closed, .status.status.status,
html body .status:is(.is-open, .is-closed) {
  border-radius: 9px !important;
}
label.task-date-field.task-date-field .calendar-display-value,
html body .task-date-field .calendar-display-value {
  top: 50% !important;
  transform: translateY(-50%) !important;
  bottom: auto !important;
  margin: 0 !important;
}
/* KONEC D1f */

/* --- D1g · ID kladivo na posledni kapsle a overlay (viz HANDOFF techniky) --- */
:is(#dashboardView, #reportsView, #meetingsView, #projectsView, #coordinationView, #financeView, #closingView, #archiveView, #peopleView):is(#dashboardView, #reportsView, #meetingsView, #projectsView, #coordinationView, #financeView, #closingView, #archiveView, #peopleView) :is(.status, .status-pill, .archive-state-label, .chip, .coordination-check, .comment-check, button.inline-action, .subtle-comment-action) {
  border-radius: 9px !important;
}
:is(#dashboardView, #reportsView, #meetingsView, #projectsView, #coordinationView, #financeView, #closingView, #archiveView, #peopleView):is(#dashboardView, #reportsView, #meetingsView, #projectsView, #coordinationView, #financeView, #closingView, #archiveView, #peopleView) .task-date-field .calendar-display-value {
  top: 50% !important;
  transform: translateY(-50%) !important;
  bottom: auto !important;
  margin: 0 !important;
  line-height: 1 !important;
}
/* KONEC D1g */

/* --- D1h · Overlay data v ukolech: 1:1 zakryv inputu (flex atrapa 42px) --- */
:is(#dashboardView, #reportsView, #meetingsView, #projectsView, #coordinationView, #financeView, #closingView, #archiveView, #peopleView):is(#dashboardView, #reportsView, #meetingsView, #projectsView, #coordinationView, #financeView, #closingView, #archiveView, #peopleView) .task-date-field {
  margin-top: 6px !important;
}
:is(#dashboardView, #reportsView, #meetingsView, #projectsView, #coordinationView, #financeView, #closingView, #archiveView, #peopleView):is(#dashboardView, #reportsView, #meetingsView, #projectsView, #coordinationView, #financeView, #closingView, #archiveView, #peopleView) .task-date-field input {
  margin: 0 !important;
}
:is(#dashboardView, #reportsView, #meetingsView, #projectsView, #coordinationView, #financeView, #closingView, #archiveView, #peopleView):is(#dashboardView, #reportsView, #meetingsView, #projectsView, #coordinationView, #financeView, #closingView, #archiveView, #peopleView) .task-date-field .calendar-display-value {
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: auto !important;
  transform: none !important;
}
/* KONEC D1h */

/* =========================================================================
   S1 · SJEDNOCENÍ — jeden nekompromisní kontrakt tvarů (20. 7. 2026)
   Cíl: "stejná věc = stejné provedení" napříč všemi 8 záložkami.
   Selektory mají max. specificitu (html body + zdvojené/ztrojené :is())
   aby přebily VŠECHNY historické vrstvy (blueprint #view#view, T1, D1).
   NAVRAT: smazat blok (končí KONEC S1) + obnovit barvy ze
   styles.backup-pre-s1.css. Soustava: panel 20 · řádek/dlaždice 14 ·
   pole+tlačítko 12 · drobnost 9 · buňka tabulky 0 · osa r3/h5.
   ========================================================================= */

/* --- S1.1 · Záznamový řádek: jeden tvar (r14, výplň, bez rámečku) --------
   Sjednocuje: daily-item, money-item, time-entry-item, coordination-item,
   time-person-card (byl HRANATÝ r2), team-row. Vnitřní layout necháváme,
   sjednocujeme jen SKOŘÁPKU (tvar/výplň/rámeček/stav). */
html body :is(#dashboardView,#reportsView,#meetingsView,#projectsView,#coordinationView,#financeView,#closingView,#archiveView,#peopleView):is(#dashboardView,#reportsView,#meetingsView,#projectsView,#coordinationView,#financeView,#closingView,#archiveView,#peopleView):is(#dashboardView,#reportsView,#meetingsView,#projectsView,#coordinationView,#financeView,#closingView,#archiveView,#peopleView) :is(.daily-item,.daily-meeting-item,.time-entry-item,.money-item,.coordination-item,.time-person-card,.team-row) {
  border-radius: 14px !important;
  border: 0 !important;
  background: var(--panel-2, #1D2129) !important;
  box-shadow: none !important;
}
/* Aktivní/vybraný stav = vnitřní akcentový ring (nemění velikost), ne rámeček */
html body :is(#dashboardView,#reportsView,#meetingsView,#projectsView,#coordinationView,#financeView,#closingView,#archiveView,#peopleView):is(#dashboardView,#reportsView,#meetingsView,#projectsView,#coordinationView,#financeView,#closingView,#archiveView,#peopleView):is(#dashboardView,#reportsView,#meetingsView,#projectsView,#coordinationView,#financeView,#closingView,#archiveView,#peopleView) :is(.daily-item,.money-item,.time-entry-item,.coordination-item,.time-person-card,.team-row).active,
html body :is(#dashboardView,#reportsView,#meetingsView,#projectsView,#coordinationView,#financeView,#closingView,#archiveView,#peopleView):is(#dashboardView,#reportsView,#meetingsView,#projectsView,#coordinationView,#financeView,#closingView,#archiveView,#peopleView):is(#dashboardView,#reportsView,#meetingsView,#projectsView,#coordinationView,#financeView,#closingView,#archiveView,#peopleView) :is(.daily-item,.money-item,.time-entry-item,.coordination-item,.time-person-card,.team-row).is-selected {
  background: rgba(94, 168, 255, 0.16) !important;
  box-shadow: inset 0 0 0 1.5px var(--accent, #5EA8FF) !important;
  border: 0 !important;
}

/* --- S1.2 · Projekty/Archiv: řádky-karty → plochý řádek (r20 → r14) ------- */
html body :is(#projectsView,#archiveView):is(#projectsView,#archiveView) tbody tr {
  background: var(--panel-2, #1D2129) !important;
  border: 0 !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}

/* --- S1.3 · Buňky tabulek: r0, žádný per-buňkový rámeček ani pozadí -------
   Ruší "pospojované zaoblené buňky" ve Výkazu práce. Oddělovač řádků =
   spodní hairline na tr (jen datové tabulky – closing). */
html body :is(#projectsView,#archiveView,#closingView):is(#projectsView,#archiveView,#closingView) :is(td,th) {
  border-radius: 0 !important;
}
html body :is(#projectsView,#archiveView,#closingView):is(#projectsView,#archiveView,#closingView) tbody td {
  border: 0 !important;
  background: transparent !important;
}
html body #closingView#closingView .closing-time-detail tbody tr {
  border-bottom: 1px solid var(--line, rgba(150,160,190,.14)) !important;
}
html body #closingView#closingView .closing-time-detail tbody tr:last-child {
  border-bottom: 0 !important;
}

/* --- S1.4 · Statistická dlaždice: jeden layout (popisek NAD hodnotou) -----
   Sjednocuje: metric, closing fakta (byla grid 1fr|1fr = necentrovaná),
   archivní výslednice (byla r16 + centrovaná). Vše vlevo, r14, výplň. */
html body :is(#dashboardView,#reportsView,#financeView,#closingView,#archiveView,#coordinationView):is(#dashboardView,#reportsView,#financeView,#closingView,#archiveView,#coordinationView) :is(.metric, .archive-result-pill) {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 4px !important;
  text-align: left !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;
}
html body #closingView#closingView .closing-person-facts span {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 4px !important;
  text-align: left !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;
  background: var(--panel-2, #1D2129) !important;
}
/* Archivní výslednice: sebrat r16 a barevný rámeček, nechat semantický tint */
html body #archiveView#archiveView .archive-result-pill {
  border: 0 !important;
}

/* --- S1.5 · Tlačítka: dotáhnout migraci (0 verzálek, 0 kapslí mimo nav) ---
   Nemigrované staré akce v Projektech/Archivu/Koordinaci → r9, věta, 600. */
html body :is(#projectsView .status-cell .pin-action, #projectsView .status-cell .project-detail-action, #projectsView .status-cell .row-actions button, #projectsView .status-cell .coordination-phase-action, #archiveView .archive-right-actions button, #archiveView .archive-detail-action, #archiveView .status-cell .row-actions button, #coordinationView .access-chip) {
  border-radius: 9px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 600 !important;
  font-size: 12px !important;
}

/* --- S1.6 · Šipky kalendáře: jedna forma (kruh) všude ---------------------
   Bylo: Práce/Schůzky r999 vs Uzávěrka r9. Sjednoceno na kruh. */
html body :is(.hours-calendar-head button, .calendar-head button, .calendar-popover .calendar-head button, .closing-month-nav button, [data-calendar-nav]) {
  border-radius: 999px !important;
}

/* --- S1.7 · Progres osy: jedna výška 5px, r3, jedna barva dráhy ----------- */
html body :is(#dashboardView,#reportsView,#projectsView,#coordinationView,#archiveView,#closingView):is(#dashboardView,#reportsView,#projectsView,#coordinationView,#archiveView,#closingView) :is(.bar, .timeline-bar, .coordination-deadline-track, .coordination-progress-track) {
  height: 5px !important;
  border-radius: 3px !important;
  background: rgba(150, 160, 190, 0.16) !important;
  overflow: hidden !important;
}
html body :is(#dashboardView,#reportsView,#projectsView,#coordinationView,#archiveView,#closingView):is(#dashboardView,#reportsView,#projectsView,#coordinationView,#archiveView,#closingView) :is(.bar-fill, .timeline-fill) {
  border-radius: 3px !important;
}
/* KONEC S1 ============================================================== */

/* --- S1.5b · Dorážka: VŠECHNA .row-actions tlačítka (i mimo .status-cell) --- */
html body :is(#projectsView, #archiveView, #coordinationView):is(#projectsView, #archiveView, #coordinationView) :is(.row-actions button, .cell-stack .row-actions button, .project-detail-action, .coordination-phase-action, .pin-action) {
  border-radius: 9px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 600 !important;
  font-size: 12px !important;
}
/* KONEC S1.5b */

/* --- S2 · Stavový podkres úkolů (20. 7. 2026, oprava): tint jde na VIDITELNOU
   kartu (.task-row), ne na článek pod ní — jinak neprůhledná .task-row tint
   překryla a barva prosvítala jen jako rámeček. Zároveň sjednocen radius
   .task-row na 14 (byl 22 = --calm-radius-card, jiný než zbytek appky).
   Jednotný jazyk: --good hotové, --red po termínu a nesplněné. */
html body #dashboardView#dashboardView .dashboard-task-list .task-row {
  border-radius: 14px !important;
}
html body #dashboardView#dashboardView .dashboard-task-list .task-item.is-done .task-row {
  background: rgba(79, 201, 124, 0.13) !important;
  border-color: rgba(79, 201, 124, 0.42) !important;
}
html body #dashboardView#dashboardView .dashboard-task-list .task-item.is-late .task-row {
  background: rgba(255, 98, 87, 0.13) !important;
  border-color: rgba(255, 98, 87, 0.42) !important;
}
/* KONEC S2 */

/* --- S3 · Úkoly: líc = co + do kdy, detail = plný kontext (20. 7. 2026) --- */
html body #dashboardView#dashboardView .task-detail-context {
  grid-column: 1 / -1 !important;
  margin: 0 0 2px !important;
  color: var(--muted) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}
html body #dashboardView#dashboardView .task-face-meta.is-late-meta {
  color: var(--red, #FF6257) !important;
  font-weight: 600 !important;
}
/* KONEC S3 */

/* --- S3b · Název úkolu se zobrazí CELÝ (zrušen ořez na 2 řádky) ------------
   Název = to hlavní „co udělat"; delší text se musí dát přečíst, karta roste. */
html body #dashboardView#dashboardView .task-item .task-main strong {
  -webkit-line-clamp: unset !important;
  display: block !important;
  overflow: visible !important;
  white-space: normal !important;
  text-overflow: clip !important;
}
/* KONEC S3b */

/* --- S4 · Práce + Schůzky: kalendářní karta sjednocena s panely (20. 7. 2026) ---
   .hours-month-calendar (i .meeting-month-calendar) měla poloprůhledné pozadí
   + 1px okraj (starý vzhled), boční panely mají plné --panel bez okraje. */
html body :is(#reportsView, #meetingsView) .hours-month-calendar,
html body #meetingsView .meeting-month-calendar {
  background: var(--panel, #171A22) !important;
  border: 0 !important;
}
/* KONEC S4 */

/* --- S5 · Podtitulek stránky Práce: velikost jako nadpisy panelů + rovné
   rozestupy mezi třemi segmenty osoba · měsíc · hodiny (20. 7. 2026) --- */
html body .topbar #timeTopSummary,
html body .topbar #timeTopSummary strong {
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  color: var(--ink-soft, rgba(242, 241, 236, 0.86)) !important;
}
html body .topbar #timeTopSummary strong {
  gap: 0 !important; /* jinak vnitřní flex-gap 10px přidá vpravo od tečky → nesymetrie */
}
html body .topbar #timeTopSummary strong + strong::before {
  content: "·" !important;
  margin: 0 9px 0 0 !important; /* pravá mezera 9px; levá = vnější gap 9px → symetrie */
  color: var(--muted, #878EA0) !important;
  font-weight: 500 !important;
}
/* KONEC S5 */

/* --- S6 · Práce: Datum a Projekt na celý řádek (20. 7. 2026) ---
   Byly ve 2sloupcové mřížce (201px) → dlouhý název projektu se ořezával.
   Fáze | Hodin zůstávají vedle sebe. */
html body #reportsView .time-form-fields > .calendar-field,
html body #reportsView .time-form-fields > label:has(#timeProjectSelect) {
  grid-column: 1 / -1 !important;
}
/* KONEC S6 */

/* --- S7 · Účastníci (Schůzky): rozbalovací seznam sjednocen s select popoverem
   (20. 7. 2026). Kontejner: panel-2 / radius 16 / stín. Položky: radius 11,
   hover akcent tint, zaškrtnuté akcent tint. Checkbox: akcentová výplň. --- */
html body #meetingsView#meetingsView .meeting-participant-list {
  background: var(--panel-2, #1D2129) !important;
  border: 1px solid var(--line, rgba(150, 160, 190, 0.14)) !important;
  border-radius: 16px !important;
  box-shadow: var(--shadow, 0 8px 28px rgba(0, 0, 0, 0.42)) !important;
  padding: 8px !important;
  gap: 3px 6px !important;
  overflow-y: auto !important;
}
html body #meetingsView#meetingsView .meeting-participant-list label,
html body #meetingsView#meetingsView .meeting-participant-list label:hover {
  grid-template-columns: 18px minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: center !important;
  min-height: 38px !important;
  height: auto !important;
  padding: 8px 10px !important;
  border: 0 !important;
  border-radius: 11px !important;
  background: transparent !important;
  color: var(--ink) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: background 0.12s ease, color 0.12s ease !important;
}
html body #meetingsView#meetingsView .meeting-participant-list label:hover {
  background: var(--soft, rgba(94, 168, 255, 0.16)) !important;
  color: var(--accent-tint, #9CC8FF) !important;
}
html body #meetingsView#meetingsView .meeting-participant-list label:has(input:checked) {
  background: var(--soft, rgba(94, 168, 255, 0.16)) !important;
  color: var(--accent-tint, #9CC8FF) !important;
  font-weight: 600 !important;
}
html body #meetingsView#meetingsView .meeting-participant-list input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1.5px solid var(--line-strong, rgba(150, 160, 190, 0.26)) !important;
  border-radius: 6px !important;
  background: transparent !important;
  box-shadow: none !important;
  display: inline-grid !important;
  place-items: center !important;
  cursor: pointer !important;
}
html body #meetingsView#meetingsView .meeting-participant-list input[type="checkbox"]:checked {
  border-color: var(--accent, #5EA8FF) !important;
  background: var(--accent, #5EA8FF) !important;
  box-shadow: none !important;
}
html body #meetingsView#meetingsView .meeting-participant-list input[type="checkbox"]::after {
  content: "" !important;
  width: 5px !important;
  height: 9px !important;
  border: solid var(--on-accent, #0A1220) !important;
  border-width: 0 2px 2px 0 !important;
  border-radius: 0 !important;
  transform: rotate(45deg) translateY(-1px) scale(0) !important;
  transition: transform 0.12s ease !important;
  background: transparent !important;
}
html body #meetingsView#meetingsView .meeting-participant-list input[type="checkbox"]:checked::after {
  transform: rotate(45deg) translateY(-1px) scale(1) !important;
}
/* KONEC S7 */

/* --- S8 · Projekty: metrické pily radius 16→14 + konsolidace akcí (20. 7. 2026)
   Sekundární akce (Upravit/Přidat fázi/Archivovat/Smazat) schované pod „Více",
   po rozbalení jako sladěné menu (panel-2/radius14/stín), položky přes celou šířku. */
html body #projectsView .metric-hint-item,
html body #archiveView .metric-hint-item {
  border-radius: 14px !important;
}
html body #projectsView .cell-stack .row-actions.hidden {
  display: none !important;
}
html body #projectsView .cell-stack .row-actions:not(.hidden) {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  margin-top: 6px !important;
  padding: 6px !important;
  background: var(--panel-2, #1D2129) !important;
  border: 1px solid var(--line, rgba(150, 160, 190, 0.14)) !important;
  border-radius: 14px !important;
  box-shadow: var(--shadow, 0 8px 28px rgba(0, 0, 0, 0.42)) !important;
}
html body #projectsView .cell-stack .row-actions button {
  width: 100% !important;
  justify-content: flex-start !important;
  text-align: left !important;
}
/* KONEC S8 */

/* --- S9 · Projekty: řádek přestavěn na KARTU (20. 7. 2026, na přání) ---
   Z 3sloupcové tabulky na kartu: identita + akce v jedné řadě (Koordinovat,
   Detail výkonu, Upravit, Přidat fázi, Více, stav), údaje vepsané přímo na
   osy Hodiny/Termín na celou šířku (žádné opakující se pily). */
html body :is(#projectsView, #archiveView) .project-card-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
html body :is(#projectsView, #archiveView) .project-card {
  background: var(--panel-2, #1D2129) !important;
  border: 0 !important;
  border-radius: 14px !important;
  padding: 16px 18px !important;
  box-shadow: none !important;
}
html body :is(#projectsView, #archiveView) .project-card-top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}
html body :is(#projectsView, #archiveView) .project-card-identity { min-width: 0 !important; }
html body :is(#projectsView, #archiveView) .project-card-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  position: relative !important;
}
html body :is(#projectsView, #archiveView) .project-card-status { margin-left: 2px !important; }
html body :is(#projectsView, #archiveView) .project-card-axes {
  margin-top: 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
html body :is(#projectsView, #archiveView) .project-card-axes .bar-label {
  display: flex !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 5px !important;
  font-size: 12px !important;
  color: var(--muted, #878EA0) !important;
}
html body :is(#projectsView, #archiveView) .project-card-axes .bar-label span:first-child { color: var(--ink-soft, rgba(242,241,236,.86)) !important; }
html body :is(#projectsView, #archiveView) .project-card-axes .bar-label .is-late { color: var(--red, #FF6257) !important; }
/* row-actions menu absolutně pod „Více" (nové umístění = .project-card-actions) */
html body :is(#projectsView, #archiveView) .project-card-actions .row-actions.hidden { display: none !important; }
html body :is(#projectsView, #archiveView) .project-card-actions .row-actions:not(.hidden) {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  right: 0 !important;
  z-index: 40 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  min-width: 190px !important;
  margin: 0 !important;
  padding: 6px !important;
  background: var(--panel-2, #1D2129) !important;
  border: 1px solid var(--line, rgba(150,160,190,.14)) !important;
  border-radius: 14px !important;
  box-shadow: var(--shadow, 0 8px 28px rgba(0,0,0,.42)) !important;
}
html body :is(#projectsView, #archiveView) .project-card-actions .row-actions button {
  width: 100% !important;
  justify-content: flex-start !important;
  text-align: left !important;
}
/* KONEC S9 */

/* --- S9b · Projekty: 2sloupcový layout karty (20. 7. 2026, na přání) ---
   Identita vlevo, vpravo akce nahoře + osy dole ve volném prostoru; osy
   přitlačené ke spodku pravého sloupce → spodní osa lícuje se spodkem
   identity a karta se pěkně uzavře. */
html body :is(#projectsView, #archiveView) .project-card {
  display: grid !important;
  grid-template-columns: minmax(240px, 330px) minmax(0, 1fr) !important;
  column-gap: 24px !important;
  align-items: stretch !important;
}
html body :is(#projectsView, #archiveView) .project-card-identity { grid-column: 1 !important; }
html body :is(#projectsView, #archiveView) .project-card-right {
  grid-column: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 14px !important;
  min-width: 0 !important;
}
html body :is(#projectsView, #archiveView) .project-card-actions { justify-content: flex-end !important; }
html body :is(#projectsView, #archiveView) .project-card-axes { margin-top: 0 !important; }
html body :is(#projectsView, #archiveView) .external-cost-inline-detail { grid-column: 1 / -1 !important; }
/* KONEC S9b */

/* --- S10 · Detail výkonu: kompaktní sloupce + srovnané výšky řádků (20. 7. 2026)
   Byl jeden sloupec 1355px (rozlité) → newspaper flow do ~2–3 sloupců, sekce se
   nelámou. Řádky s otazníkem byly vyšší (hint-dot 24px) → dot 16px + align center. */
html body :is(#projectsView, #archiveView) .external-cost-inline-detail:not(.hidden) {
  column-width: 380px !important;
  column-gap: 28px !important;
  display: block !important;
}
html body :is(#projectsView, #archiveView) .external-cost-inline-detail .performance-detail-section {
  break-inside: avoid !important;
  margin: 0 0 16px !important;
}
html body :is(#projectsView, #archiveView) .external-cost-inline-detail .performance-detail-rows {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
html body :is(#projectsView, #archiveView) .external-cost-inline-detail .performance-detail-row {
  align-items: center !important;
  min-height: 30px !important;
}
html body :is(#projectsView, #archiveView) .external-cost-inline-detail .hint-dot {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  max-width: 16px !important;
  min-height: 16px !important;
  max-height: 16px !important;
  font-size: 10px !important;
}
/* KONEC S10 */

/* --- S10b · Detail výkonu: nadpis místo dělící linky, zarovnaný s číslem
   projektu (20. 7. 2026, na přání) --- */
html body :is(#projectsView, #archiveView) .external-cost-inline-detail:not(.hidden) {
  margin-top: 16px !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}
html body :is(#projectsView, #archiveView) .external-cost-inline-detail .performance-detail-head {
  column-span: all !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--ink, #F2F1EC) !important;
  text-transform: none !important;
  letter-spacing: -0.01em !important;
}
/* KONEC S10b */

/* --- S11 · Finance: badge druhu pohybu → D paleta + radius 9 (20. 7. 2026)
   Byly staré barvy (48,209,88 / 255,69,58 / 255,159,10) a pilulky 999.
   Sladěno: Příjem=--good, Výplata=--red, Výdaj/Režie=--gold, Vyrovnání=fialová. */
html body #financeView#financeView .money-item .money-type {
  border-radius: 9px !important;
}
html body #financeView#financeView .money-item.income .money-type {
  color: #7FE0A6 !important;
  background: rgba(79, 201, 124, 0.15) !important;
  border-color: rgba(79, 201, 124, 0.40) !important;
}
html body #financeView#financeView .money-item.payroll .money-type {
  color: #FF9187 !important;
  background: rgba(255, 98, 87, 0.15) !important;
  border-color: rgba(255, 98, 87, 0.40) !important;
}
html body #financeView#financeView .money-item.project-expense .money-type,
html body #financeView#financeView .money-item.overhead .money-type {
  color: #F0BE62 !important;
  background: rgba(240, 190, 98, 0.16) !important;
  border-color: rgba(240, 190, 98, 0.42) !important;
}
html body #financeView#financeView .money-item.settlement .money-type {
  color: #C9BEFF !important;
  background: rgba(156, 140, 255, 0.16) !important;
  border-color: rgba(156, 140, 255, 0.42) !important;
}
/* KONEC S11 */

/* --- S11b · Finance: barva částek sladěná s badge/D paletou (20. 7. 2026) --- */
html body #financeView#financeView .money-amount.positive { color: #7FE0A6 !important; }
html body #financeView#financeView .money-amount.negative { color: #FF9187 !important; }
/* KONEC S11b */

/* --- S11c · Finance: částka vertikálně na střed (měla min-height 28px, text
   ~16px seděl nahoře → 6px nad středem). Flex center v boxu. (20. 7. 2026) --- */
html body #financeView#financeView .money-item .money-amount {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
}
/* KONEC S11c */

/* --- S12 · Archiv: víc-sloupcová karta (20. 7. 2026, na přání) ---
   Sloupce: identita · [poznámka po dokončení] · 4 výslednice (2×2) · akce nad
   sebou. Pily i akce roztažené na výšku identity → spodní řada lícuje s řádkem
   „začátek 3. 3.". Poznámka jen když existuje (třída .has-note). */
html body #archiveView .archive-card {
  display: grid !important;
  grid-template-columns: minmax(200px, 260px) minmax(140px, 0.8fr) minmax(0, 1.15fr) max-content !important;
  column-gap: 22px !important;
  align-items: stretch !important;
}
html body #archiveView .archive-note-col {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  min-width: 0 !important;
  /* margin-top nastavuje dynamicky alignArchiveNotes() (zarovná s FÁZE) */
}
/* „Bez poznámky" — sjednoceno s napsanou poznámkou (font i barva) */
html body #archiveView .archive-note-col .archive-note-empty {
  color: var(--ink-soft, rgba(242, 241, 236, 0.86)) !important;
}
html body #archiveView .archive-note-col b {
  color: var(--muted, #878EA0) !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  font-weight: 700 !important;
}
html body #archiveView .archive-note-col span {
  color: var(--ink-soft, rgba(242, 241, 236, 0.86)) !important;
  font-size: 12.5px !important;
  line-height: 1.5 !important;
}
html body #archiveView .archive-card .archive-result-grid {
  grid-column: auto !important; /* přebít staré 1/-1, ať sedí do svého sloupce */
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-rows: 1fr !important; /* 4 pily stejně vysoké a roztažené na výšku identity */
  gap: 8px !important;
  align-content: stretch !important;
}
html body #archiveView .archive-actions-col {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 8px !important;
  min-width: 120px !important;
}
html body #archiveView .archive-actions-col > * {
  width: 100% !important;
  margin: 0 !important;
  text-align: center !important;
  justify-content: center !important;
}
html body #archiveView .archive-actions-col .project-card-status {
  background: color-mix(in srgb, currentColor 15%, transparent) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
html body #archiveView .external-cost-inline-detail { grid-column: 1 / -1 !important; }
/* KONEC S12 */

/* --- S13 · Detail výkonu: multicol → grid (oprava přeskakujícího tooltipu na
   tabletu) + kompaktní zarovnané výslednice (20. 7. 2026, na přání) ---
   Multi-column (column-width:380px z S10) na užších šířkách rozřízl dlouhý
   tooltip (REŽIE) na dva kusy do dvou sloupců — abs. pozicovaný ::after se
   fragmentuje ve fragmentačním kontextu multicol. Grid fragmentaci nemá.
   Sekce plynou po řádcích, hlavička přes celou šířku. */
html body :is(#projectsView, #archiveView) .external-cost-inline-detail:not(.hidden) {
  column-width: auto !important;
  columns: auto !important;
  column-count: auto !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
  grid-auto-rows: min-content !important;
  align-items: start !important;
  column-gap: 28px !important;
  row-gap: 18px !important;
}
html body :is(#projectsView, #archiveView) .external-cost-inline-detail:not(.hidden) > .performance-detail-head {
  grid-column: 1 / -1 !important;
  margin: 0 !important;
}
html body :is(#projectsView, #archiveView) .external-cost-inline-detail .performance-detail-section {
  margin: 0 !important;
}
/* Zelené výslednice (2×2): kompaktní, svisle vycentrované → lícují s pravým
   sloupcem akčních tlačítek (Skrýt detail · Vrátit · Dokončeno), místo aby se
   roztahovaly na plnou výšku identity (ta na tabletu bobtná zalomeným názvem). */
html body #archiveView .archive-card .archive-result-grid {
  grid-auto-rows: min-content !important;
  align-content: center !important;
}
/* KONEC S13 */

/* --- S14 · Fakturační plán u fáze — editor platebních milníků (21. 7. 2026)
   Feature Cashflow+fakturace, Fáze 1. Editor v #projectForm (stejný jazyk jako
   profession-editor): řádky popis · podíl % · částka · měsíc · odebrat, +
   souhrn se zeleným/varovným tónem. Detail výkonu dostal sekci „Fakturační plán". */
html body #projectForm .billing-plan-editor {
  padding: 12px !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  background: var(--field) !important;
}
html body #projectForm .milestone-rows-head,
html body #projectForm .milestone-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 78px 118px 148px 30px !important;
  gap: 8px !important;
  align-items: center !important;
}
html body #projectForm .milestone-rows-head {
  margin: 2px 0 8px !important;
  padding: 0 2px !important;
  font-family: var(--font-ui) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--muted, #878EA0) !important;
}
html body #projectForm .milestone-rows {
  display: grid !important;
  gap: 8px !important;
}
html body #projectForm .milestone-percent-wrap {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
}
html body #projectForm .milestone-percent-wrap input {
  width: 100% !important;
  padding-right: 22px !important;
}
html body #projectForm .milestone-percent-wrap span {
  position: absolute !important;
  right: 10px !important;
  color: var(--muted, #878EA0) !important;
  font-size: 12px !important;
  pointer-events: none !important;
}
html body #projectForm .milestone-date-field {
  margin: 0 !important;
  min-width: 0 !important;
}
html body #projectForm .milestone-remove {
  width: 30px !important;
  height: 30px !important;
  padding: 0 !important;
  border: 1px solid var(--line) !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: var(--muted, #878EA0) !important;
  font-size: 16px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
html body #projectForm .milestone-remove:hover {
  border-color: var(--red, #FF6257) !important;
  color: var(--red, #FF6257) !important;
}
html body #projectForm .milestone-summary {
  margin-top: 10px !important;
  padding-top: 10px !important;
  border-top: 1px solid var(--line) !important;
  font-family: var(--font-ui) !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: var(--ink-soft, rgba(242, 241, 236, 0.86)) !important;
}
html body #projectForm .milestone-summary.is-ok {
  color: var(--good, #4FC97C) !important;
}
html body #projectForm .milestone-summary.is-warn {
  color: var(--gold, #F0BE62) !important;
}
/* KONEC S14 */

/* --- S15 · Fakturace (21. 7. 2026, feature Cashflow+fakturace Fáze 2)
   Nová záložka: formulář Nová faktura (profil → projekt → milníky → odběratel
   → číslo/datumy/DPH → položky → Vystavit) + databáze faktur s filtry a exportem. */
html body #invoicingView .invoicing-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 18px;
  align-items: start;
}
html body #invoicingView .invoice-panel {
  display: flex;
  flex-direction: column;
  gap: 13px;
  min-width: 0;
}
html body #invoicingView .invoice-panel .panel-head { margin-bottom: 3px; }
/* jednotný label styl pro celé view (verzálky 11px, jako pole) — sjednotí h3→label */
html body #invoicingView .invoice-panel > label,
html body #invoicingView .invoice-panel .invoice-two > label {
  font-size: 11px;
  font-weight: 760;
  text-transform: uppercase;
  letter-spacing: normal;
  color: var(--muted, #878EA0);
}
html body #invoicingView .invoice-panel > label,
html body #invoicingView .invoice-panel .invoice-two > label { display: grid; gap: 6px; }
/* Sekční popisek = o úroveň výš než popisky polí (jinak byl vizuálně stejný → plocho) */
html body #invoicingView .invoice-block-label {
  display: block;
  font-size: 12px;
  font-weight: 720;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink, #F2F1EC);
  margin: 14px 0 2px;
}
html body #invoicingView .invoice-items-headrow .invoice-block-label { margin: 0; }
html body #invoicingView .invoice-milestone { display: flex !important; }
html body #invoicingView .invoice-milestone-name { font-weight: 500; }
html body #invoicingView .invoice-items-headrow { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
html body #invoicingView .invoice-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
html body #invoicingView .invoice-items-hint { font-size: 11.5px; color: var(--muted, #878EA0); text-transform: none; letter-spacing: 0; font-weight: 500; margin: -4px 0 4px; }
@media (max-width: 1080px) {
  html body #invoicingView .invoicing-layout { grid-template-columns: 1fr; }
}
html body #invoicingView .invoice-form-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
html body #invoicingView .invoice-number-badge {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: var(--accent, #5EA8FF) !important;
  background: color-mix(in srgb, var(--accent, #5EA8FF) 15%, transparent) !important;
  padding: 5px 12px !important;
  border-radius: 9px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  margin: 0 !important;
  white-space: nowrap !important;
}
html body #invoicingView .invoice-panel .panel-head { align-items: center !important; }
/* Oba sloupce musí začínat na stejné výšce — panel databáze dědil margin-top 16px */
html body #invoicingView .invoicing-layout > * { margin: 0 !important; }
/* Akce vpravo dole (Náhled PDF · Vystavit fakturu) */
html body #invoicingView .invoice-panel .form-actions { justify-content: flex-end !important; }
html body #invoicingView .invoice-milestones { display: flex; flex-direction: column; gap: 6px; }
html body #invoicingView .invoice-milestone {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--panel-2, #1D2129);
  border: 0;
  border-radius: 14px;
  cursor: pointer;
}
html body #invoicingView .invoice-milestone {
  text-transform: none !important;
  letter-spacing: 0 !important;
}
/* Vlastní accent checkbox (nativní dědil min-height 38px → obdélník + pozadí) */
html body #invoicingView .invoice-milestone-check {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(150, 160, 190, 0.34) !important;
  border-radius: 6px !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer !important;
  position: relative !important;
}
html body #invoicingView .invoice-milestone-check:checked {
  background: var(--accent, #5EA8FF) !important;
  border-color: var(--accent, #5EA8FF) !important;
}
html body #invoicingView .invoice-milestone-check:checked::after {
  content: "" !important;
  position: absolute !important;
  left: 5px !important;
  top: 1px !important;
  width: 5px !important;
  height: 9px !important;
  border: solid var(--on-accent, #0A1220) !important;
  border-width: 0 2px 2px 0 !important;
  transform: rotate(45deg) !important;
}
html body #invoicingView .invoice-milestone-name { flex: 1; font-size: 13px; text-transform: none; letter-spacing: 0; }
html body #invoicingView .invoice-milestone-when { color: var(--muted, #878EA0); }
html body #invoicingView .invoice-milestone-amount { font-weight: 700; font-size: 13px; }
html body #invoicingView .invoice-empty { font-size: 12.5px; color: var(--muted, #878EA0); margin: 0; }
html body #invoicingView .invoice-note-field textarea,
html body #invoicingView .invoice-customer-block textarea { resize: vertical; }
html body #invoicingView .invoice-items-head,
html body #invoicingView .invoice-item-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 70px 110px 110px 30px;
  gap: 8px;
  align-items: center;
}
html body #invoicingView .invoice-items-head {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted, #878EA0);
  margin: 8px 2px 8px;
}
html body #invoicingView .invoice-items { display: flex; flex-direction: column; gap: 8px; }
html body #invoicingView .invoice-item-total { font-size: 13px; text-align: right; }
html body #invoicingView .invoice-item-remove {
  width: 30px; height: 30px; padding: 0;
  border: 1px solid var(--line, rgba(150,160,190,.14));
  border-radius: 9px; background: transparent;
  color: var(--muted, #878EA0); font-size: 16px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
html body #invoicingView .invoice-item-remove:hover { border-color: var(--red, #FF6257); color: var(--red, #FF6257); }
html body #invoicingView .invoice-total-row { margin-top: 12px; display: flex; flex-direction: column; gap: 4px; }
html body #invoicingView .invoice-total-line { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-soft, rgba(242,241,236,.86)); }
html body #invoicingView .invoice-total-grand {
  font-size: 16px; font-weight: 700; color: var(--ink, #F2F1EC);
  border-top: 0; padding-top: 4px; margin-top: 6px;
}
html body #invoicingView .invoice-total-warn { color: var(--gold, #F0BE62); }
html body #invoicingView .invoice-filter-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
html body #invoicingView .invoice-filter-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 32px !important;
  min-height: 32px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  padding: 0 12px !important;
  border-radius: 9px !important;
  border: 1px solid var(--line, rgba(150,160,190,.14)) !important;
  background: transparent !important;
  color: var(--muted, #878EA0) !important;
  cursor: pointer !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
html body #invoicingView .invoice-filter-chip span { opacity: 0.6; font-weight: 500 !important; }
html body #invoicingView .invoice-filter-chip.is-active {
  background: var(--accent, #5EA8FF) !important;
  color: var(--on-accent, #0A1220) !important;
  border-color: var(--accent, #5EA8FF) !important;
}
html body #invoicingView .invoice-filter-chip.is-active span { opacity: 0.8; }
html body #invoicingView .invoice-list { display: flex; flex-direction: column; }
html body #invoicingView .invoice-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) max-content 92px max-content;
  gap: 12px; align-items: center; padding: 10px 0;
  border-top: 1px solid var(--line, rgba(150,160,190,.14));
}
html body #invoicingView .invoice-row-number { font-family: var(--font-mono, ui-monospace, monospace); font-size: 13px; }
html body #invoicingView .invoice-row-main { display: flex; flex-direction: column; min-width: 0; }
html body #invoicingView .invoice-row-main strong { font-size: 13px; }
html body #invoicingView .invoice-row-main small { font-size: 11.5px; color: var(--muted, #878EA0); }
html body #invoicingView .invoice-row-amount { font-weight: 700; font-size: 13px; text-align: right; }
html body #invoicingView .invoice-status { font-size: 11.5px; text-align: center; padding: 2px 9px; border-radius: 9px; }
html body #invoicingView .invoice-status-issued { background: color-mix(in srgb, var(--accent, #5EA8FF) 15%, transparent); color: var(--accent, #5EA8FF); }
html body #invoicingView .invoice-status-paid { background: color-mix(in srgb, var(--good, #4FC97C) 15%, transparent); color: var(--good, #4FC97C); }
html body #invoicingView .invoice-status-overdue { background: color-mix(in srgb, var(--red, #FF6257) 15%, transparent); color: var(--red, #FF6257); }
html body #invoicingView .invoice-row-actions { display: flex; gap: 6px; }
/* KONEC S15 */

/* --- S16 · Finance: panel Stav účtů (per entita David/Ondřej/s.r.o.) --- */
html body #financeView .account-state-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 900px) {
  html body #financeView .account-state-grid { grid-template-columns: 1fr; }
}
html body #financeView .account-card {
  background: var(--panel-2, #1D2129);
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
html body #financeView .account-card-top {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
html body #financeView .account-name {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted, #878EA0);
}
html body #financeView .account-balance {
  font-size: 24px;
  font-weight: 700;
  color: var(--ink, #F2F1EC);
  letter-spacing: -0.01em;
}
html body #financeView .account-balance.is-negative { color: var(--red, #FF6257); }
html body #financeView .account-card-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 0;
  padding-top: 10px;
}
html body #financeView .account-start {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: var(--muted, #878EA0);
}
html body #financeView .account-start input {
  width: 130px;
  text-align: right;
}
html body #financeView .account-flow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12.5px;
  color: var(--ink-soft, rgba(242,241,236,.86));
}
html body #financeView .account-flow > span:first-child { color: var(--muted, #878EA0); }
html body #financeView .account-in { color: var(--good, #4FC97C); font-weight: 600; }
html body #financeView .account-out { color: var(--red, #FF6257); font-weight: 600; }
/* KONEC S16 */

/* --- S17 · Cashflow výhled panel --- */
html body #financeView .cashflow-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
@media (max-width: 760px) { html body #financeView .cashflow-tiles { grid-template-columns: 1fr; } }
html body #financeView .cashflow-tile {
  background: var(--panel-2, #1D2129);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
html body #financeView .cashflow-tile > span {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--muted, #878EA0);
}
html body #financeView .cashflow-tile > strong { font-size: 22px; font-weight: 700; color: var(--ink, #F2F1EC); letter-spacing: -0.01em; }
html body #financeView .cashflow-tile > strong.is-negative { color: var(--red, #FF6257); }
html body #financeView .cashflow-tile > small { font-size: 11.5px; color: var(--muted, #878EA0); }
html body #financeView .cashflow-tile.is-warn { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--red, #FF6257) 50%, transparent); }
html body #financeView .cashflow-chart {
  background: var(--panel-2, #1D2129);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 16px;
}
html body #financeView .cashflow-svg { width: 100%; height: 170px; display: block; }
html body #financeView .cashflow-warning {
  margin: 0 0 10px;
  font-size: 12.5px; font-weight: 600;
  color: var(--red, #FF6257);
}
html body #financeView .cashflow-flows {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 18px;
}
@media (max-width: 760px) { html body #financeView .cashflow-flows { grid-template-columns: 1fr; } }
html body #financeView .cashflow-col-title {
  font-size: 12px; font-weight: 720; color: var(--ink, #F2F1EC);
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 8px;
}
html body #financeView .cashflow-col-title span { font-weight: 700; font-size: 12.5px; }
html body #financeView .cashflow-list { display: flex; flex-direction: column; }
html body #financeView .cashflow-flow-row {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) max-content;
  gap: 10px; align-items: center; padding: 8px 0;
  border-top: 1px solid var(--line, rgba(150,160,190,.14));
}
html body #financeView .cashflow-flow-date { font-size: 11.5px; color: var(--muted, #878EA0); }
html body #financeView .cashflow-flow-label { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body #financeView .cashflow-flow-amount { font-size: 13px; font-weight: 700; text-align: right; }
html body #financeView .cashflow-flow-amount.is-in { color: var(--good, #4FC97C); }
html body #financeView .cashflow-flow-amount.is-out { color: var(--red, #FF6257); }
html body #financeView .planned-cost-add {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) 110px 130px minmax(0, 1fr) max-content;
  gap: 8px; margin-bottom: 12px; align-items: center;
}
@media (max-width: 900px) { html body #financeView .planned-cost-add { grid-template-columns: 1fr 1fr; } }
html body #financeView .planned-cost-list { display: flex; flex-direction: column; }
html body #financeView .planned-cost-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content max-content max-content;
  gap: 12px; align-items: center; padding: 9px 0;
  border-top: 1px solid var(--line, rgba(150,160,190,.14));
}
html body #financeView .planned-cost-name { font-size: 13px; }
html body #financeView .planned-cost-meta { font-size: 11.5px; color: var(--muted, #878EA0); }
html body #financeView .planned-cost-amount { font-size: 13px; font-weight: 700; color: var(--red, #FF6257); }
html body #financeView .cashflow-empty-hint { font-size: 12px; color: var(--muted, #878EA0); margin: 0; }
/* KONEC S17 */

/* --- S18 · Fakturační profily (editace v Fakturaci) --- */
html body #invoicingView .billing-profiles-panel { margin-top: 18px; }
html body #invoicingView .billing-profiles-list { display: flex; flex-direction: column; gap: 10px; }
html body #invoicingView .profile-card {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--panel-2, #1D2129);
  border-radius: 14px;
  padding: 12px 16px;
}
html body #invoicingView .profile-card-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
html body #invoicingView .profile-card-main strong { font-size: 13.5px; font-weight: 700; }
html body #invoicingView .profile-card-main small { font-size: 11.5px; color: var(--muted, #878EA0); }
html body #invoicingView .profile-edit {
  background: var(--panel-2, #1D2129);
  border-radius: 14px;
  padding: 16px 18px;
}
html body #invoicingView .profile-edit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}
@media (max-width: 700px) { html body #invoicingView .profile-edit-grid { grid-template-columns: 1fr; } }
html body #invoicingView .profile-edit-grid > label {
  display: grid; gap: 6px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: normal;
  color: var(--muted, #878EA0);
}
html body #invoicingView .profile-edit-wide { grid-column: 1 / -1; }
html body #invoicingView .profile-edit-grid textarea { resize: vertical; }
html body #invoicingView .profile-edit-check {
  display: flex !important; flex-direction: row !important; align-items: center; gap: 8px;
  text-transform: none; align-self: end; padding-bottom: 10px;
}
html body #invoicingView .profile-edit-check input { width: 18px !important; height: 18px !important; min-height: 18px !important; flex: 0 0 auto; }
html body #invoicingView .profile-edit-actions { display: flex; gap: 8px; }
/* KONEC S18 */

/* --- S19 · Faktury po splatnosti (červený podkres) + převod + polštář --- */
html body #invoicingView .invoice-row.is-overdue {
  background: rgba(255, 98, 87, 0.10);
  border-radius: 12px;
  padding-left: 10px; padding-right: 10px;
  border-top-color: transparent;
}
html body #financeView .cashflow-cushion-row {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin: -4px 0 16px;
}
html body #financeView .cashflow-cushion-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--muted, #878EA0);
}
html body #financeView .cashflow-cushion-label input { width: 140px; }
html body #financeView .cashflow-cushion-hint { font-size: 11.5px; color: var(--muted, #878EA0); }
html body #financeView .cashflow-tile.is-soft { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold, #F0BE62) 45%, transparent); }
html body #financeView .cashflow-tile.is-alert { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--red, #FF6257) 55%, transparent); }
html body #financeView .cashflow-note { margin: 0 0 10px; font-size: 12.5px; font-weight: 600; }
html body #financeView .cashflow-note.is-soft { color: var(--gold, #F0BE62); }
html body #financeView .cashflow-note.is-alert { color: var(--red, #FF6257); }
/* KONEC S19 */

/* --- S20 · Graf vývoje firmy v panelu Stav firemních příjmů a nákladů --- */
html body #financeView .firm-chart {
  margin-top: 16px;
  background: var(--panel-2, #1D2129);
  border-radius: 14px;
  padding: 14px 16px;
}
html body #financeView .firm-chart-svg { width: 100%; height: 150px; display: block; }
html body #financeView .firm-chart-empty { font-size: 12.5px; color: var(--muted, #878EA0); margin: 0; padding: 20px 0; text-align: center; }
html body #financeView .account-state-panel .panel-head { align-items: flex-start; gap: 16px; flex-wrap: wrap; }
html body #financeView .firm-chart-period { flex: 0 0 auto; }
/* KONEC S20 */

/* --- S21 · Panel Stav firemních příjmů: od–do rozsah grafu + počáteční stavy v edit módu --- */
html body #financeView .account-panel-controls {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}
html body #financeView .firm-chart-range {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
html body #financeView .firm-chart-range .calendar-field {
  width: 150px;
  min-width: 0;
  margin: 0;
}
html body #financeView .firm-chart-range .small-action { align-self: center; }
html body #financeView #editStartBalances.is-active {
  border-color: var(--accent, #5EA8FF);
  color: var(--accent, #5EA8FF);
}
/* KONEC S21 */

/* --- S22 · Pohyby: druh jako rozbalovací multi-výběr + filtr flex-wrap (nerozjede se) --- */
#financeView .finance-filter-fields {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px 14px !important;
  align-items: flex-end !important;
  grid-template-columns: none !important;
}
#financeView .finance-filter-fields > label,
#financeView .finance-type-field {
  flex: 1 1 160px !important;
  min-width: 150px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
#financeView .finance-custom-period { flex: 1 1 150px !important; }
#financeView .finance-reset-cell {
  flex: 0 0 auto !important;
  margin-left: auto !important;
  gap: 8px !important;
}
#financeView .finance-field-cap {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: var(--muted, #878EA0) !important;
}
#financeView .finance-type-dropdown { position: relative; }
#financeView .finance-type-dropdown > summary {
  list-style: none;
  cursor: pointer;
  height: var(--system-field-height, 42px);
  min-height: var(--system-field-height, 42px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 12px;
  border-radius: 12px;
  background: var(--field, #1D2129);
  border: 1px solid var(--line, rgba(150,160,190,.14));
  color: var(--ink, #F2F1EC);
  font-size: 13px;
}
#financeView .finance-type-dropdown > summary::-webkit-details-marker { display: none; }
#financeView .finance-type-dropdown > summary::after { content: "▾"; color: var(--muted, #878EA0); font-size: 11px; }
#financeView .finance-type-dropdown[open] > summary { border-color: color-mix(in srgb, var(--accent, #5EA8FF) 60%, transparent); }
#financeView .finance-type-options {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 100%;
  z-index: 40;
  background: var(--panel-2, #1D2129);
  border: 1px solid var(--line, rgba(150,160,190,.14));
  border-radius: 16px;
  box-shadow: var(--shadow, 0 8px 28px rgba(0,0,0,.42));
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#financeView .finance-type-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 11px;
  cursor: pointer;
  font-size: 13px;
  white-space: nowrap;
}
#financeView .finance-type-opt:hover { background: color-mix(in srgb, var(--accent, #5EA8FF) 12%, transparent); }
#financeView .finance-type-opt input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 18px !important; height: 18px !important;
  min-width: 18px !important; min-height: 18px !important; max-height: 18px !important;
  margin: 0 !important;
  border: 1px solid rgba(150,160,190,.34) !important;
  border-radius: 6px !important;
  background: transparent !important;
  position: relative !important;
  cursor: pointer !important;
}
#financeView .finance-type-opt input[type="checkbox"]:checked {
  background: var(--accent, #5EA8FF) !important;
  border-color: var(--accent, #5EA8FF) !important;
}
#financeView .finance-type-opt input[type="checkbox"]:checked::after {
  content: "" !important; position: absolute !important;
  left: 5px !important; top: 1px !important; width: 5px !important; height: 9px !important;
  border: solid var(--on-accent, #0A1220) !important; border-width: 0 2px 2px 0 !important;
  transform: rotate(45deg) !important;
}
html body #financeView .firm-chart-range .small-action { align-self: flex-end !important; }
/* KONEC S22 */

#financeView .finance-type-opt, #financeView .finance-type-opt span { text-transform: none !important; letter-spacing: 0 !important; font-weight: 500 !important; }

#financeView .finance-type-field .finance-type-options .finance-type-opt, #financeView .finance-type-field .finance-type-options .finance-type-opt span { text-transform: none !important; letter-spacing: 0 !important; font-weight: 500 !important; }

/* --- S23 · Období ve filtru jako denní od–do (jako u grafu) --- */
#financeView .finance-period-field { flex: 1 1 330px !important; }
#financeView .finance-period-field .firm-chart-range { gap: 8px; }
/* KONEC S23 */

/* --- S24 · Souhrn ve výběru = kartová okna jako Stav firemních, 4 v řadě --- */
html body #financeView .finance-summary-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
  align-items: stretch !important;
}
/* hlavní čísla srovnaná v jedné lince — název max 1 řádek, pevná výška */
html body #financeView .finance-summary-grid .account-name {
  min-height: 15px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
@media (max-width: 1100px) {
  html body #financeView .finance-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 620px) {
  html body #financeView .finance-summary-grid { grid-template-columns: 1fr !important; }
}
/* KONEC S24 */

/* --- S25 · Uzávěrka: karty lidí = vzdušná okna jako fakta vedle (TENTO MĚSÍC / K PROPLACENÍ), ne natěsnané --- */
html body #closingView#closingView .time-people-list { gap: 10px !important; }
html body #closingView#closingView .time-person-card {
  min-height: 62px !important;
  padding: 13px 16px !important;
  gap: 4px 14px !important;
  /* starý 3řádkový layout (grid-template-rows: 16px 24px 18px, ř. 2879) nechával
     fantomový 3. řádek → obsah tlačený nahoru; zpět na čisté 2 řádky a vycentrovat */
  grid-template-rows: min-content min-content !important;
  align-content: center !important;
  align-items: center !important;
  background: var(--panel-2, #1D2129) !important;
}
html body #closingView#closingView .time-person-card.active {
  background: rgba(94, 168, 255, 0.16) !important;
}
/* KONEC S25 */

/* --- S26 · Fakturace: Nová faktura + Databáze přes celou šířku (pod sebou), formulář do 2 sloupců --- */
/* obě sekce pod sebou, každá plná šířka (dřív 2 úzké sloupce vedle sebe → zbytečně vysoké) */
html body #invoicingView .invoicing-layout {
  grid-template-columns: 1fr !important;
  gap: 18px !important;
}
/* tělo formuláře Nová faktura: 2 smysluplné sloupce (vlevo strany + termíny, vpravo položky + text + akce) */
html body #invoicingView .invoice-form-cols {
  display: grid !important;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr) !important;
  gap: 4px 30px !important;
  align-items: start !important;
}
html body #invoicingView .invoice-form-left,
html body #invoicingView .invoice-form-right {
  display: flex !important;
  flex-direction: column !important;
  gap: 13px !important;
  min-width: 0 !important;
}
/* labely uvnitř nových sloupců si drží styl polí (dřív .invoice-panel > label) */
html body #invoicingView .invoice-form-left > label,
html body #invoicingView .invoice-form-right > label {
  display: grid !important;
  gap: 6px !important;
  font-size: 11px !important;
  font-weight: 760 !important;
  text-transform: uppercase !important;
  letter-spacing: normal !important;
  color: var(--muted, #878EA0) !important;
}
/* první sekční popisek ve sloupci nemá tlačit shora */
html body #invoicingView .invoice-form-left > .invoice-block-label:first-child,
html body #invoicingView .invoice-form-right > .invoice-block-label:first-child { margin-top: 0 !important; }
/* Databáze faktur: jeden seznam přes celou šířku (každý řádek na celou šířku) */
html body #invoicingView .invoice-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
@media (max-width: 960px) {
  html body #invoicingView .invoice-form-cols { grid-template-columns: 1fr !important; }
}
/* KONEC S26 */

/* --- S27 · Databáze faktur: filtry dodavatel/klient + sloupcové zarovnání řádků --- */
html body #invoicingView .invoice-db-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 6px;
}
html body #invoicingView .invoice-db-filter {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 0 1 230px;
  font-size: 11px;
  font-weight: 760;
  text-transform: uppercase;
  letter-spacing: normal;
  color: var(--muted, #878EA0);
}
html body #invoicingView .invoice-db-filters .invoice-filter-chips {
  margin-left: auto;
  align-self: center;
}
/* sdílený sloupcový grid pro hlavičku i řádky → čísla, částky i stavy lícují */
html body #invoicingView .invoice-list-head,
html body #invoicingView .invoice-row {
  display: grid !important;
  grid-template-columns: 104px minmax(0, 1fr) 132px 112px 312px !important;
  gap: 14px !important;
  align-items: center !important;
}
html body #invoicingView .invoice-list-head {
  padding: 2px 0 8px !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: var(--muted, #878EA0) !important;
  border-bottom: 1px solid var(--line, rgba(150,160,190,.14)) !important;
}
html body #invoicingView .invoice-list-head > span:nth-child(3) { text-align: right !important; }
/* částky zarovnané vpravo (jeden sloupec), stavy jako pilulky zarovnané zleva */
html body #invoicingView .invoice-row-amount { justify-self: stretch !important; text-align: right !important; }
html body #invoicingView .invoice-status { justify-self: start !important; }
/* akce = 4 tlačítka v pevných sloupcích (Upravit · PDF · Zaplaceno/Vrátit · Smazat) → lícují napříč řádky */
html body #invoicingView .invoice-row-actions {
  display: grid !important;
  grid-template-columns: 74px 50px 96px 72px !important;
  gap: 6px !important;
}
html body #invoicingView .invoice-row-actions .inline-action {
  width: 100% !important;
  padding-left: 4px !important;
  padding-right: 4px !important;
  text-align: center !important;
  justify-content: center !important;
}
/* řádky po splatnosti drží stejné odsazení jako ostatní (dřív inset → rozbíjelo sloupce) */
html body #invoicingView .invoice-row.is-overdue { padding: 14px 16px !important; }
/* režim úpravy vystavené faktury */
html body #invoicingView .invoice-edit-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent, #5EA8FF) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent, #5EA8FF) 45%, transparent);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink, #F2F1EC);
}
html body #invoicingView .invoice-edit-banner.hidden { display: none; }
/* KONEC S27 */

/* --- S29 · Databáze faktur: sjednocené multi-filtry (stav/dodavatel/klient) + období od–do (jako Finance) --- */
html body #invoicingView .invoice-db-filters {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-end !important;
  gap: 10px 14px !important;
  margin-bottom: 8px !important;
}
html body #invoicingView .db-filter-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 0 1 190px;
  min-width: 150px;
}
html body #invoicingView .db-filter-period { flex: 0 1 330px; }
html body #invoicingView .db-filter-cap {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted, #878EA0);
}
html body #invoicingView .db-filter-dropdown { position: relative; }
html body #invoicingView .db-filter-dropdown > summary {
  list-style: none;
  cursor: pointer;
  height: var(--system-field-height, 42px);
  min-height: var(--system-field-height, 42px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 12px;
  border-radius: 12px;
  background: var(--field, #1D2129);
  border: 1px solid var(--line, rgba(150,160,190,.14));
  color: var(--ink, #F2F1EC);
  font-size: 13px;
}
html body #invoicingView .db-filter-dropdown > summary::-webkit-details-marker { display: none; }
html body #invoicingView .db-filter-dropdown > summary::after { content: "▾"; color: var(--muted, #878EA0); font-size: 11px; }
html body #invoicingView .db-filter-dropdown[open] > summary { border-color: color-mix(in srgb, var(--accent, #5EA8FF) 60%, transparent); }
html body #invoicingView .db-filter-options {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 100%;
  max-height: 300px;
  overflow-y: auto;
  z-index: 40;
  background: var(--panel-2, #1D2129);
  border: 1px solid var(--line, rgba(150,160,190,.14));
  border-radius: 16px;
  box-shadow: var(--shadow, 0 8px 28px rgba(0,0,0,.42));
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
html body #invoicingView .db-filter-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 11px;
  cursor: pointer;
  font-size: 13px;
  white-space: nowrap;
}
html body #invoicingView .db-filter-opt:hover { background: color-mix(in srgb, var(--accent, #5EA8FF) 12%, transparent); }
html body #invoicingView .db-filter-opt > span { flex: 1 1 auto; }
html body #invoicingView .db-filter-opt > em { font-style: normal; color: var(--muted, #878EA0); font-size: 12px; }
html body #invoicingView .db-filter-opt input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  box-sizing: border-box !important;
  flex: 0 0 18px !important;
  width: 18px !important; height: 18px !important;
  min-width: 18px !important; min-height: 18px !important;
  max-width: 18px !important; max-height: 18px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid rgba(150,160,190,.34) !important;
  border-radius: 6px !important;
  background: transparent !important;
  position: relative !important;
  cursor: pointer !important;
}
html body #invoicingView .db-filter-opt input[type="checkbox"]:checked {
  background: var(--accent, #5EA8FF) !important;
  border-color: var(--accent, #5EA8FF) !important;
}
html body #invoicingView .db-filter-opt input[type="checkbox"]:checked::after {
  content: "" !important; position: absolute !important;
  left: 5px !important; top: 1px !important; width: 5px !important; height: 9px !important;
  border: solid var(--on-accent, #0A1220) !important; border-width: 0 2px 2px 0 !important;
  transform: rotate(45deg) !important;
}
html body #invoicingView .db-filter-empty { padding: 8px 10px; font-size: 12px; color: var(--muted, #878EA0); }
/* období od–do (jako firm-chart-range ve Finance) */
html body #invoicingView .invoice-range { display: flex; align-items: flex-end; gap: 8px; }
html body #invoicingView .invoice-range .calendar-field { width: 140px; min-width: 0; margin: 0; }
html body #invoicingView .invoice-range .small-action { align-self: flex-end; }
/* Vyčistit filtr úplně vpravo */
html body #invoicingView #invoiceFilterReset { margin-left: auto; align-self: flex-end; }
html body #invoicingView #invoiceFilterReset.is-active { border-color: color-mix(in srgb, var(--accent, #5EA8FF) 55%, transparent); color: var(--accent, #5EA8FF); }
/* popisky voleb = normální text (ne verzálky z globálního label stylu) */
html body #invoicingView .db-filter-opt,
html body #invoicingView .db-filter-opt span,
html body #invoicingView .db-filter-opt em { text-transform: none !important; letter-spacing: 0 !important; font-weight: 500 !important; }
/* KONEC S29 */

/* --- S30 · Uzávěrka: seznam exportovaných výkazů (design jako databáze faktur) --- */
html body #closingView .workreports-panel { margin-top: 16px; }
html body #closingView .workreports-head,
html body #closingView .workreport-row {
  display: grid !important;
  grid-template-columns: 96px minmax(0, 1fr) 160px 78px 130px 128px !important;
  gap: 14px !important;
  align-items: center !important;
}
html body #closingView .workreports-head {
  padding: 2px 0 8px !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: var(--muted, #878EA0) !important;
  border-bottom: 1px solid var(--line, rgba(150,160,190,.14)) !important;
}
html body #closingView .workreports-head > span:nth-child(4),
html body #closingView .workreports-head > span:nth-child(5) { text-align: right !important; }
html body #closingView .workreports-list { display: flex; flex-direction: column; }
html body #closingView .workreport-row {
  padding: 10px 0 !important;
  border-top: 1px solid var(--line, rgba(150,160,190,.14)) !important;
}
html body #closingView .workreport-number { font-family: var(--font-mono, ui-monospace, monospace); font-size: 13px; }
html body #closingView .workreport-main { display: flex; flex-direction: column; min-width: 0; }
html body #closingView .workreport-main strong { font-size: 13px; }
html body #closingView .workreport-main small { font-size: 11.5px; color: var(--muted, #878EA0); }
html body #closingView .workreport-period { font-size: 12.5px; color: var(--ink-soft, rgba(242,241,236,.86)); }
html body #closingView .workreport-hours { font-size: 13px; text-align: right; }
html body #closingView .workreport-amount { font-weight: 700; font-size: 13px; text-align: right; }
html body #closingView .workreport-actions { display: grid; grid-template-columns: 50px 72px; gap: 6px; }
html body #closingView .workreport-actions .inline-action { width: 100% !important; padding-left: 4px !important; padding-right: 4px !important; text-align: center !important; justify-content: center !important; }
/* KONEC S30 */

/* --- S31 · Uzávěrka: metriky sjednotit s kartami účtů (pryč modrá lišta = pozůstatek starého návrhu) --- */
html body #closingView .metric::before { content: none !important; display: none !important; }
html body #closingView#closingView .metrics .metric {
  padding: 16px 18px !important;
  gap: 5px !important;
  border-radius: 14px !important;
  background: var(--panel-2, #1D2129) !important;
}
html body #closingView#closingView .metrics .metric > span {
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: var(--muted, #878EA0) !important;
}
html body #closingView#closingView .metrics .metric strong {
  font-size: 24px !important;
  font-weight: 700 !important;
  color: var(--ink, #F2F1EC) !important;
  line-height: 1.15 !important;
}
html body #closingView#closingView .metrics .metric strong.is-negative { color: var(--red, #FF6257) !important; }
/* KONEC S31 */

/* --- S32 · JEDEN výběr období všude (Od / Do / reset) — sjednocení firm-chart-range + invoice-range + uzávěrka --- */
html body .period-range {
  display: flex !important;
  align-items: flex-end !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
}
html body .period-range .calendar-field {
  width: 140px !important;
  min-width: 0 !important;
  margin: 0 !important;
  display: flex !important;
}
html body .period-range .calendar-field > input { width: 100% !important; margin: 0 !important; }
html body .period-range .small-action { align-self: flex-end !important; }
/* filtrová pole s obdobím = dost široká, ať se period-range vejde na 1 řádek (bez zalomení Vše) */
html body #invoicingView .db-filter-period { flex: 1 1 360px !important; }
html body #financeView .finance-period-field { flex: 1 1 360px !important; }
/* KONEC S32 */

/* --- S34 · Audit fixy: koordinace ořezy + responzivní hlava „Stav firemních" --- */
/* metrický label ("Interní koordinace") se nevešel do boxu → zalomit místo oříznutí */
#coordinationView .coordination-metric > span { white-space: normal !important; }
/* <900px: hlava panelu Stav firemních (titul + ovládání) se nevešla → zalomit + ovládání zleva */
@media (max-width: 900px) {
  html body #financeView .account-state-panel .panel-head { flex-wrap: wrap !important; gap: 10px !important; }
  html body #financeView .account-panel-controls { flex-wrap: wrap !important; margin-left: 0 !important; }
}
/* KONEC S34 */

/* --- S35 · Fix: seznam „Moje práce v měsíci" — řádky se hroutily na 28px a obsah přetékal přes další (překryv) --- */
html body #reportsView .time-self-entries-panel .time-entry-list {
  grid-auto-rows: min-content !important;
  align-items: start !important;
}
/* KONEC S35 */

/* --- S36 · Projekty po termínu = červený podkres (jako úkoly po termínu) --- */
html body #projectsView .project-card.is-late {
  background: rgba(255, 98, 87, 0.13) !important;
  border-color: rgba(255, 98, 87, 0.42) !important;
}
/* KONEC S36 */

/* --- S37 · Přehled/Úkoly: mezera mezi úkolem a prvním komentářem (jako mezi komentáři) --- */
html body #dashboardView .dashboard-task-list .task-item.is-comment-open .dashboard-task-comment-panel {
  margin-top: 10px !important;
}
/* KONEC S37 */

/* --- S38 · Úkoly: komentářová kolonka auto-roste (default = výška tlačítka Odeslat 40px) --- */
html body #dashboardView .dashboard-task-list .task-comment-form { align-items: start !important; }
html body #dashboardView .dashboard-task-list .task-comment-form textarea {
  height: 40px !important;
  min-height: 40px !important;
  max-height: 200px !important;
  padding: 9px 13px !important;
  overflow-y: auto !important;
  resize: none !important;
  line-height: 1.35 !important;
  box-sizing: border-box !important;
}
html body #dashboardView .dashboard-task-list .task-comment-form button {
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  align-self: start !important;
}
/* KONEC S38 */

/* --- S39 · Koordinace „Co je potřeba řešit": stack (v úzkém sloupci), zelený/červený podkres, viditelná fajfka --- */
/* Item žije v ~390px sloupci, ale stackoval se až od viewport 980px → v širokém viewportu zkoušel 4sloupcový layout v 342px = kolaps/překryv. Teď VŽDY stack. */
html body #coordinationView .coordination-item { align-items: start !important; }
/* stack podle ŠÍŘKY POLOŽKY (list bývá jednou full-width, jindy úzký sloupec) — container query,
   protože původní stack jel dle viewportu (980px), ale item žije v úzkém sloupci i při širokém okně → kolaps/překryv */
html body #coordinationView .coordination-group-list { container-type: inline-size; }
@container (max-width: 700px) {
  html body #coordinationView .coordination-item .coordination-main {
    grid-template-columns: 1fr !important;
    grid-template-areas: "titles" "meta" "note" "axis" "actions" !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  html body #coordinationView .coordination-item .coordination-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px 16px !important;
  }
}
html body #coordinationView .coordination-item .coordination-meta span {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere !important;
}
/* Odevzdané: zelený podkres — mega-specificita (:is()×3), aby přebilo background rule ř.19961 */
html body :is(#coordinationView):is(#coordinationView):is(#coordinationView) .coordination-item.is-done {
  background: linear-gradient(0deg, rgba(79,201,124,0.13), rgba(79,201,124,0.13)), var(--panel-2, #1D2129) !important;
  border: 1px solid rgba(79,201,124,0.42) !important;
  border-left: 4px solid var(--good, #4FC97C) !important;
  opacity: 1 !important;
}
/* Po termínu: červený podkres */
html body :is(#coordinationView):is(#coordinationView):is(#coordinationView) .coordination-item.is-late {
  background: linear-gradient(0deg, rgba(255,98,87,0.13), rgba(255,98,87,0.13)), var(--panel-2, #1D2129) !important;
  border: 1px solid rgba(255,98,87,0.42) !important;
  border-left: 4px solid var(--red, #FF6257) !important;
}
/* Fajfka viditelná: zelené kolečko s tmavou fajfkou (dřív tmavá fajfka na průhledném = neviditelná) */
html body #coordinationView .coordination-item.is-done .coordination-check {
  background: var(--good, #4FC97C) !important;
  color: #0A1220 !important;
  border-color: var(--good, #4FC97C) !important;
}
/* Deadline label tón: po lhůtě červeně, odevzdáno zeleně */
html body #coordinationView .coordination-item .coordination-deadline-label.is-late { color: var(--red, #FF6257) !important; }
html body #coordinationView .coordination-item .coordination-deadline-label.is-done { color: var(--good, #4FC97C) !important; }
/* KONEC S39 */

/* --- S40 · Jedna sdílená stavová pilulka .status-pill (verzálky, tvar, barva=význam) --- */
html body .status-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  line-height: 1.4 !important;
  padding: 3px 10px !important;
  border-radius: 9px !important;
  border: 0 !important;
  white-space: nowrap !important;
  width: auto !important;
}
html body .status-pill--done   { background: rgba(79,201,124,.15) !important;  color: #4FC97C !important; }
html body .status-pill--active { background: rgba(94,168,255,.15) !important;  color: #5EA8FF !important; }
html body .status-pill--late   { background: rgba(255,98,87,.15) !important;   color: #FF6257 !important; }
html body .status-pill--soon   { background: rgba(240,190,98,.16) !important;  color: #F0BE62 !important; }
html body .status-pill--muted  { background: rgba(255,255,255,.06) !important; color: #A6ADBD !important; }

/* Finance: money-type má mega-specific pravidla (2×#financeView) → přebít stejnou silou */
html body #financeView#financeView .money-item .money-type.status-pill {
  padding: 3px 10px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  border-radius: 9px !important;
  border: 0 !important;
  line-height: 1.4 !important;
}
html body #financeView#financeView .money-item .money-type.status-pill--done  { color: #4FC97C !important; background: rgba(79,201,124,.15) !important; }
html body #financeView#financeView .money-item .money-type.status-pill--soon  { color: #F0BE62 !important; background: rgba(240,190,98,.16) !important; }
html body #financeView#financeView .money-item .money-type.status-pill--muted { color: #A6ADBD !important; background: rgba(255,255,255,.06) !important; }
/* status nese pilulka, ne barevný levý proužek řádku */
html body #financeView .money-item::before { content: none !important; display: none !important; }
/* KONEC S40 */

/* --- S41 · Sjednocení váhy H2 nadpisů panelů (Projekty měly 780 vs 700 jinde) --- */
html body #projectsView#projectsView h2,
html body #invoicingView#invoicingView h2,
html body #archiveView#archiveView h2 { font-weight: 700 !important; }
/* KONEC S41 */

/* --- S42 · Sjednocení „hotovo": fajfka splněného úkolu zelená (byla accent modrá) jako v Koordinaci --- */
html body #dashboardView#dashboardView .dashboard-task-list .task-item.is-done .coordination-check {
  background: var(--good, #4FC97C) !important;
  border-color: var(--good, #4FC97C) !important;
  color: #0A1220 !important;
}
/* KONEC S42 */

/* --- S43 · Jeden vzor stat-dlaždice (audit bod 5) ---
   Standard = account-card / closing metric: bg --panel-2, radius 14, pad 16/18,
   label 12px/700/uppercase/muted, hodnota 24px/700. Sjednocuje Koordinaci a Uzávěrku (facts). */
html body #coordinationView#coordinationView .coordination-metric {
  background: var(--panel-2, #1D2129) !important;
  border-radius: 14px !important;
  /* stejný vertikální rytmus jako standard; boční padding menší, dlaždice jsou v úzkém sloupci (~107px) */
  padding: 16px 12px !important;
  gap: 5px !important;
}
html body #coordinationView#coordinationView .coordination-metric > span {
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: var(--muted, #878EA0) !important;
}
html body #coordinationView#coordinationView .coordination-metric > strong {
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  color: var(--ink, #F2F1EC) !important;
}
html body #closingView#closingView .closing-person-facts > span {
  padding: 16px 18px !important;
  border-radius: 14px !important;
  background: var(--panel-2, #1D2129) !important;
}
html body #closingView#closingView .closing-person-facts > span > b {
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: var(--muted, #878EA0) !important;
}
/* KONEC S43 */

/* --- S44 · Koordinace: stavová pilulka u názvu (audit bod 2) --- */
html body #coordinationView .coordination-head-titles {
  align-items: start !important;
}
html body #coordinationView .coordination-head-titles > .status-pill {
  align-self: start !important;
  margin-top: 2px !important;
}
/* KONEC S44 */

/* --- S45 · Jedna skořápka seznamového řádku (audit bod 6) ---
   Standard (většina appky): bg --panel-2, radius 14, bez rámečku, padding 12/16.
   Faktury byly jediné "plochý řádek s linkou" (bez výplně, radius 0) → převedeny na standard. */
html body #invoicingView .invoice-list { gap: 8px !important; }
html body #invoicingView .invoice-row {
  background: var(--panel-2, #1D2129) !important;
  border: 0 !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
}
/* hlavička seznamu faktur zarovnaná se stejným vnitřním odsazením jako řádky */
html body #invoicingView .invoice-list-head { padding: 2px 16px 8px !important; }
/* sjednocený padding řádků na dominantní standard 14/16 (bylo 8/12/13/14) */
html body #financeView .money-item,
html body #closingView .workreport-row,
html body #coordinationView .coordination-item { padding: 14px 16px !important; }
html body #closingView#closingView .time-person-card { padding: 14px 16px !important; }
html body #closingView .workreports-head { padding: 2px 16px 8px !important; }
/* KONEC S45 */

/* --- S46 · Jednotná kostra stránek (audit bod 8) ---
   Trojpanely ZŮSTÁVAJÍ. Sjednocuje se jen: mezera mezi panely (18px)
   a bod zlomu, kdy se trojpanel skládá pod sebe (1180px). */
html body #reportsView .time-page-layout,
html body #reportsView .work-entry-layout,
html body #closingView .closing-overview-grid,
html body #dashboardView .daily-dashboard,
html body #meetingsView .meetings-layout,
html body #coordinationView .coordination-page,
html body #invoicingView .invoicing-layout,
html body #projectsView .split-layout { gap: 18px !important; }
/* svislé mezery mezi sekcemi pod sebou (bylo 16, místy 18) */
html body .panel + .panel,
html body .split-layout > .panel + .panel,
html body .coordination-page > .panel + .panel,
html body #financeView .view > .panel + .panel { margin-top: 18px !important; }
html body #financeView > .panel + .panel,
html body #invoicingView > .panel + .panel,
html body #closingView > .panel + .panel,
html body #closingView > section + section,
html body #financeView > section + section,
html body #invoicingView > section + section { margin-top: 18px !important; }
/* POZOR: `.panel + .panel { margin-top }` platí i pro panely VEDLE SEBE v gridu →
   2. a 3. sloupec pak spadne o 18 px níž („odskákané sloupce"). Uvnitř trojpanelů
   dělá mezery výhradně gap, takže margin nulujeme. */
html body .daily-dashboard > .panel + .panel,
html body .meetings-layout > .panel + .panel,
html body .work-entry-layout > .panel + .panel,
html body .coordination-page > .panel + .panel,
html body .coordination-status-layout > .panel + .panel,
html body .closing-overview-grid > .panel + .panel,
html body .invoicing-layout > .panel + .panel,
html body .split-layout > .panel + .panel { margin-top: 0 !important; }
/* jeden bod zlomu pro všechny trojpanely: nad 1280px 3 sloupce, pod tím pod sebe.
   Dřív: Přehled/Práce/Schůzky se lámaly ~1280, ale Koordinace/Uzávěrka držely 3 sloupce
   až k ~1100 a jejich obsah se přitom tísnil (panely přetékaly o 40–80 px). */
@media (max-width: 1280px) {
  html body #coordinationView#coordinationView#coordinationView .coordination-page,
  html body #closingView#closingView#closingView .closing-overview-grid,
  html body #dashboardView#dashboardView .daily-dashboard,
  html body #meetingsView#meetingsView .meetings-layout,
  html body #reportsView#reportsView .work-entry-layout {
    grid-template-columns: 1fr !important;
  }
  /* Uzávěrka drží 3 sloupce přes grid-template-areas — musí se složit taky,
     jinak by 1fr nic neudělalo a panel „Lidé" by se zmáčkl na ~48 px */
  html body #closingView#closingView#closingView .closing-overview-grid {
    grid-template-areas: "people" "detail" "report" !important;
    grid-template-rows: auto auto auto !important;
  }
}
/* KONEC S46 */

/* --- S47 · Jedna hlavička seznamu/tabulky + metriky uzávěrky na 1 řádek ---
   Standard hlavičky: bez výplně, bez blur, 11px/700/uppercase/muted, odsazení jako řádky. */
html body #financeView .money-header {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 2px 16px 8px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: var(--muted, #878EA0) !important;
  box-shadow: none !important;
}
html body #closingView table thead th {
  background: transparent !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: var(--muted, #878EA0) !important;
  padding: 2px 11px 8px !important;
}
html body #closingView .workreports-head,
html body #invoicingView .invoice-list-head { font-size: 11px !important; }
html body #invoicingView .invoice-items-head { font-size: 11px !important; }
/* Měsíční uzávěrka: všech 5 metrik na jeden řádek (bylo 3 + 2) */
html body #closingView#closingView .metrics {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 12px !important;
}
html body #closingView#closingView .metrics .metric { padding: 14px 14px !important; }
html body #closingView#closingView .metrics .metric strong { font-size: 21px !important; }
@media (max-width: 1280px) {
  html body #closingView#closingView .metrics { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 760px) {
  html body #closingView#closingView .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
/* KONEC S47 */

/* --- S48 · Finance: připnutá hlavička seznamu musí být NEPRŮHLEDNÁ ---
   .money-header je sticky uvnitř rolovacího .money-list (max-height 640px).
   Po odstranění skla (S47) byla průhledná → řádky pod ní prosvítaly. */
html body #financeView .money-header {
  position: sticky !important;
  /* seznam má padding 10px → záporný top+margin přisadí hlavičku úplně nahoru
     a roztáhne neprůhledné pozadí po celé šířce (jinak by řádky prosvítaly po stranách) */
  top: -10px !important;
  margin: -10px -10px 0 !important;
  z-index: 3 !important;
  background: var(--panel, #171A22) !important;
  padding: 14px 26px 10px !important;
  border-bottom: 1px solid var(--line, rgba(150,160,190,.14)) !important;
}
/* KONEC S48 */

/* --- S49 · Detail výkonu: 2 široké sloupce místo 4–5 úzkých ---
   Bylo `repeat(auto-fill, minmax(320px,1fr))` → na širokém okně 4–5 sloupců a protože
   sekce mají velmi různou délku, zůstávaly velké díry („rozlitané“). Dva sloupce
   jsou čitelnější (delší řádky popisek→hodnota) a děr je výrazně míň. */
html body :is(#projectsView, #archiveView) .external-cost-inline-detail:not(.hidden) {
  /* multicol = sekce plynou za sebou a balí se těsně (grid nechával díry, zaplnění 56 %) */
  display: block !important;
  column-count: 2 !important;
  column-gap: 32px !important;
}
html body :is(#projectsView, #archiveView) .external-cost-inline-detail:not(.hidden) > .performance-detail-section {
  /* sekce se NIKDY nesmí rozdělit mezi sloupce — to dřív fragmentovalo tooltip u REŽIE */
  break-inside: avoid !important;
  -webkit-column-break-inside: avoid !important;
  page-break-inside: avoid !important;
  display: block !important;
  margin: 0 0 20px !important;
}
html body :is(#projectsView, #archiveView) .external-cost-inline-detail:not(.hidden) > .performance-detail-head {
  column-span: all !important;
  margin: 0 0 14px !important;
}
@media (max-width: 1100px) {
  html body :is(#projectsView, #archiveView) .external-cost-inline-detail:not(.hidden) {
    column-count: 1 !important;
  }
}
/* KONEC S49 */

/* --- S50 · Stornovaná faktura: v evidenci zůstává, vizuálně ustupuje --- */
html body #invoicingView .invoice-row.is-storno .invoice-row-number,
html body #invoicingView .invoice-row.is-storno .invoice-row-amount {
  text-decoration: line-through !important;
  color: var(--muted, #878EA0) !important;
}
html body #invoicingView .invoice-row.is-storno .invoice-row-main strong,
html body #invoicingView .invoice-row.is-storno .invoice-row-main small {
  color: var(--muted, #878EA0) !important;
}
html body #invoicingView .invoice-row.is-storno { opacity: 0.75; }
/* KONEC S50 */

/* --- S51 · Zámek uzávěrky ve Financích: místo Upravit/Smazat štítek „Uzavřeno" --- */
html body #financeView .money-locked {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted, #878EA0);
  padding: 3px 10px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed rgba(150, 160, 190, 0.28);
  white-space: nowrap;
  cursor: help;
}
/* KONEC S51 */

/* --- S52 · Souhrn Financí: 5 dlaždic v řadě (přibyla „Čeká na zaplacení") --- */
html body #financeView .finance-summary-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}
@media (max-width: 1280px) {
  html body #financeView .finance-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 1100px) {
  html body #financeView .finance-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 620px) {
  html body #financeView .finance-summary-grid { grid-template-columns: 1fr !important; }
}
/* KONEC S52 */

/* --- S53 · Jedno pravidlo pro osy + boční stavová lišta všude stejně ---
   Osy: do 60 % zelená, do 100 % zlatá, přes termín červená. Žádné přechody.
   (Barvy inline z heatColor v app.js; tady jen koordinace, která je měla v CSS.) */
html body #coordinationView .coordination-deadline-track i,
html body #coordinationView .coordination-mini-timeline i,
html body #dashboardView .coordination-mini-timeline i {
  background: var(--gold, #F0BE62) !important;
}
html body #coordinationView .coordination-item.is-done .coordination-deadline-track i,
html body #coordinationView .coordination-timeline-item.is-done .coordination-mini-timeline i,
html body #dashboardView .coordination-timeline-item.is-done .coordination-mini-timeline i {
  background: var(--good, #4FC97C) !important;
}
html body #coordinationView .coordination-item.is-late .coordination-deadline-track i,
html body #coordinationView .coordination-timeline-item.is-late .coordination-mini-timeline i,
html body #dashboardView .coordination-timeline-item.is-late .coordination-mini-timeline i {
  background: var(--red, #FF6257) !important;
}

/* Boční stavová lišta — stejný jazyk jako v Koordinaci (líbí se), teď i u projektů a faktur.
   Neutrální = běží, zelená = hotovo, červená = problém. */
html body :is(#projectsView, #archiveView) .project-card {
  border-left: 4px solid rgba(255, 255, 255, 0.14) !important;
}
html body :is(#projectsView, #archiveView) .project-card.is-late {
  border-left: 4px solid var(--red, #FF6257) !important;
}
html body :is(#projectsView, #archiveView) .project-card.is-done {
  border-left: 4px solid var(--good, #4FC97C) !important;
}
html body #invoicingView .invoice-row {
  border-left: 4px solid rgba(255, 255, 255, 0.14) !important;
  padding-left: 12px !important;
}
html body #invoicingView .invoice-row.is-paid { border-left-color: var(--good, #4FC97C) !important; }
html body #invoicingView .invoice-row.is-overdue { border-left-color: var(--red, #FF6257) !important; }
html body #invoicingView .invoice-row.is-storno { border-left-color: rgba(255, 255, 255, 0.10) !important; }
html body #invoicingView .invoice-list-head { padding-left: 16px !important; }
/* KONEC S53 */

/* --- S54 · Jednotné mezery uvnitř panelů (hlava → obsah = 16 px) ---
   Dřív se sčítaly tři zdroje (margin hlavy + margin obsahu + gap panelu) →
   14/16/24/27/28/32 px podle stránky. Teď jeden zdroj na typ panelu. */
html body .panel > .panel-head { margin-bottom: 16px !important; }
/* prvek hned za hlavou nesmí přidávat vlastní horní mezeru (jinak se sčítá) */
html body .panel > .panel-head + * { margin-top: 0 !important; }
/* panely, které rozestupy řeší vlastním gapem — margin hlavy by se s gapem sčítal */
html body #reportsView #timeForm > .panel-head,
html body #meetingsView #meetingForm > .panel-head,
html body #invoicingView .invoice-panel > .panel-head { margin-bottom: 0 !important; }
html body #invoicingView .invoice-panel { gap: 16px !important; }
/* panely s vyšší specificitou v původním CSS (Uzávěrka 14px, projekty/archiv) */
html body #closingView#closingView .panel > .panel-head,
html body #projectsView#projectsView .panel > .panel-head,
html body #archiveView#archiveView .panel > .panel-head { margin-bottom: 16px !important; }
/* obsah za hlavou nesmí přidat vlastní margin ani u panelů s vlastními pravidly
   (Koordinace „Nejbližší termíny": 16 hlava + 12 obsah = 28) */
html body #coordinationView#coordinationView .panel > .panel-head + *,
html body #closingView#closingView .panel > .panel-head + *,
html body #financeView#financeView .panel > .panel-head + *,
html body #invoicingView#invoicingView .panel > .panel-head + * { margin-top: 0 !important; }
/* Finance: mezi filtrem a tabulkou byly jen 4 px */
html body #financeView .finance-filter-bar { margin-bottom: 16px !important; }
/* Fakturace: mezi filtry a hlavičkou tabulky bylo 8 px */
html body #invoicingView .invoice-db-filters { margin-bottom: 16px !important; }
/* KONEC S54 */

/* ============================================================
   S55 — DOKONČENÍ SJEDNOCENÍ OS: konec míchání barev
   V S53 dostaly plnou barvu časové osy (heatColor: ≤60 zelená /
   ≤100 zlatá / >100 červená). Tyhle dva pruhy v Koordinaci ale
   zůstaly na starém přechodu modrá→zelená:
     .coordination-card-progress div  — dlaždice projektů nahoře
     .coordination-progress-fill      — pruh „Stav koordinace"
   Jsou to pruhy DOKONČENOSTI (% hotovo), ne časové osy, takže na
   ně heatColor nesedí (90 % hotovo by svítilo oranžově). Pravidlo
   je tedy: postup k hotovu = plná zelená, žádný přechod.
   ============================================================ */
html body .coordination-card-progress > div,
html body .coordination-progress-fill {
  background: var(--good) !important;
  background-image: none !important;
}
/* trendové pruhy ve Financích — plné barvy místo přechodů
   (v aktuálních datech se nevykreslují, ať to nevyskočí později) */
html body .trend-income { background: var(--good) !important; background-image: none !important; }
html body .trend-cost { background: var(--red) !important; background-image: none !important; }

/* ============================================================
   S56 — MILNÍK S PEVNOU ČÁSTKOU (položky účtované zvlášť)
   Milník umí dva režimy: podíl z ceny fáze (%) nebo pevná částka
   navíc (Kč) — typicky přefakturovaný statik/průzkum, který je
   součástí nabídky, ale nepočítá se do 100 % honoráře.
   Přepíná se tlačítkem v buňce „Podíl"; suffix „%" z S14 je jím
   nahrazen, proto musí vypadat stejně nenápadně.
   ============================================================ */
html body #projectForm .milestone-mode {
  position: absolute !important;
  right: 4px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  min-width: 22px !important;
  height: 22px !important;
  padding: 0 4px !important;
  border: 1px solid transparent !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: var(--muted, #878EA0) !important;
  font-family: var(--font-ui) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
html body #projectForm .milestone-mode:hover {
  border-color: var(--line) !important;
  color: var(--ink, #F2F1EC) !important;
}
/* v režimu pevné částky je „Kč" aktivní stav — zvýrazněné a podíl je vypnutý */
html body #projectForm .milestone-row[data-fixed="1"] .milestone-mode {
  border-color: rgba(94, 168, 255, 0.45) !important;
  background: rgba(94, 168, 255, 0.14) !important;
  color: var(--accent, #5EA8FF) !important;
}
html body #projectForm .milestone-row[data-fixed="1"] .milestone-percent {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
}
/* aby se „Kč" (2 znaky) vešlo vedle čísla */
html body #projectForm .milestone-percent-wrap input {
  padding-right: 30px !important;
}

/* ============================================================
   S57 — ARCHIVACE KOORDINACE: tlačítko vždy + zvýraznění na 100 %
   Dřív se „Archivovat" vůbec nevykreslilo, dokud koordinace nebyla
   na 100 % — působilo to, že tlačítko nefunguje (nebylo co zmáčknout).
   Teď je vidět vždy (nenápadné) a jakmile je všechno vyřízené,
   rozsvítí se zeleně jako výzva k akci.
   ============================================================ */
html body #coordinationView .coordination-archive-action.is-ready {
  border-color: rgba(79, 201, 124, 0.5) !important;
  background: rgba(79, 201, 124, 0.16) !important;
  color: var(--good, #4FC97C) !important;
  font-weight: 700 !important;
}
html body #coordinationView .coordination-archive-action.is-ready:hover {
  border-color: var(--good, #4FC97C) !important;
  background: rgba(79, 201, 124, 0.26) !important;
}

/* ============================================================
   S58 — VLASTNÍ POTVRZOVACÍ DIALOG
   Nahrazuje nativní window.confirm(), který se v některých
   prostředích vůbec nezobrazí a tiše vrátí false — destruktivní
   akce pak vypadá jako nefunkční tlačítko (hlášeno u „Archivovat"
   v Koordinaci). Vzhled podle panelů aplikace.
   ============================================================ */
html body .confirm-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  background: rgba(6, 8, 12, 0.72) !important;
  backdrop-filter: blur(3px) !important;
}
html body .confirm-overlay .confirm-dialog {
  width: min(460px, 100%) !important;
  padding: 22px !important;
  border: 1px solid var(--line) !important;
  border-radius: 16px !important;
  background: var(--panel, #171A22) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55) !important;
}
html body .confirm-overlay .confirm-dialog h3 {
  margin: 0 0 10px !important;
  font-family: var(--font-ui) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--ink, #F2F1EC) !important;
}
html body .confirm-overlay .confirm-dialog p {
  margin: 0 !important;
  font-family: var(--font-ui) !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  color: var(--muted, #878EA0) !important;
}
html body .confirm-overlay .confirm-actions {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  margin-top: 20px !important;
}
html body .confirm-overlay .confirm-actions button {
  height: var(--system-action-height, 40px) !important;
  padding: 0 18px !important;
  border-radius: 11px !important;
  font-family: var(--font-ui) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}
html body .confirm-overlay .confirm-actions .primary-action.danger-action {
  border: 1px solid rgba(255, 98, 87, 0.5) !important;
  background: rgba(255, 98, 87, 0.18) !important;
  color: var(--red, #FF6257) !important;
}
html body .confirm-overlay .confirm-actions .primary-action.danger-action:hover {
  border-color: var(--red, #FF6257) !important;
  background: rgba(255, 98, 87, 0.28) !important;
}

/* ============================================================
   S59 — KARTA PROJEKTU VE STYLU KOORDINAČNÍ POLOŽKY
   Přebírá kostru z .coordination-item: levý čtvereček (tam, kde má
   koordinace zaškrtávátko, tady číslo projektu), název s pruhy pod
   sebou, sloupce popsaných údajů, osy a tlačítka vpravo. Podbarvení
   plochy podle stavu + boční pruh 4 px. Výška 136 px jako koordinace.
   Vnitřní odsazení je 19 px svisle (ne 14) — tím karta sedne na výšku
   koordinační položky, aniž by se roztahovaly mezery mezi pruhy.
   Rozměry: sloupec názvu 322 px (stejně dlouhé pruhy jako koordinace),
   tlačítka 222 px ve dvou sloupcích, osy hned pod údaji.
   ============================================================ */
html body #projectsView .project-card {
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) !important;
  gap: 14px !important;
  padding: 19px 16px !important;
  border-radius: 14px !important;
  background: var(--panel-2) !important;
  background-image: none !important;
  align-items: start !important;
}
html body #projectsView .project-card.is-late {
  background-image: linear-gradient(0deg, rgba(255, 98, 87, 0.13), rgba(255, 98, 87, 0.13)) !important;
  border-left: 4px solid var(--red, #FF6257) !important;
  padding-left: 12px !important;
}
html body #projectsView .project-card.is-done {
  background-image: linear-gradient(0deg, rgba(79, 201, 124, 0.13), rgba(79, 201, 124, 0.13)) !important;
  border-left: 4px solid var(--good, #4FC97C) !important;
  padding-left: 12px !important;
}

/* levý čtvereček s číslem — roste symetricky, je vystředěný v pevném sloupci */
html body #projectsView .project-num {
  width: 28px !important;
  height: 28px !important;
  margin: 0 auto !important;
  border-radius: 9px !important;
  border: 1px solid rgba(150, 160, 190, 0.26) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--font-ui) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  color: var(--ink, #F2F1EC) !important;
}
html body #projectsView .project-num.d3 { width: 36px !important; }
html body #projectsView .project-num.d4 { width: 44px !important; }
html body #projectsView .project-num.is-empty { border-style: dashed !important; opacity: 0.4 !important; }

/* mřížka: název a tlačítka přes oba řádky, osy hned pod údaji */
html body #projectsView .project-main {
  display: grid !important;
  grid-template-columns: 322px minmax(0, 1fr) 222px !important;
  grid-template-areas: "titles facts acts" "titles axes acts" !important;
  gap: 10px 22px !important;
  align-content: start !important;
  min-width: 0 !important;
}
html body #projectsView .project-titles { grid-area: titles !important; display: grid !important; gap: 3px !important; align-content: start !important; }
html body #projectsView .project-facts { grid-area: facts !important; }
html body #projectsView .project-axes { grid-area: axes !important; }
html body #projectsView .project-acts { grid-area: acts !important; }

html body #projectsView .project-titles > strong {
  font-family: var(--font-ui) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--ink, #F2F1EC) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
/* stavová pilulka i akční pruhy mají stejný rozměr i výraz */
html body #projectsView .project-titles > .status-pill,
html body #projectsView .project-titles > .project-bar-action {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 22px !important;
  padding: 0 7px !important;
  border: 0 !important;
  border-radius: 9px !important;
  font-family: var(--font-ui) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  text-align: center !important;
}
html body #projectsView .project-titles > .project-bar-action {
  background: rgba(255, 255, 255, 0.043) !important;
  color: var(--muted, #878EA0) !important;
  cursor: pointer !important;
}
html body #projectsView .project-titles > .project-bar-action:hover {
  background: rgba(255, 255, 255, 0.09) !important;
  color: var(--ink, #F2F1EC) !important;
}
html body #projectsView .project-titles > .project-bar-action.is-active {
  background: rgba(94, 168, 255, 0.15) !important;
  color: var(--accent, #5EA8FF) !important;
}
html body #projectsView .project-titles > .project-bar-action.is-active:hover {
  background: rgba(94, 168, 255, 0.24) !important;
}

/* údaje ve dvou sloupcích, popisky verzálkami jako v koordinaci */
html body #projectsView .project-facts {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 4px 16px !important;
  align-content: start !important;
}
html body #projectsView .project-facts > span {
  display: grid !important;
  min-width: 0 !important;
  font-family: var(--font-ui) !important;
  font-size: 12px !important;
  color: var(--ink, #F2F1EC) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
html body #projectsView .project-facts > span > b {
  display: block !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  color: var(--muted, #878EA0) !important;
}

/* obě osy vedle sebe hned pod údaji */
html body #projectsView .project-axes {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 22px !important;
  align-content: start !important;
}
html body #projectsView .project-axis { display: grid !important; gap: 5px !important; align-content: start !important; min-width: 0 !important; }
html body #projectsView .project-track {
  height: 5px !important;
  border-radius: 3px !important;
  background: rgba(150, 160, 190, 0.16) !important;
  overflow: hidden !important;
}
html body #projectsView .project-track > i { display: block !important; height: 100% !important; border-radius: 3px !important; }
html body #projectsView .project-axis-label {
  font-family: var(--font-ui) !important;
  font-size: 11.5px !important;
  line-height: 15px !important;
  color: var(--muted, #878EA0) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
html body #projectsView .project-axis-label.is-late { color: var(--red, #FF6257) !important; }

/* čtyři akce ve dvou sloupcích */
html body #projectsView .project-acts {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 6px !important;
  align-content: start !important;
}
html body #projectsView .project-acts > .inline-action { width: 100% !important; }

/* rozbalený detail výkonu přes celou šířku karty */
html body #projectsView .project-card > .external-cost-inline-detail { grid-column: 1 / -1 !important; }

/* --- S59b · dorovnání řádkování.
   V appce platí obecná pravidla pro line-height, která kartu natáhla ze 136 na 180 px
   (údaje 90 místo 56, osy 42 místo 25). Řádkování proto nastavuji explicitně a
   sloupce tlačítek přes minmax(0,1fr), aby je široký popisek nerozhodil. --- */
html body #projectsView .project-titles > strong { line-height: 23px !important; }
html body #projectsView .project-facts > span { line-height: 15px !important; }
html body #projectsView .project-facts > span > b { line-height: 11px !important; margin: 0 !important; }
html body #projectsView .project-axis-label { line-height: 15px !important; }
html body #projectsView .project-acts { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
html body #projectsView .project-titles > .status-pill,
html body #projectsView .project-titles > .project-bar-action { line-height: 22px !important; margin: 0 !important; }

/* --- S59c · pruhy pod názvem na 22 px.
   Systémové tokeny (--system-action-height 40 px u tlačítek, vlastní výška
   u .status-pill) přebily height z S59 — pruhy měřily 30 a 40 px místo 22 a
   karta kvůli tomu vyrostla na 180 px. Nutná ztrojená specificita viewu. --- */
html body #projectsView#projectsView#projectsView .project-titles > .status-pill,
html body #projectsView#projectsView#projectsView .project-titles > .project-bar-action {
  height: 22px !important;
  min-height: 22px !important;
  max-height: 22px !important;
  line-height: 22px !important;
  padding: 0 7px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  border-radius: 9px !important;
  border: 0 !important;
}
html body #projectsView#projectsView#projectsView .project-acts > .inline-action {
  height: 32px !important;
  min-height: 32px !important;
}

/* --- S59d · odsazení a finální výška.
   (a) Neutrální karty mají boční pruh ze S53 taky (4 px), ale zůstávalo jim
       padding-left 16 px — obsah tak začínal o 4 px jinde než u podbarvených.
       Jednotně 12 px + 4 px pruh = 16 px u všech.
   (b) Koordinační položka v aplikaci měří 145 px (ne 136 jako v mockupu),
       takže svislé odsazení 23.5 px místo 19 px. --- */
html body #projectsView .project-card {
  padding: 23.5px 16px 23.5px 12px !important;
  border-left-width: 4px !important;
  border-left-style: solid !important;
}

/* ============================================================
   S60 — ARCHIV VE STEJNÉM DESIGNU JAKO PROJEKTY
   Stejná kostra jako S59, ale prostřední sloupec nese VÝSLEDEK fáze
   místo os (v archivu už nic neběží). Karta je ZÁMĚRNĚ NEUTRÁLNÍ —
   celoplošné podbarvení by u prodělečné zakázky četlo jako „průšvih",
   i když jde o hotovou práci. Barvu nesou jen samotná čísla výsledku,
   takže je vidět i to, že termín vyšel, i když zisk ne.
   ============================================================ */
html body #archiveView .project-card.archive-card {
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) !important;
  gap: 14px !important;
  padding: 23.5px 16px 23.5px 12px !important;
  border-radius: 14px !important;
  background: var(--panel-2) !important;
  background-image: none !important;
  border-left: 4px solid rgba(150, 160, 190, 0.3) !important;
  align-items: start !important;
}
html body #archiveView .project-num {
  width: 28px !important;
  height: 28px !important;
  margin: 0 auto !important;
  border-radius: 9px !important;
  border: 1px solid rgba(150, 160, 190, 0.26) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--font-ui) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--ink, #F2F1EC) !important;
}
html body #archiveView .project-num.d3 { width: 36px !important; }
html body #archiveView .project-num.d4 { width: 44px !important; }
html body #archiveView .project-num.is-empty { border-style: dashed !important; opacity: 0.4 !important; }

html body #archiveView .project-main {
  display: grid !important;
  grid-template-columns: 322px minmax(0, 1fr) 222px !important;
  grid-template-areas: "titles facts acts" "titles results acts" !important;
  gap: 10px 22px !important;
  align-content: start !important;
  min-width: 0 !important;
}
html body #archiveView .project-titles { grid-area: titles !important; display: grid !important; gap: 3px !important; align-content: start !important; }
html body #archiveView .project-facts { grid-area: facts !important; }
html body #archiveView .archive-result-grid { grid-area: results !important; }
html body #archiveView .project-acts { grid-area: acts !important; }

html body #archiveView .project-titles > strong {
  font-family: var(--font-ui) !important;
  font-size: 15px !important;
  line-height: 23px !important;
  font-weight: 700 !important;
  color: var(--ink, #F2F1EC) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
html body #archiveView .project-titles > .project-bar-static {
  background: rgba(255, 255, 255, 0.043) !important;
  color: var(--muted, #878EA0) !important;
}

/* údaje — „Bez poznámky" se sází stejně jako skutečná poznámka (žádná kurzíva) */
html body #archiveView .project-facts {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 4px 16px !important;
  align-content: start !important;
}
html body #archiveView .project-facts > span {
  display: grid !important;
  min-width: 0 !important;
  font-family: var(--font-ui) !important;
  font-size: 12px !important;
  line-height: 15px !important;
  font-style: normal !important;
  color: var(--ink, #F2F1EC) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
html body #archiveView .project-facts > span.is-wide { grid-column: 1 / -1 !important; }
html body #archiveView .project-facts > span > b {
  display: block !important;
  font-size: 11px !important;
  line-height: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  color: var(--muted, #878EA0) !important;
  margin: 0 !important;
}

/* výsledek fáze na místě, kde mají projekty osy */
html body #archiveView#archiveView#archiveView .archive-result-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
  align-content: start !important;
}
html body #archiveView#archiveView#archiveView .archive-result-pill {
  display: grid !important;
  gap: 2px !important;
  padding: 0 0 0 8px !important;
  margin: 0 !important;
  border: 0 !important;
  border-left: 2px solid rgba(150, 160, 190, 0.3) !important;
  border-radius: 0 !important;
  background: transparent !important;
  min-width: 0 !important;
}
html body #archiveView#archiveView#archiveView .archive-result-pill > span {
  font-family: var(--font-ui) !important;
  font-size: 11px !important;
  line-height: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  color: var(--muted, #878EA0) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
html body #archiveView#archiveView#archiveView .archive-result-pill > strong {
  font-family: var(--font-ui) !important;
  font-size: 12px !important;
  line-height: 15px !important;
  font-weight: 700 !important;
  color: var(--ink, #F2F1EC) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
html body #archiveView#archiveView#archiveView .archive-result-pill.is-good { border-left-color: var(--good, #4FC97C) !important; }
html body #archiveView#archiveView#archiveView .archive-result-pill.is-good > strong { color: var(--good, #4FC97C) !important; }
html body #archiveView#archiveView#archiveView .archive-result-pill.is-bad { border-left-color: var(--red, #FF6257) !important; }
html body #archiveView#archiveView#archiveView .archive-result-pill.is-bad > strong { color: var(--red, #FF6257) !important; }

/* dvě akce vpravo */
html body #archiveView .project-acts {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
  align-content: start !important;
}
html body #archiveView .project-acts > .inline-action { width: 100% !important; }
html body #archiveView#archiveView#archiveView .project-acts > .inline-action { height: 32px !important; min-height: 32px !important; }

/* pruhy pod názvem na 22 px — stejná past jako u S59c (systémové tokeny) */
html body #archiveView#archiveView#archiveView .project-titles > .status-pill,
html body #archiveView#archiveView#archiveView .project-titles > .project-bar-static {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 22px !important;
  min-height: 22px !important;
  max-height: 22px !important;
  line-height: 22px !important;
  padding: 0 7px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 9px !important;
  font-family: var(--font-ui) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  text-align: center !important;
}

html body #archiveView .project-card.archive-card > .external-cost-inline-detail { grid-column: 1 / -1 !important; }

/* --- S60b · výsledková pilulka na jeden sloupec.
   Starší pravidlo (oprava D1) z ní dělá dvousloupcovou mřížku „tečka | text",
   takže hodnota dostala 6 px a ořezala se. Reset mřížky + dorovnání výšky
   karty na 145 px jako projekty a koordinace. --- */
html body #archiveView#archiveView#archiveView .archive-result-pill {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas: none !important;
  grid-auto-flow: row !important;
  align-content: start !important;
}
html body #archiveView#archiveView#archiveView .archive-result-pill > span,
html body #archiveView#archiveView#archiveView .archive-result-pill > strong {
  grid-column: 1 !important;
  width: 100% !important;
}
html body #archiveView .project-card.archive-card { padding-top: 26.5px !important; padding-bottom: 26.5px !important; }

/* --- S60c · zrušení legacy min-height u výsledkové pilulky.
   Držela 42 px (z doby, kdy měla tři řádky vč. tečky), takže řádek s výsledky
   byl o 14 px vyšší, než potřebuje, a karta nesedla na 145 px. --- */
html body #archiveView#archiveView#archiveView .archive-result-pill {
  min-height: 0 !important;
  height: auto !important;
  grid-template-rows: auto auto !important;
}
html body #archiveView .project-card.archive-card { padding-top: 25.5px !important; padding-bottom: 25.5px !important; }

/* ============================================================
   S61 — ARCHIV KOORDINACE: srovnaný řádek + zpětný detail
   Řádek dřív neměl žádné vnitřní rozvržení (číslo, název a popis byly
   v holém divu), takže se rozlítl. Teď přebírá stejnou kostru jako
   Projekty a Archiv. Nově se dá rozbalit „Detail" a zpětně se podívat,
   co se s kým a v jakých termínech řešilo.
   ============================================================ */
html body #coordinationView .coordination-archive-item {
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) !important;
  gap: 14px !important;
  padding: 19px 16px 19px 12px !important;
  border-radius: 14px !important;
  background: var(--panel-2) !important;
  background-image: none !important;
  border-left: 4px solid rgba(150, 160, 190, 0.3) !important;
  align-items: start !important;
}
html body #coordinationView .coordination-archive-item + .coordination-archive-item { margin-top: 10px !important; }

html body #coordinationView .coordination-archive-item .project-num {
  width: 28px !important;
  height: 28px !important;
  margin: 0 auto !important;
  border-radius: 9px !important;
  border: 1px solid rgba(150, 160, 190, 0.26) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--font-ui) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--ink, #F2F1EC) !important;
}
html body #coordinationView .coordination-archive-item .project-num.d3 { width: 36px !important; }
html body #coordinationView .coordination-archive-item .project-num.d4 { width: 44px !important; }

html body #coordinationView .coordination-archive-item .project-main {
  display: grid !important;
  grid-template-columns: 322px minmax(0, 1fr) 222px !important;
  gap: 10px 22px !important;
  align-items: start !important;
  min-width: 0 !important;
}
html body #coordinationView .coordination-archive-item .project-titles {
  display: grid !important;
  gap: 3px !important;
  align-content: start !important;
}
html body #coordinationView .coordination-archive-item .project-titles > strong {
  font-family: var(--font-ui) !important;
  font-size: 15px !important;
  line-height: 23px !important;
  font-weight: 700 !important;
  color: var(--ink, #F2F1EC) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
html body #coordinationView#coordinationView#coordinationView .coordination-archive-item .project-bar-static {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 22px !important;
  min-height: 22px !important;
  max-height: 22px !important;
  line-height: 22px !important;
  padding: 0 7px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: rgba(255, 255, 255, 0.043) !important;
  color: var(--muted, #878EA0) !important;
  font-family: var(--font-ui) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}
html body #coordinationView .coordination-archive-item .project-facts {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 4px 16px !important;
  align-content: start !important;
}
html body #coordinationView .coordination-archive-item .project-facts > span {
  display: grid !important;
  min-width: 0 !important;
  font-family: var(--font-ui) !important;
  font-size: 12px !important;
  line-height: 15px !important;
  color: var(--ink, #F2F1EC) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
html body #coordinationView .coordination-archive-item .project-facts > span > b {
  display: block !important;
  font-size: 11px !important;
  line-height: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  color: var(--muted, #878EA0) !important;
  margin: 0 !important;
}
html body #coordinationView .coordination-archive-item .project-acts {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
  align-content: start !important;
}
html body #coordinationView#coordinationView#coordinationView .coordination-archive-item .project-acts > .inline-action {
  width: 100% !important;
  height: 32px !important;
  min-height: 32px !important;
}
html body #coordinationView .coordination-archive-item > .external-cost-inline-detail { grid-column: 1 / -1 !important; }

/* --- rozbalený zpětný detail: co, s kým, do kdy, kdy vyřízeno --- */
html body #coordinationView .coordination-archive-detail { display: grid !important; gap: 2px !important; }
html body #coordinationView .coordination-archive-detail-head,
html body #coordinationView .coordination-archive-detail-row {
  display: grid !important;
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.4fr) 120px 120px minmax(0, 1.2fr) !important;
  gap: 16px !important;
  align-items: center !important;
  padding: 8px 10px !important;
  border-radius: 9px !important;
}
html body #coordinationView .coordination-archive-detail-head {
  padding-bottom: 4px !important;
  font-family: var(--font-ui) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--muted, #878EA0) !important;
}
html body #coordinationView .coordination-archive-detail-row {
  background: rgba(255, 255, 255, 0.028) !important;
  font-family: var(--font-ui) !important;
  font-size: 12px !important;
  color: var(--ink-soft, rgba(242, 241, 236, 0.86)) !important;
}
html body #coordinationView .coordination-archive-detail-row > span {
  display: grid !important;
  gap: 2px !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
html body #coordinationView .coordination-archive-detail-row strong { font-weight: 600 !important; color: var(--ink, #F2F1EC) !important; }
html body #coordinationView .coordination-archive-detail-row em {
  font-style: normal !important;
  font-size: 10.5px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  color: var(--muted, #878EA0) !important;
}
html body #coordinationView .coordination-archive-detail-row .is-done { color: var(--good, #4FC97C) !important; }
html body #coordinationView .coordination-archive-detail-row .is-late { color: var(--red, #FF6257) !important; }
html body #coordinationView .coordination-archive-detail-note {
  margin: 0 0 4px !important;
  padding: 0 10px 6px 10px !important;
  font-family: var(--font-ui) !important;
  font-size: 11.5px !important;
  line-height: 1.5 !important;
  color: var(--muted, #878EA0) !important;
}
html body #coordinationView .coordination-archive-detail-note > b {
  display: block !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
}

/* --- S61b · šířka akcí v archivu koordinace.
   „Vrátit do aktivních" potřebuje 132 px, ale sloupec dával 108 → text přetékal
   ven z rámečku. Protože tlačítka mají overflow: visible, přetečení se NEPROJEVÍ
   v scrollWidth — kontrola ořezů to neodhalila. Pevné šířky podle nejdelšího
   popisku („Skrýt detail" 92 px / „Vrátit do aktivních" 132 px). --- */
html body #coordinationView .coordination-archive-item .project-main {
  grid-template-columns: 322px minmax(0, 1fr) 238px !important;
}
html body #coordinationView .coordination-archive-item .project-acts {
  grid-template-columns: 96px 136px !important;
}

/* ============================================================
   S62 — STAV „NEPODÁNO" V KOORDINACI
   Položka bez data podání/předání je jen soupis toho, co bude potřeba
   obejít — nic u ní neběží. Odlišeno od „Čeká" (podáno, běží lhůta):
   dráha osy je čárkovaná a prázdná, popisek i pilulka jsou tlumené.
   ============================================================ */
html body #coordinationView .coordination-item.is-pending .coordination-deadline-track {
  background: transparent !important;
  border: 1px dashed rgba(150, 160, 190, 0.34) !important;
  box-sizing: border-box !important;
}
html body #coordinationView .coordination-item.is-pending .coordination-deadline-track > i { background: transparent !important; }
html body #coordinationView .coordination-deadline-label.is-pending { color: var(--muted, #878EA0) !important; }
/* tlačítko „Podáno dnes" je hlavní akce takové položky */
html body #coordinationView#coordinationView#coordinationView .coordination-submit-action {
  border-color: rgba(94, 168, 255, 0.45) !important;
  background: rgba(94, 168, 255, 0.1) !important;
  color: var(--accent, #5EA8FF) !important;
}
html body #coordinationView#coordinationView#coordinationView .coordination-submit-action:hover {
  border-color: var(--accent, #5EA8FF) !important;
  background: rgba(94, 168, 255, 0.2) !important;
}

/* ============================================================
   S63 — ŽÁDNÁ KURZÍVA + VYMAZÁNÍ DATA V KALENDÁŘI
   (a) Kurzíva se v aplikaci nepoužívá NIKDY — ani u „zatím nepodáno",
       ani u „Bez poznámky". Pojistka pro celou appku, aby se nevrátila.
   (b) Kalendář má u polí s data-clear-label tlačítko, které datum smaže
       a vrátí pole do stavu „nezadáno" (typicky zpět na nepodáno).
   ============================================================ */
html body .app-shell *,
html body .calendar-popover * { font-style: normal !important; }

html body .calendar-popover .calendar-clear {
  width: 100% !important;
  margin-top: 8px !important;
  height: var(--system-action-height, 40px) !important;
  padding: 0 12px !important;
  border: 1px solid var(--line) !important;
  border-radius: 11px !important;
  background: transparent !important;
  color: var(--muted, #878EA0) !important;
  font-family: var(--font-ui) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}
html body .calendar-popover .calendar-clear:hover {
  border-color: rgba(150, 160, 190, 0.4) !important;
  color: var(--ink, #F2F1EC) !important;
}

/* ============================================================
   S64 — NEBLOKUJÍCÍ HLÁŠKY (náhrada alert())
   alert() umí prohlížeč potlačit a validace pak selže potichu —
   stejná třída chyby jako u nativního confirm (S58). Hlášky se
   skládají vpravo dole, chybové mají červený tón, trvalé (sticky)
   nezmizí samy a mohou nést akční tlačítko (Načíst znovu).
   ============================================================ */
html body .notice-stack {
  position: fixed !important;
  right: 20px !important;
  bottom: 20px !important;
  z-index: 10000 !important;
  display: grid !important;
  gap: 10px !important;
  width: min(430px, calc(100vw - 40px)) !important;
}
html body .app-notice {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  gap: 4px 10px !important;
  align-items: center !important;
  padding: 13px 14px !important;
  border: 1px solid var(--line) !important;
  border-left: 4px solid rgba(150, 160, 190, 0.45) !important;
  border-radius: 13px !important;
  background: var(--panel, #171A22) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5) !important;
}
html body .app-notice.is-danger { border-left-color: var(--red, #FF6257) !important; }
html body .app-notice.is-success { border-left-color: var(--good, #4FC97C) !important; }
html body .app-notice.is-info { border-left-color: var(--accent, #5EA8FF) !important; }
html body .app-notice-text {
  font-family: var(--font-ui) !important;
  font-size: 12.5px !important;
  line-height: 1.5 !important;
  color: var(--ink-soft, rgba(242, 241, 236, 0.86)) !important;
}
html body .app-notice-action {
  height: 32px !important;
  padding: 0 12px !important;
  border: 1px solid rgba(94, 168, 255, 0.45) !important;
  border-radius: 10px !important;
  background: rgba(94, 168, 255, 0.1) !important;
  color: var(--accent, #5EA8FF) !important;
  font-family: var(--font-ui) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}
html body .app-notice-action:hover { background: rgba(94, 168, 255, 0.2) !important; }
html body .app-notice-close {
  width: 26px !important;
  height: 26px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--muted, #878EA0) !important;
  font-size: 15px !important;
  line-height: 1 !important;
  cursor: pointer !important;
}
html body .app-notice-close:hover { color: var(--ink, #F2F1EC) !important; background: rgba(255, 255, 255, 0.06) !important; }

/* ============================================================
   S65 — SELF-HOSTOVANÝ FONT (Space Grotesk, variabilní 300–700)
   Google Fonts CDN odstraněn: (1) načítání z fonts.googleapis.com
   posílá IP návštěvníka Googlu — v EU opakovaně pokutováno (GDPR),
   (2) appka teď funguje i bez internetu / při výpadku CDN,
   (3) Inter se stahoval v 5 vahách a nepoužil se ani jednou.
   Dva soubory = latin + latin-ext (čeština: ě š č ř ž …).
   ============================================================ */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("assets/fonts/space-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("assets/fonts/space-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* S65b — fokus prsten sladěn s aktuální paletou (šalvějová byla ze staré éry) */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid rgba(94, 168, 255, 0.65) !important;
  outline-offset: 2px !important;
}

/* ============================================================
   S66 — PRÁZDNÝ STAV „VYBRANÝ PROJEKT" PŘES CELOU ŠÍŘKU
   #coordinationMetrics je mřížka 3 sloupců (metriky) — hláška bez
   vybraného projektu padala jen do prvního sloupce a dělala úzký
   čtverec. Roztáhne se přes všechny sloupce jako ostatní empty stavy.
   ============================================================ */
html body #coordinationView #coordinationMetrics .coordination-empty-state {
  grid-column: 1 / -1 !important;
  min-height: 96px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 22px 24px !important;
}

/* ============================================================
   S67 — PŘÍSTUP DO APLIKACE (Uzávěrka → vybraný člověk)
   Blok pod „Sazba a role" podle mockupu _navrh-pristupy.html
   (v _archiv po implementaci). Datový model je připravený pro
   fázi 2 — vynucení přihlašování se zapne s databází.
   ============================================================ */
/* pilulka stavu na kartě člověka */
html body #closingView .time-person-card .tpc-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  width: 100% !important;
}
html body .access-pill {
  display: inline-flex !important;
  align-items: center !important;
  height: 18px !important;
  padding: 0 8px !important;
  border-radius: 9px !important;
  font-family: var(--font-ui) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}
html body .access-pill.is-on { background: rgba(79, 201, 124, 0.15) !important; color: var(--good, #4FC97C) !important; }
html body .access-pill.is-wait { background: rgba(240, 190, 98, 0.15) !important; color: var(--gold, #F0BE62) !important; }
html body .access-pill.is-off { background: rgba(150, 160, 190, 0.16) !important; color: var(--muted, #878EA0) !important; }

/* blok v detailu — přes celou šířku formulářové mřížky */
html body #closingView .closing-person-form > .cpf-access {
  grid-column: 1 / -1 !important;
  margin-top: 2px !important;
  padding: 14px 16px !important;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  background: var(--panel-2, #1D2129) !important;
  display: grid !important;
  gap: 12px !important;
}
html body #closingView .cpf-access-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}
html body #closingView .cpf-access-head > h4 {
  margin: 0 !important;
  font-family: var(--font-ui) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--ink, #F2F1EC) !important;
}
html body #closingView .cpf-access-facts {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 4px 16px !important;
}
html body #closingView .cpf-access-facts > span {
  display: grid !important;
  min-width: 0 !important;
  font-family: var(--font-ui) !important;
  font-size: 12px !important;
  line-height: 15px !important;
  color: var(--ink, #F2F1EC) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
html body #closingView .cpf-access-facts > span > b {
  display: block !important;
  font-size: 11px !important;
  line-height: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  color: var(--muted, #878EA0) !important;
}
html body #closingView .cpf-access-invite {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 12px !important;
  align-items: end !important;
}
html body #closingView .cpf-access-invite label {
  display: grid !important;
  gap: 5px !important;
  font-family: var(--font-ui) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  color: var(--muted, #878EA0) !important;
}
html body #closingView .cpf-access-invite input {
  height: var(--system-field-height, 42px) !important;
}
html body #closingView .cpf-access-acts { display: flex !important; gap: 6px !important; flex-wrap: wrap !important; }
html body #closingView#closingView .cpf-access .inline-action { height: 32px !important; min-height: 32px !important; }
html body #closingView .cpf-access-primary {
  border-color: rgba(94, 168, 255, 0.45) !important;
  background: rgba(94, 168, 255, 0.1) !important;
  color: var(--accent, #5EA8FF) !important;
  height: var(--system-field-height, 42px) !important;
  min-height: var(--system-field-height, 42px) !important;
}
html body #closingView .cpf-access-danger {
  border-color: rgba(255, 98, 87, 0.45) !important;
  background: rgba(255, 98, 87, 0.08) !important;
  color: var(--red, #FF6257) !important;
}
html body #closingView .cpf-access-good {
  border-color: rgba(79, 201, 124, 0.45) !important;
  background: rgba(79, 201, 124, 0.1) !important;
  color: var(--good, #4FC97C) !important;
}
html body #closingView .cpf-access-hint,
html body #closingView .cpf-access-guard {
  margin: 0 !important;
  font-family: var(--font-ui) !important;
  font-size: 11.5px !important;
  line-height: 1.55 !important;
  color: var(--muted, #878EA0) !important;
}

/* --- S67b · horní řádek karty člověka přes celou šířku.
   Karta má mřížku "role hodiny / jméno hodiny" — pilulka přístupu se v levém
   sloupci (~116 px) mačkala a ořezávala. Nová mřížka: horní řádek (role +
   pilulka) přes obě kolony, jméno a hodiny pod ním. --- */
html body #closingView#closingView .time-person-card {
  grid-template-areas:
    "top   top"
    "name  hours" !important;
}
html body #closingView#closingView .time-person-card > .tpc-top { grid-area: top !important; }
html body #closingView#closingView .time-person-card > strong { grid-area: name !important; }
html body #closingView#closingView .time-person-card > small { grid-area: hours !important; }

/* --- S67c · blok Přístup v úzkém sloupci.
   „Sazba a role" je prostřední svislý sloupec (~340 px) — třísloupcové údaje
   a řádek input+tlačítko z mockupu roztahovaly celou mřížku Uzávěrky
   (scrollWidth 1396 → vodorovný posuv). Vše pod sebe, plná šířka. --- */
html body #closingView .cpf-access { min-width: 0 !important; }
html body #closingView .cpf-access-facts { grid-template-columns: minmax(0, 1fr) !important; gap: 8px !important; }
html body #closingView .cpf-access-invite { grid-template-columns: minmax(0, 1fr) !important; }
html body #closingView .cpf-access-invite input { width: 100% !important; min-width: 0 !important; }
html body #closingView .cpf-access-primary { width: 100% !important; }
html body #closingView .cpf-access-acts > .inline-action { flex: 1 1 auto !important; min-width: 0 !important; }

/* --- S68 · KPI dlaždice Uzávěrky nesmí vytlačit stránku.
   Mřížka měla minmax(0,1fr), ale nowrap hodnoty uvnitř dlaždic trčely ven
   (overflow visible) — při oknech ~1300 px to dělalo vodorovný posuv celé
   Uzávěrky. Obsah dlaždice se ořízne trojtečkou, plný text nese title. --- */
html body #closingMetrics > * { min-width: 0 !important; overflow: hidden !important; }
html body #closingMetrics > * > * {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* ============================================================
   S69 — VÝKAZ PRÁCE V UZÁVĚRCE JAKO V „MOJE PRÁCE"
   Tabulka s lepivou hlavičkou (Datum/Projekt/Hodiny/Popis) nahrazena
   rozklikávacími kartami zápisů — hlavička byla při scrollu průhledná
   a formát se lišil od karty Práce. Pravidla zrcadlí #reportsView
   .time-self-entries-panel (tam jsou scopovaná, sem je přenáším).
   ============================================================ */
html body #closingView .closing-entry-list {
  display: grid !important;
  gap: 8px !important;
  align-content: start !important;
}
html body #closingView .closing-entry-list .time-entry-item {
  cursor: pointer !important;
}
html body #closingView .closing-entry-list .time-entry-title-row {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 12px !important;
}
html body #closingView .closing-entry-list .time-entry-hours {
  flex: none !important;
  color: var(--ink, #F2F1EC) !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums !important;
}
html body #closingView .closing-entry-list .time-entry-summary {
  color: var(--muted, #878EA0) !important;
  font-family: var(--font-ui) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
html body #closingView .closing-entry-list .time-entry-item:not(.is-selected) .time-entry-extra {
  display: none !important;
}
html body #closingView .closing-entry-list .time-entry-item.is-selected .time-entry-extra {
  display: block !important;
  margin-top: 8px !important;
}
html body #closingView .closing-entry-list .time-entry-item.is-selected .time-entry-extra p {
  display: block !important;
  margin: 0 0 6px !important;
  font-family: var(--font-ui) !important;
  font-size: 12.5px !important;
  line-height: 1.5 !important;
  color: var(--ink-soft, rgba(242, 241, 236, 0.86)) !important;
}

/* --- S69b · plná parita s kartou „Moje práce".
   Datum stejným řezem jako v Práci, tlačítka Upravit/Smazat v rozbaleném
   detailu ve dvou sloupcích — pravidla v Práci jsou scopovaná na
   #reportsView .time-self-entries-panel, sem se zrcadlí pro Uzávěrku. --- */
html body #closingView .closing-entry-list .time-entry-title-row > strong:first-child {
  font-size: var(--type-card-title, 14px) !important;
  font-weight: 780 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
html body #closingView .closing-entry-list .time-entry-item .time-entry-actions { display: none !important; }
html body #closingView .closing-entry-list .time-entry-item.is-selected .time-entry-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  width: 100% !important;
  gap: 12px !important;
  margin-top: 10px !important;
}
html body #closingView .closing-entry-list .time-entry-item.is-selected .time-entry-actions button {
  width: 100% !important;
  min-width: 0 !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 12px !important;
}

/* --- S69c · karta zápisu v Uzávěrce = blok, ne legacy mřížka.
   Obecné pravidlo dělá z .time-entry-item šestisloupcovou mřížku (stará
   tabulková éra) — v Práci to přebíjí #reportsView blok, v Uzávěrce ne:
   obsah se mačkal do 96px sloupce (tlačítka 60px, datum ořez o 1px). --- */
html body #closingView#closingView .closing-entry-list .time-entry-item {
  display: block !important;
}
html body #closingView#closingView .closing-entry-list .time-entry-main {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
}

/* --- S69d · typografická parita s „Moje práce" (změřeno, ne odhadnuto):
   hodiny 15px (bylo 14), projekt 13px (bylo 12), řádkování data 1.18,
   detailní text 12px/620/muted jako v Práci (byl 12.5/500/ink-soft). --- */
html body #closingView .closing-entry-list .time-entry-title-row > strong:first-child {
  line-height: 1.18 !important;
}
html body #closingView#closingView .closing-entry-list .time-entry-hours {
  font-size: 15px !important;
  line-height: 1.18 !important;
}
html body #closingView#closingView .closing-entry-list .time-entry-summary {
  font-size: 13px !important;
  line-height: 1.5 !important;
  font-weight: 500 !important;
}
html body #closingView#closingView .closing-entry-list .time-entry-item.is-selected .time-entry-extra p {
  font-size: 12px !important;
  font-weight: 620 !important;
  line-height: 1.36 !important;
  color: var(--muted, #878EA0) !important;
}

/* --- S69e · geometrická parita s „Moje práce" (změřeno):
   karta držela legacy min-height 82px (Práce 69), seznam měl mezery 8px
   (Práce 10), souhrn projektu byl inline (17px místo 20) a mezera
   titulek→projekt 1px místo 4. Datum se vrací na plný formát. --- */
html body #closingView#closingView .closing-entry-list .time-entry-item {
  min-height: 0 !important;
}
html body #closingView .closing-entry-list {
  gap: 10px !important;
}
html body #closingView#closingView .closing-entry-list .time-entry-main {
  display: grid !important;
  gap: 4px !important;
}
html body #closingView#closingView .closing-entry-list .time-entry-summary {
  display: block !important;
}

/* ============================================================
   S70 — SJEDNOCENÍ TLAČÍTEK NA KARTĚ ÚKOLU
   „Upravit" (inline-action, 32 px, rámeček) a „Komentáře" (subtle,
   40 px, bez rámečku, jiné písmo) byly dva různé druhy nad sebou.
   Komentáře přebírají systémový vzhled inline akcí a obě tlačítka
   mají stejnou šířku sloupce; zlatý badge nepřečtených zůstává.
   ============================================================ */
html body #dashboardView .task-actions {
  align-items: stretch !important;
}
html body #dashboardView .task-actions > .inline-action,
html body #dashboardView .task-actions > .subtle-comment-action {
  width: 100% !important;
  min-width: 0 !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  padding: 0 12px !important;
  border: 1px solid var(--line) !important;
  border-radius: 9px !important;
  background: var(--panel-2, #1D2129) !important;
  color: var(--ink, #F2F1EC) !important;
  font-family: var(--font-ui) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  cursor: pointer !important;
}
html body #dashboardView .task-actions > .inline-action:hover,
html body #dashboardView .task-actions > .subtle-comment-action:hover {
  border-color: rgba(150, 160, 190, 0.4) !important;
  color: var(--ink, #F2F1EC) !important;
  background: var(--panel-2, #1D2129) !important;
}
/* badge nepřečtených komentářů zůstává zlatý a kulatý */
html body #dashboardView .task-actions .task-unread-badge {
  flex: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  background: var(--gold, #F0BE62) !important;
  color: #0D0F14 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
}

/* --- S71 · komentářová kolonka: žádný posuvník, jen růst.
   Měla overflow-y: auto — jakmile se text (nebo i jen zalomený placeholder)
   nevešel do 40 px, naskočil posuvník se šipkami a text se ořízl. Výšku řídí
   výhradně auto-grow v JS, takže posuvník nemá co dělat. --- */
html body #dashboardView .dashboard-task-list .task-comment-form textarea {
  overflow-y: hidden !important;
  scrollbar-width: none !important;
}
html body #dashboardView .dashboard-task-list .task-comment-form textarea::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
}

/* --- S70b · srovnání tlačítek na kartě úkolu.
   „Upravit" si z dřívějška neslo margin-left: 8px a align-self: center, takže
   sedělo o 4 px vedle „Komentáře" (obě 100 × 32, jen posunutá). --- */
html body #dashboardView .task-actions > .inline-action,
html body #dashboardView .task-actions > .subtle-comment-action {
  margin: 0 !important;
  align-self: stretch !important;
}

/* ============================================================
   S72 — VÝKAZY A HISTORIE SAZEB V PODKLADECH PRO VÝPLATY
   Výkazy se dřív stahovaly jen u vybraného člověka vlevo — při větším
   týmu to znamenalo obcházet lidi po jednom. Teď je po uzavření měsíce
   PDF u každého řádku a k tomu rozbalovací historie sazeb.
   ============================================================ */
html body #closingView .closing-person-row-actions {
  display: flex !important;
  gap: 6px !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
}
html body #closingView#closingView .closing-person-row-actions > .inline-action {
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 10px !important;
  white-space: nowrap !important;
}
html body #closingView .closing-person-pdf-note {
  font-family: var(--font-ui) !important;
  font-size: 11.5px !important;
  color: var(--muted, #878EA0) !important;
  white-space: nowrap !important;
}
html body #closingView .closing-person-rates-row > td {
  padding-top: 0 !important;
  background: transparent !important;
}
html body #closingView .closing-person-rates {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px 14px !important;
  padding: 10px 12px !important;
  border: 1px solid var(--line) !important;
  border-radius: 11px !important;
  background: rgba(255, 255, 255, 0.028) !important;
}
html body #closingView .closing-person-rates > b {
  font-family: var(--font-ui) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  color: var(--muted, #878EA0) !important;
}
html body #closingView .closing-person-rates > span {
  font-family: var(--font-ui) !important;
  font-size: 12px !important;
  color: var(--ink-soft, rgba(242, 241, 236, 0.86)) !important;
  white-space: nowrap !important;
}

/* --- S56b · přepínač %/Kč nesmí měnit šířku.
   Měl min-width 22 px a šířka se řídila popiskem („%" 22 px, „Kč" 25 px),
   takže tlačítko v řádku s pevnou částkou sedělo o 3 px jinde než ostatní.
   Pevných 26 px = stejná pozice ve všech řádcích. Výška 40 px (bylo 22)
   nechávala kolem sebe nesouměrnou mezeru v 42px poli. --- */
html body #projectForm .milestone-mode {
  width: 26px !important;
  min-width: 26px !important;
  max-width: 26px !important;
  height: 26px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* --- S72b · rozbalená historie sazeb nesmí hýbat sloupci.
   Buňka přes celou šířku (colspan) svou minimální šířkou přerozdělovala
   sloupce tabulky — po rozkliknutí se posunuly až o 41 px. Trik width:0 +
   min-width:100% dá buňce nulový příspěvek k výpočtu šířek. --- */
html body #closingView .closing-person-rates-row > td { padding-left: 0 !important; padding-right: 0 !important; }
html body #closingView .closing-person-rates {
  width: 0 !important;
  min-width: 100% !important;
  box-sizing: border-box !important;
}

/* --- S72c · pevná šířka posledního sloupce.
   Skutečná příčina posunu: popisek tlačítka se mění „Sazby" → „Skrýt sazby",
   tím zesílí poslední sloupec a zbytek tabulky se přeskládá. Pevná šířka
   tlačítka i celé buňky drží mřížku v klidu v obou stavech. --- */
html body #closingView#closingView .closing-person-row-actions > [data-action="toggle-rate-history"] {
  width: 96px !important;
  min-width: 96px !important;
  flex: none !important;
}
html body #closingView#closingView .closing-person-row-actions > [data-action="export-person-pdf-row"] {
  width: 104px !important;
  min-width: 104px !important;
  flex: none !important;
}
html body #closingView .closing-person-pdf-note {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 104px !important;
  min-width: 104px !important;
}
html body #closingView#closingView #closingPeopleTable > tr > td:last-child,
html body #closingView#closingView #closingPeopleTable ~ thead th:last-child { width: 226px !important; }

/* --- S72d · linka pod hlavičkou Exportovaných výkazů pryč.
   `.workreports-head` měla border-bottom — jinde v aplikaci hlavičky
   seznamů (Databáze faktur, Pohyby peněz…) žádnou linku nemají. --- */
html body #closingView .workreports-head { border-bottom: 0 !important; }

/* --- S72e · sloupec akcí musí pojmout obě tlačítka vedle sebe.
   Vnitřek buňky měl 204 px, tlačítka potřebují 206 (96 + 6 + 104) → zalomila
   se pod sebe. Sloupec na 236 px dá vnitřku 214 px s rezervou. --- */
html body #closingView#closingView #closingPeopleTable > tr > td:last-child { width: 236px !important; }
html body #closingView .closing-person-row-actions { flex-wrap: nowrap !important; }

/* --- S67d · blok Přístup do aplikace je rozklikávací.
   Sbalené: jen titulek + stav (aby panel Sazba a role zůstal přehledný).
   Rozbalené: e-mail, oprávnění, poslední přihlášení a akce. --- */
html body #closingView .cpf-access { gap: 0 !important; padding: 0 !important; overflow: hidden !important; }
html body #closingView#closingView .cpf-access-head {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 14px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: transparent !important;
  color: var(--ink, #F2F1EC) !important;
  font-family: var(--font-ui) !important;
  text-align: left !important;
  cursor: pointer !important;
}
html body #closingView .cpf-access-head:hover { background: rgba(255, 255, 255, 0.035) !important; }
html body #closingView .cpf-access-head > h4 { flex: 1 1 auto !important; min-width: 0 !important; }
html body #closingView .cpf-access-chevron {
  flex: none !important;
  font-size: 11px !important;
  line-height: 1 !important;
  color: var(--muted, #878EA0) !important;
}
html body #closingView .cpf-access-body {
  display: grid !important;
  gap: 12px !important;
  padding: 2px 14px 14px !important;
  border-top: 1px solid var(--line) !important;
  margin-top: 2px !important;
  padding-top: 12px !important;
}

/* --- S67e · sbalený blok nesmí nést vnější odsazení.
   Pravidlo ze S67 (`.closing-person-form > .cpf-access`) má vyšší specificitu
   a drželo padding 14/16 → sbalená hlavička měřila 72 px místo 42. --- */
html body #closingView .closing-person-form > .cpf-access { padding: 0 !important; gap: 0 !important; }

/* ============================================================
   S74 — PŘÍSTUP: BEZ DĚLICÍ LINKY A BEZ SKÁKÁNÍ
   (a) `border-top` pod hlavičkou pryč — linky se v aplikaci nepoužívají,
       oddělení nese odsazení.
   (b) Panel „Sazba a role" měl vlastní posuvník, takže rozbalený blok
       skočil nahoru a překryl obsah. Panel se místo toho natáhne dolů
       a k detailu se dá plynule sjet (scrollIntoView v JS).
   ============================================================ */
html body #closingView .cpf-access-body {
  border-top: 0 !important;
  padding-top: 4px !important;
  margin-top: 0 !important;
}
/* prostřední panel se roztáhne podle obsahu místo vnitřního posuvníku */
html body #closingView .closing-person-form {
  overflow-y: visible !important;
  max-height: none !important;
}

/* --- S74b · panel Sazba a role roste podle obsahu.
   Sloupec měl `grid-template-rows: auto minmax(0,1fr)` a formulář uvnitř
   `overflow-y: auto` — rozbalený blok Přístup se proto nacpal do pevné výšky
   a obsah nad ním se odscrolloval pryč. Řádek na `auto` = panel se natáhne. --- */
html body #closingView .closing-overview-grid > .closing-column-panel:nth-child(2) {
  grid-template-rows: auto auto !important;
  align-content: start !important;
}
html body #closingView#closingView .closing-person-form {
  overflow-y: visible !important;
  max-height: none !important;
}

/* --- S74c · blok Přístup má vlastní místo v mřížce (konec překryvu).
   Měl jen `grid-column: 1/-1` bez řádku, takže ho automatické umisťování
   položilo DO oblasti „history" — při delší historii sazeb ji překryl.
   Po odstranění tlačítka PDF (S74) je oblast „pdf" volná, patří sem. --- */
html body #closingView .closing-person-form > .cpf-access {
  grid-area: pdf !important;
  align-self: start !important;
}
/* šipka u stavu pryč — rozklikávací prvky ji v aplikaci nikde nemají */
html body #closingView .cpf-access-chevron { display: none !important; }

/* --- S74d · panel Sazba a role zpět na vlastní posuvník.
   V S74b jsem ho nechal růst, aby rozbalený Přístup nepřekrýval obsah — jenže
   skutečnou příčinou překryvu bylo chybějící místo v mřížce (opraveno v S74c).
   Růst panelu vytlačoval celou stránku, takže se vrací pevná výška + rolování
   uvnitř; k rozbalenému bloku se plynule sjede (scrollIntoView v JS). --- */
html body #closingView .closing-overview-grid > .closing-column-panel:nth-child(2) {
  grid-template-rows: auto minmax(0, 1fr) !important;
  align-content: stretch !important;
}
html body #closingView#closingView .closing-person-form {
  overflow-y: auto !important;
  min-height: 0 !important;
}

/* ============================================================
   S75 — DĚLICÍ LINKY V SEZNAMECH PRYČ (audit celé aplikace)
   Proskenováno všech 9 stránek: linku pod hlavičkou / nad prvním
   řádkem měly ještě tři seznamy. Oddělení nese odsazení, ne čára.
   ============================================================ */
html body #closingView .workreport-row { border-top: 0 !important; }
html body #financeView .money-header { border-bottom: 0 !important; }
html body #invoicingView .invoice-list-head { border-bottom: 0 !important; }

/* ============================================================
   S76 — HISTORIE SAZEB JAKO ROZKLIKÁVACÍ BLOK
   Stejný vzor jako Přístup do aplikace. V detailu člověka je otevřený
   vždy jen JEDEN blok (řeší JS), takže panel s pevnou výškou nemusí
   růst a nevzniká překryv ani vytlačení stránky.
   ============================================================ */
html body #closingView .closing-person-form > .cpf-rates {
  grid-area: history !important;
  align-self: start !important;
  padding: 0 !important;
  gap: 0 !important;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  background: var(--panel-2, #1D2129) !important;
  overflow: hidden !important;
}
/* společná hlavička obou rozklikávacích bloků */
html body #closingView#closingView .cpf-collapsible-head {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 14px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: transparent !important;
  color: var(--ink, #F2F1EC) !important;
  font-family: var(--font-ui) !important;
  text-align: left !important;
  cursor: pointer !important;
}
html body #closingView .cpf-collapsible-head:hover { background: rgba(255, 255, 255, 0.035) !important; }
html body #closingView .cpf-collapsible-head > h4 {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  font-family: var(--font-ui) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--ink, #F2F1EC) !important;
}
html body #closingView .cpf-collapsible-note {
  flex: none !important;
  font-family: var(--font-ui) !important;
  font-size: 11.5px !important;
  color: var(--muted, #878EA0) !important;
  white-space: nowrap !important;
}
html body #closingView .cpf-collapsible-body {
  display: grid !important;
  gap: 6px !important;
  padding: 0 14px 14px !important;
}
html body #closingView .cpf-rates-list > span {
  font-family: var(--font-ui) !important;
  font-size: 12.5px !important;
  color: var(--ink-soft, rgba(242, 241, 236, 0.86)) !important;
}

/* ============================================================
   S77 — SJEDNOCENÍ PLOCH: KONTRAST MÍSTO RÁMEČKŮ
   Pravidlo (odvozeno z většiny aplikace, dotažen zbytek):
     1. Plochy se odlišují KONTRASTEM, ne linkou.
        panel #171A22 (radius 20) > karta #1D2129 (radius 14) — bez rámečku.
     2. RÁMEČEK = ovládací prvek. Pole, tlačítka, rozklikávací nabídky
        a plovoucí vrstvy (dialog, hláška, kalendář) rámeček MAJÍ,
        protože nesou informaci „dá se s tím pracovat / pluje to nad obsahem".
     3. Zaoblení podle vrstvy: panel 20 · karta 14 · ovládací prvek 12.
   Ponechané výjimky, protože nesou význam:
     · ČÁRKOVANÝ rámeček = prázdný stav („zatím tu nic není")
     · barevný pruh vlevo 4 px = stav (po termínu / hotovo)
   ============================================================ */

/* --- karty a plochy: rámeček pryč, zaoblení na 14 --- */
html body #dashboardView .task-row,
html body #meetingsView .person-chip-list,
html body #coordinationView .coordination-context-card,
html body #coordinationView .coordination-progress-card,
html body #coordinationView .coordination-access-inline,
html body #coordinationView .coordination-timeline-item,
html body #financeView .finance-filter-bar,
html body #financeView .money-list,
html body #financeView .owner-balance-summary,
html body #financeView .owner-balance-card,
html body #closingView .closing-person-form > .cpf-rates,
html body #closingView .closing-person-form > .cpf-access {
  border: 0 !important;
  border-radius: 14px !important;
}

/* boční stavový pruh zůstává — je to informace, ne dekorace */
html body #coordinationView .coordination-item.is-late,
html body #coordinationView .coordination-item.is-done,
html body #projectsView .project-card.is-late,
html body #projectsView .project-card.is-done,
html body #archiveView .project-card.archive-card,
html body #coordinationView .coordination-archive-item,
html body #invoicingView .invoice-row {
  border-left-style: solid !important;
}

/* --- S77b · dorovnání dvou míst se silnějším pravidlem + zaoblení nabídek.
   `.task-row` a `.person-chip-list` měly rámeček z pravidel s vyšší
   specificitou; plovoucí nabídky filtrů měly zaoblení 16 místo 12
   (podle pravidla jsou to ovládací prvky). --- */
html body #dashboardView#dashboardView#dashboardView .task-row,
html body #meetingsView#meetingsView#meetingsView .person-chip-list {
  border: 0 !important;
  border-radius: 14px !important;
}
html body #financeView#financeView .finance-type-options,
html body #invoicingView#invoicingView .db-filter-options {
  border-radius: 12px !important;
}

/* --- S78 · Finance: hlavička seznamu přes celou šířku, posuvník až pod ní ---
   Bylo: .money-header sticky UVNITŘ rolovacího .money-list → posuvník ukusoval
   10 px z pravé strany hlavičky a začínal už v její výšce.
   Teď: .money-list neroluje (jen mřížka hlavička + tělo), roluje vnořený
   .money-scroll → lišta jde od kraje ke kraji a posuvník začíná až pod ní.
   Zarovnání sloupců: .money-scroll má trvale rezervovaný žlab (scrollbar-gutter),
   takže řádky mají vždy stejnou šířku; hlavička si o tentýž žlab odsadí pravý
   okraj přes --sb-w (měřeno v JS). */
html body #financeView#financeView .money-list {
  overflow: hidden !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  row-gap: 0 !important;
  align-content: stretch !important;
}
html body #financeView#financeView .money-header {
  position: static !important;
  top: auto !important;
  margin: -10px -10px 0 !important;
  padding: 14px calc(26px + var(--sb-w, 10px)) 10px 26px !important;
  z-index: auto !important;
}
html body #financeView#financeView .money-scroll {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-content: start !important;
  gap: 8px !important;
  overflow-y: auto !important;
  scrollbar-gutter: stable !important;
  margin: 0 -10px -10px !important;
  padding: 0 10px 10px !important;
  min-height: 0 !important;
}
html body #financeView#financeView .money-scroll { scrollbar-width: thin; scrollbar-color: rgba(247,244,236,.24) transparent; }
/* KONEC S78 */

/* --- S79 · Finance: obsah řádku svisle na střed ------------------------------
   Řádek má pevnou výšku 52 px a odsazení 14/14 → vnitřní plocha jen 24 px,
   jenže nejvyšší prvek (štítek druhu) měří 30 px. Mřížkový pás se proto
   nevešel a přetekl SMĚREM DOLŮ od horní hrany plochy → nahoře 14 px, dole 8.
   `align-content: center` pás vycentruje bez ohledu na to, o kolik přetéká. */
html body #financeView#financeView .money-item {
  align-content: center !important;
}
/* KONEC S79 */

/* --- S80 · SJEDNOCENÍ PODKLADŮ (úrovně ploch) + doladění centrování ---------
   Pravidlo (design kontrakt, doplňuje S77):
     úroveň 0 — panel na stránce ......... var(--panel)   #171A22, r20
     úroveň 1 — karta / řádek v panelu ... var(--panel-2) #1D2129, r14
     úroveň 2 — odznak uvnitř karty ...... bílá 6 % (neutrální)
                                           nebo stavová barva 15 %, r9
   Seskupovací obal (jen drží mřížku) nemá podklad vůbec.
   Výjimka: dny v měsíčním kalendáři zůstávají světlejší (bílá 3 %) — je to
   mřížka, ne karty; 46 plných karet by stránku Práce opticky zavalilo. */

/* 1–5 · plochy úrovně 1, které se rozjely na vlastní odstíny */
html body #financeView#financeView .finance-filter-bar,
html body #financeView#financeView .owner-balance-summary,
html body #financeView#financeView .owner-balance-card,
html body #coordinationView#coordinationView .coordination-progress-card,
html body #coordinationView#coordinationView .coordination-timeline-item,
html body #coordinationView#coordinationView .coordination-timeline-item.is-late,
html body #coordinationView#coordinationView .coordination-timeline-item.is-todo,
html body #coordinationView#coordinationView .coordination-timeline-item.is-soon {
  background: var(--panel-2, #1D2129) !important;
}

/* 6 · seskupovací obal seznamu peněz — podklad nemá co dělat (kreslí ho panel) */
html body #financeView#financeView .money-list { background: transparent !important; }

/* 7 · odznaky úrovně 2 na jednu neutrální hodnotu (bylo 3,5 / 4 / 4,3 %) */
html body #financeView#financeView .money-locked,
html body #coordinationView#coordinationView .coordination-type,
html body :is(#projectsView, #archiveView) .project-bar-static {
  background: rgba(255, 255, 255, .06) !important;
}
html body #coordinationView#coordinationView .coordination-group-head > strong {
  background: rgba(255, 255, 255, .06) !important;
  border-radius: 9px !important;
}

/* 9 · hlavička sloupců ve Financích na stejný rytmus jako Fakturace a Uzávěrka
   (bylo 14/10 → mezera od filtru 30 px a k prvnímu řádku 10; ostatní 2/8 → 18 a 8).
   min-height 36 by po zmenšení odsazení převzal řízení a text zase rozhodil. */
html body #financeView#financeView .money-header {
  padding: 2px calc(26px + var(--sb-w, 10px)) 8px 26px !important;
  min-height: 0 !important;
}

/* 10 · položka faktury: vstupy měly margin-top 6 px (zbytek po řádku s popiskem),
   ostatní děti nic → obsah 3 px nad středem. Rozdělením na 3/3 zůstane výška 48. */
html body #invoicingView#invoicingView .invoice-item-row > input {
  margin-top: 3px !important;
  margin-bottom: 3px !important;
}

/* 11 · osy na kartě projektu: pás 25 px v ploše 28,5 px zarovnaný na start */
html body :is(#projectsView, #archiveView) .project-axes { align-content: center !important; }
/* KONEC S80 */

/* S80b — dorovnání specificity: statický pruh v Archivu měl vlastní pravidlo
   s vyšší vahou (`#archiveView .project-titles > …`), takže ho S80 nepřebilo.
   Zároveň hlavička sloupců ve Financích už nemusí být neprůhledná — po S78
   nepřejíždí přes řádky, takže podklad kreslí panel pod ní. */
html body #archiveView#archiveView#archiveView .project-titles > .project-bar-static,
html body #coordinationView#coordinationView#coordinationView .coordination-archive-item .project-bar-static {
  background: rgba(255, 255, 255, .06) !important;
}
html body #financeView#financeView#financeView .money-header { background: transparent !important; }
html body #invoicingView#invoicingView .invoice-number-badge { background: rgba(94, 168, 255, .15) !important; }
/* KONEC S80b */

/* S80c — poslední odstíny odznaků na jednu stupnici.
   Stavové odznaky mají mít shodnou průhlednost 15 %: zelená, červená i modrá
   ji už měly, zlatá jela na 16 % a vypnutý přístup na šedé 16 %.
   Číslo projektu na kartě koordinace patří mezi neutrální odznaky (bílá 6 %). */
html body #coordinationView#coordinationView .coordination-card-number {
  background: rgba(255, 255, 255, .06) !important;
}
html body .status-pill--soon,
html body #financeView#financeView .money-item .money-type.status-pill--soon {
  background: rgba(240, 190, 98, .15) !important;
}
html body .access-pill.is-off { background: rgba(150, 160, 190, .15) !important; }
/* KONEC S80c */

/* S80d — dva rámečky, které S77 přehlédl (obojí je karta, ne ovládací prvek):
   · .coordination-metric měla plný rámeček 1 px kolem dokola;
   · položka koordinace ve stavu „po termínu"/„hotovo" k barevnému pruhu vlevo
     přidávala ještě barevný obrys kolem dokola — jinde (projekty, faktury,
     úkoly) stav nese POUZE pruh 4 px vlevo. Pruh zůstává, obrys mizí. */
html body #coordinationView#coordinationView#coordinationView .coordination-metric {
  border: 0 !important;
}
html body #coordinationView#coordinationView#coordinationView .coordination-item.is-late,
html body #coordinationView#coordinationView#coordinationView .coordination-item.is-done {
  border-top-width: 0 !important;
  border-right-width: 0 !important;
  border-bottom-width: 0 !important;
  border-left-width: 4px !important;
  border-left-style: solid !important;
}
/* KONEC S80d */

/* S81 — varovný tón hlášky (zlatá). Chyběl: připomínka zálohy po uzavření
   měsíce není chyba (červená) ani potvrzení (zelená), ale výzva k akci. */
html body .app-notice.is-warn { border-left-color: var(--gold, #F0BE62) !important; }
/* KONEC S81 */

/* ============================================================
   S82 — KONEC SPOLUPRÁCE / SMAZÁNÍ ČLOVĚKA
   Nový blok v detailu člověka MUSÍ dostat vlastní řádek v mřížce —
   `grid-template-areas` má pevně dané oblasti a dítě bez přiřazení
   by se automaticky položilo na už obsazené místo (stalo se to u
   bloku Přístup, viz S74c). Proto přibývá šestý řádek.
   ============================================================ */
html body #closingView#closingView .closing-person-form {
  grid-template-areas:
    "facts facts"
    "role cost"
    "from save"
    "history history"
    "pdf pdf"
    "lifecycle lifecycle" !important;
}
html body #closingView#closingView .closing-person-form > .cpf-lifecycle {
  grid-area: lifecycle !important;
  align-self: start !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
html body #closingView#closingView .cpf-lifecycle-note {
  flex: 1 1 100% !important;
  font-size: 11px !important;
  color: var(--muted, #878EA0) !important;
}
html body #closingView#closingView .cpf-lifecycle .inline-action { flex: 0 0 auto !important; }
/* KONEC S82 */

/* ============================================================
   S83 — KONEC SPOLUPRÁCE JAKO ROZKLIKÁVACÍ BLOK
   Byl to volný řádek s tlačítkem (S82). Teď má stejný kabát jako
   Historie sazeb a Přístup do aplikace: plocha karty přes celou
   šířku, hlavička „Ukončit spolupráci" + počet zápisů vpravo,
   detaily až po rozkliknutí. Hlavička si styl bere z .cpf-collapsible-head,
   dorovnat stačí obal a tělo.
   ============================================================ */
html body #closingView#closingView .closing-person-form > .cpf-lifecycle {
  grid-area: lifecycle !important;
  align-self: start !important;
  display: block !important;
  padding: 0 !important;
  gap: 0 !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: var(--panel-2, #1D2129) !important;
  overflow: hidden !important;
}
html body #closingView#closingView .cpf-lifecycle-body > span {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 12px !important;
  font-family: var(--font-ui) !important;
  font-size: 12.5px !important;
  color: var(--ink-soft, rgba(242, 241, 236, 0.86)) !important;
}
html body #closingView#closingView .cpf-lifecycle-body > span > b {
  font-weight: 500 !important;
  color: var(--muted, #878EA0) !important;
}
html body #closingView#closingView .cpf-lifecycle-hint {
  margin: 2px 0 0 !important;
  font-size: 11px !important;
  line-height: 1.45 !important;
  color: var(--muted, #878EA0) !important;
}
html body #closingView#closingView .cpf-lifecycle-acts {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: minmax(0, 1fr) !important;
  gap: 8px !important;
  margin-top: 6px !important;
}
html body #closingView#closingView .cpf-lifecycle-acts > .inline-action { width: 100% !important; }
/* KONEC S83 */

/* ============================================================
   S84 — .hidden musí SKUTEČNĚ skrývat
   `.hidden { display: none !important }` prohrává se selektory, které
   nesou ID (`#dashboardView .daily-panel { display: flex !important }`) —
   ID přebije jakýkoli počet tříd, takže „skrytý" prvek zůstal vykreslený
   a v mřížce dál zabíral buňku. Sken celé aplikace v obou rolích našel
   dva případy, oba níž. Obecné pravidlo tenhle problém vyřešit NEJDE,
   ID se třídami přebít nedá — nové skrývané prvky uvnitř #view pravidel
   je proto potřeba dopsat sem.
   ============================================================ */

/* 1) Přehled u zaměstnance: panel Koordinace se skrývá, ale držel si
      display:flex, takže vedle dvou panelů zůstala prázdná třetí buňka. */
html body #dashboardView .daily-panel.hidden { display: none !important; }

/* 2) Fakturace: pole DUZP patří jen plátci DPH. U neplátce se sice
      nastavila třída hidden, ale pole zůstalo na faktuře vidět. */
html body #invoicingView .calendar-field.hidden,
html body #invoicingView #invoiceDuzpField.hidden { display: none !important; }
/* KONEC S84 */