:root {
  --bg: #f5f6f3;
  --surface: #ffffff;
  --surface-2: #f7f8f5;
  --line: #e1e4dc;
  --line-strong: #c9cec2;
  --text: #26323f;
  --muted: #66707c;
  --muted-2: #8a928d;
  --nav: #171f8f;
  --nav-soft: #eef1ff;
  --accent: #171f8f;
  --accent-2: #0072ce;
  --brand-green: #263521;
  --green: #23845b;
  --amber: #d4a322;
  --red: #c8404c;
  --blue: #0072ce;
  --shadow: 0 1px 2px rgba(38, 50, 63, 0.06), 0 10px 24px rgba(38, 50, 63, 0.05);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}


* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  border-top: 0;
}

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

button {
  cursor: pointer;
}

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

.sidebar {
  position: sticky;
  top: 7px;
  align-self: start;
  height: calc(100vh - 7px);
  overflow: auto;
  background: #ffffff;
  color: var(--text);
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-right: 1px solid var(--line);
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 8px 22px;
  border-bottom: 1px solid var(--line);
}

.brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 4px;
  display: grid;
  place-items: center;
  background: var(--nav);
  color: #ffffff;
  font-weight: 800;
}

.brand-logo {
  width: 118px;
  min-width: 118px;
  height: auto;
  display: block;
  object-fit: contain;
}

.brand-title {
  font-weight: 600;
  line-height: 1.05;
  color: var(--text);
  font-size: 20px;
}

.nav-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nav-button {
  width: 100%;
  border: 1px solid transparent;
  background: transparent;
  color: #394756;
  padding: 10px 11px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  font-weight: 600;
}

.nav-button:hover {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--nav);
}

.nav-button.active {
  background: var(--nav-soft);
  color: var(--nav);
  border-color: rgba(23, 31, 143, 0.16);
  box-shadow: inset 4px 0 0 var(--nav);
}

.sidebar-footer {
  margin-top: auto;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  padding: 12px 10px;
  border-top: 1px solid var(--line);
}

.main {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.topbar {
  min-height: 76px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 28px;
  position: sticky;
  top: 0;
  z-index: 5;
}

.topbar h1 {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.1;
  margin: 0;
  color: var(--text);
}

.topbar-heading {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.topbar-heading.with-week {
  flex-direction: row;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.topbar-meta {
  color: var(--muted);
  font-size: 13px;
  margin-top: 4px;
}

.topbar-week-control {
  display: flex;
  align-items: center;
}

.topbar-export-controls {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  padding-left: 2px;
  margin-bottom: 14px;
}

.topbar-export-controls label {
  gap: 3px;
  font-size: 11px;
}

.topbar-export-controls input {
  width: 134px;
  min-height: 34px;
  height: 34px;
  padding: 7px 9px;
}

.topbar-export-controls .button,
.topbar-export-controls .badge {
  min-height: 34px;
  height: 34px;
}

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

.topbar-timer-chip {
  min-height: 36px;
  max-width: 460px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  border: 1px solid var(--tv-charge-border);
  border-radius: 999px;
  background: var(--tv-charge-row);
  color: var(--tv-charge-text);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.topbar-timer-chip.paused {
  border-color: var(--tv-off-border);
  background: var(--tv-off-row);
  color: var(--tv-off-text);
}

.topbar-timer-chip strong {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.topbar-timer-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(35, 132, 91, 0.14);
}

.topbar-timer-chip.paused .topbar-timer-dot {
  background: var(--amber);
  box-shadow: 0 0 0 3px rgba(217, 168, 42, 0.18);
}

.topbar-timer-project {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.signed-in-user {
  min-width: 0;
  display: flex;
  align-items: center;
  min-height: 36px;
}

.login-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--app-bg);
}

.login-panel {
  width: min(420px, 100%);
  padding: 24px;
}

.login-brand {
  margin-bottom: 22px;
}

.login-form {
  display: grid;
  gap: 14px;
}

.login-form h1 {
  margin: 0;
  font-size: 22px;
}

.setup-shell {
  place-items: start center;
  overflow-y: auto;
}

.setup-panel {
  width: min(520px, 100%);
  margin-block: auto;
}

.login-form input[type="file"] {
  width: 100%;
  min-width: 0;
  padding: 5px;
  color: var(--muted);
  background: #fff;
}

.login-form input[type="file"]::file-selector-button {
  min-height: 30px;
  margin-right: 10px;
  padding: 5px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.content {
  padding: 22px 28px 36px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.toolbar,
.section-toolbar {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.toolbar label,
.section-toolbar label,
.topbar-actions label {
  min-height: 56px;
  justify-content: flex-end;
}

.toolbar > .button,
.toolbar > .badge,
.section-toolbar > .button,
.section-toolbar > .badge {
  margin-bottom: 0;
}

.toolbar > .button,
.toolbar > .badge,
.toolbar input,
.toolbar select {
  min-height: 38px;
  height: 38px;
}

.toolbar > .button.icon {
  width: 38px;
}

.toolbar > .badge {
  padding-top: 0;
  padding-bottom: 0;
}

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

.section-title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text);
}

.section-caption {
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
}

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: var(--shadow);
  padding: 18px;
}

.panel.tight {
  padding: 0;
  overflow: hidden;
}

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

.metric {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent-2);
  border-radius: 4px;
  padding: 16px;
  min-height: 104px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.metric-label {
  color: var(--muted);
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 7px;
}

.metric-value {
  font-size: 26px;
  font-weight: 600;
  margin-top: 12px;
  color: var(--text);
}

.metric-note {
  color: var(--muted-2);
  font-size: 12px;
  margin-top: 5px;
}

.grid-2 {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(320px, 0.7fr);
  gap: 18px;
}

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

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

.form-grid .wide {
  grid-column: span 2;
}

.import-actions {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) repeat(4, auto);
  gap: 10px;
  align-items: end;
}

.import-file-control {
  min-height: auto;
  gap: 0;
}

.import-file-control input {
  height: 38px;
}

.import-status {
  margin-top: 10px;
}

.import-file-summary {
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 10px 12px;
  font-size: 13px;
}

.import-file-summary.ok {
  background: rgba(35, 132, 91, 0.07);
  border-color: rgba(35, 132, 91, 0.22);
}

.import-file-summary.error {
  background: rgba(219, 75, 89, 0.06);
  border-color: rgba(219, 75, 89, 0.28);
}

.import-file-summary strong {
  display: block;
  margin-bottom: 4px;
}

.import-error-panel {
  margin-top: 10px;
  border: 1px solid rgba(219, 75, 89, 0.28);
  border-radius: 7px;
  background: rgba(219, 75, 89, 0.05);
  padding: 10px;
}

.import-error-header,
.import-error-row {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px;
}

.import-error-list {
  margin-top: 8px;
  display: grid;
  gap: 6px;
}

.import-error-row {
  grid-template-columns: 92px 86px 78px minmax(180px, 1fr);
  min-height: 30px;
  padding: 5px 7px;
  border-radius: 6px;
  background: #fff;
  font-size: 12px;
}

.import-error-row-number,
.import-error-message {
  font-weight: 700;
}

.import-error-message {
  color: var(--red);
}

.time-week-header {
  align-items: flex-end;
}

.time-balance-panel {
  padding: 16px;
}

.time-balance-header {
  align-items: center;
}

.time-balance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.time-balance-item {
  min-height: 76px;
  border: 1px solid var(--line);
  border-left: 4px solid #cfd8d3;
  border-radius: 5px;
  padding: 11px 12px;
  background: var(--surface-2);
}

.time-balance-item.balance-positive {
  border-left-color: #23845b;
}

.time-balance-item.balance-negative {
  border-left-color: #c8404c;
}

.time-balance-item.balance-neutral {
  border-left-color: #899590;
}

.time-balance-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.time-balance-value {
  margin-top: 8px;
  color: var(--text);
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
}

.balance-positive .time-balance-value {
  color: #12613f;
}

.balance-negative .time-balance-value {
  color: #9d2d38;
}

.time-balance-note {
  margin-top: 7px;
  color: var(--muted-2);
  font-size: 12px;
}

.inline-week-controls {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.week-range-picker {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
}

.week-range-picker input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}

.week-nav-button {
  width: 22px;
  min-width: 22px;
  min-height: 28px;
  height: 28px;
  padding: 0;
  border-color: transparent;
  background: transparent;
  color: var(--muted);
}

.week-nav-button svg.lucide {
  width: 15px;
  height: 15px;
}

.week-nav-button:hover {
  background: #eef1ee;
  border-color: transparent;
  color: var(--text);
}

label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  background: #fff;
  color: var(--text);
  padding: 9px 10px;
  min-height: 38px;
}

textarea {
  min-height: 72px;
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  outline: 2px solid rgba(0, 114, 206, 0.18);
  border-color: var(--accent-2);
}

.button {
  border: 1px solid var(--line-strong);
  background: #fff;
  color: var(--text);
  border-radius: 8px;
  min-height: 38px;
  padding: 8px 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
}

.button:hover {
  border-color: #9ba69d;
  background: var(--surface-2);
}

.button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 700;
}

.button.primary:hover {
  background: #101774;
  border-color: #101774;
}

.button.danger {
  color: var(--red);
  border-color: rgba(219, 75, 89, 0.35);
}

.button.danger-solid {
  background: var(--red);
  border-color: var(--red);
  color: #ffffff;
  font-weight: 700;
}

.button.danger-solid:hover {
  background: #ac303b;
  border-color: #ac303b;
}

.button.ghost {
  background: transparent;
}

.button.icon {
  width: 36px;
  min-height: 36px;
  padding: 0;
  border-radius: 7px;
}

.button.compact {
  min-height: 28px;
  padding: 5px 9px;
  border-radius: 7px;
  gap: 5px;
  font-size: 12px;
}

.week-status-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.button.status-state {
  cursor: default;
  pointer-events: none;
  font-weight: 700;
  border-radius: 999px;
}

.button.status-state.draft {
  background: #ecefeb;
  border-color: #d9dfd6;
  color: #515b57;
}

.button.status-state.submitted {
  background: rgba(23, 31, 143, 0.1);
  border-color: rgba(23, 31, 143, 0.24);
  color: var(--nav);
}

.button.status-state.approved {
  background: rgba(35, 132, 91, 0.13);
  border-color: rgba(35, 132, 91, 0.28);
  color: #12613f;
}

.button.status-state.locked {
  background: rgba(0, 114, 206, 0.11);
  border-color: rgba(0, 114, 206, 0.26);
  color: #005a9f;
}

.button[disabled],
input[disabled],
select[disabled],
textarea[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

.table-wrap {
  width: 100%;
  overflow: auto;
  max-height: max(320px, calc(100vh - 240px));
  scrollbar-gutter: stable;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}

th,
td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}

th {
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  position: sticky;
  top: 0;
  z-index: 3;
  box-shadow: inset 0 -1px 0 var(--line);
}

tbody tr:hover {
  background: #f8f9f6;
}

.numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.user-edit-input,
.user-edit-select,
.project-edit-input,
.project-edit-select {
  min-width: 150px;
  min-height: 34px;
  height: 34px;
  padding: 6px 8px;
  border-radius: 6px;
}

.user-edit-input.tiny-input {
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
}

.user-edit-input.numeric-input,
.project-edit-input.numeric-input {
  max-width: 86px;
  text-align: right;
}

.project-table-scroll-shell {
  width: 100%;
  min-width: 0;
}

.project-table-scroll-top {
  width: 100%;
  height: 18px;
  overflow-x: auto;
  overflow-y: hidden;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}

.project-table-scroll-spacer {
  height: 1px;
}

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

.project-table-wrap table,
.project-directory-table {
  width: max-content;
  min-width: 1320px;
}

.project-status-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: flex-end;
  gap: 14px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--line);
}

.project-status-filter-group {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(190px, 1.2fr) minmax(140px, 0.8fr) minmax(190px, 1fr) minmax(190px, 1fr);
  gap: 10px;
  align-items: flex-end;
}

.project-status-export-group {
  min-width: 390px;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  gap: 8px;
  align-items: flex-end;
  padding: 8px 0 8px 14px;
  border-left: 1px solid var(--line);
}

.project-status-toolbar label {
  display: grid;
  gap: 5px;
  min-width: 150px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.project-status-toolbar select {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 6px 28px 6px 9px;
  background: #ffffff;
  color: var(--text);
  font-size: 13px;
}

.project-status-count {
  align-self: center;
}

.result-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--line);
}

.result-toolbar label {
  display: grid;
  gap: 5px;
  min-width: 170px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.result-toolbar select {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 6px 28px 6px 9px;
  background: #ffffff;
  color: var(--text);
  font-size: 13px;
}

.result-count {
  align-self: center;
}

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

.admin-time-export-controls label {
  display: grid;
  gap: 5px;
  min-width: 150px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.admin-time-export-controls input {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 7px 9px;
  background: #ffffff;
  color: var(--text);
  font-size: 13px;
}

.admin-time-export-controls .admin-time-restore-button {
  display: inline-flex;
  min-width: auto;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}

.plan-hello h2 {
  margin: 0 0 16px;
  font-size: 22px;
  font-weight: 700;
}

.plan-work-panel {
  margin-bottom: 18px;
}

.plan-main-panel {
  margin-bottom: 18px;
  padding: 10px 12px;
}

.plan-main-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.plan-main-tab {
  min-height: 38px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  font-weight: 700;
}

.plan-main-tab:hover {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--text);
}

.plan-main-tab.active {
  background: var(--nav-soft);
  border-color: rgba(23, 31, 143, 0.16);
  color: var(--nav);
}

.plan-main-tab svg {
  width: 16px;
  height: 16px;
}

.plan-panel-header {
  padding: 16px 16px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.plan-tabs {
  display: flex;
  gap: 18px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
}

.plan-tab {
  border: 0;
  background: transparent;
  padding: 10px 0 12px;
  color: var(--muted);
  font-weight: 700;
}

.plan-tab.active {
  color: var(--text);
  box-shadow: inset 0 -2px 0 var(--text);
}

.plan-task-sections {
  padding: 10px 16px 18px;
}

.plan-task-list-header {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 58px auto;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 0 0 5px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.plan-task-list-header > div:nth-child(3) {
  text-align: center;
}

.plan-task-list-header-side {
  display: grid;
  grid-template-columns: 32px 92px 68px 58px 34px;
  align-items: center;
  justify-items: end;
  gap: 8px;
}

.plan-task-list-header-side.no-timer {
  grid-template-columns: 32px 92px 68px 34px;
}

.plan-task-list-header-side span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plan-my-task-form {
  margin: 10px 16px 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-2);
  background: #ffffff;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(130px, 170px) minmax(140px, 190px) 126px 82px 78px auto;
  align-items: center;
  gap: 8px;
}

.plan-my-task-title {
  min-width: 0;
}

.plan-my-task-form input,
.plan-my-task-form select {
  width: 100%;
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius-1);
  background: #ffffff;
  padding: 5px 8px;
  font-size: 13px;
}

.plan-my-task-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.plan-task-section + .plan-task-section {
  margin-top: 8px;
}

.plan-section-title {
  width: 100%;
  min-height: 34px;
  border: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 2px;
  color: var(--text);
  font-weight: 700;
}

.plan-section-title svg {
  color: var(--muted);
}

.plan-section-hours {
  min-width: 46px;
  height: 22px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.plan-task-list {
  display: grid;
  border-top: 1px solid var(--line);
}

.plan-task-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 58px auto;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
}

.plan-task-status-dot {
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--muted-2);
  border-radius: 999px;
  display: inline-block;
  flex: 0 0 auto;
}

.plan-task-status-dot.overdue {
  border-color: var(--red);
  box-shadow: 0 0 0 2px rgba(200, 64, 76, 0.08);
}

.plan-task-status-dot.todo {
  border-color: var(--muted-2);
  background: #ffffff;
}

.plan-task-status-dot.in_progress {
  border-color: var(--tv-other-border);
  background: var(--tv-other-chip);
}

.plan-task-status-dot.wait {
  border-color: var(--tv-off-border);
  background: var(--tv-off-chip);
}

.plan-task-status-dot.complete,
.plan-task-status-dot.done {
  border-color: var(--tv-charge-border);
  background: var(--tv-charge-text);
}

.plan-status-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.plan-status-button {
  width: 18px;
  height: 18px;
  border: 0;
  padding: 0;
  display: inline-grid;
  place-items: center;
  background: transparent;
  cursor: pointer;
}

.plan-status-menu {
  position: absolute;
  z-index: 20;
  top: 22px;
  left: -8px;
  width: 190px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(18, 24, 38, 0.16);
  padding: 8px;
}

.plan-status-menu-title {
  padding: 5px 8px 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.plan-status-option {
  width: 100%;
  min-height: 34px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  color: var(--text);
  text-align: left;
}

.plan-status-option:hover,
.plan-status-option.active {
  background: var(--surface-2);
}

.plan-status-option svg {
  width: 14px;
  height: 14px;
  color: var(--accent);
}

.plan-task-main {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.plan-task-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 400;
  line-height: 1.35;
}

.plan-task-context {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.plan-task-context span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.plan-task-context-separator {
  flex: 0 0 auto;
  color: var(--muted-2);
}

.task-title-button {
  display: block;
  max-width: 100%;
  width: auto;
  min-height: 0;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.task-title-button:hover {
  color: var(--accent);
  text-decoration: underline;
}

.plan-task-assignee-cell {
  width: 58px;
  min-width: 0;
  display: grid;
  place-items: center;
}

.plan-task-assignee-cell-inner {
  display: inline-grid;
  place-items: center;
}

.plan-task-side {
  display: grid;
  grid-template-columns: 32px 92px 68px 58px 34px;
  align-items: center;
  justify-items: end;
  gap: 8px;
}

.plan-task-side.no-timer {
  grid-template-columns: 32px 92px 68px 34px;
}

.plan-task-priority-cell {
  width: 32px;
  display: grid;
  place-items: center;
}

.plan-task-date {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  min-width: 92px;
  text-align: right;
}

.plan-task-date.late {
  color: var(--red);
}

.plan-task-side-meta {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.plan-task-side-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.plan-task-side-meta svg {
  width: 14px;
  height: 14px;
}

.plan-task-estimate {
  min-width: 68px;
  display: inline-grid;
  grid-template-columns: 14px minmax(0, 1fr);
  align-items: center;
  justify-content: end;
  justify-items: start;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.plan-task-estimate svg {
  width: 14px;
  height: 14px;
}

.plan-task-estimate-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plan-task-estimate-empty {
  grid-column: 1 / -1;
  justify-self: end;
}

/* Row actions: Hide (delegated, done) and the delete bin (Katarzyna, 2026-09-29). */
.plan-task-inline-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  min-width: 0;
}

.plan-task-delete-button.button.icon {
  width: 26px;
  min-width: 26px;
  height: 26px;
  min-height: 26px;
  padding: 0;
  color: var(--muted);
  opacity: 0.55;
}

.plan-task-row:hover .plan-task-delete-button.button.icon,
.plan-task-delete-button.button.icon:focus-visible {
  opacity: 1;
}

.plan-task-delete-button.button.icon:hover {
  color: #b42318;
  background: #fef3f2;
}

.plan-task-delete-button svg {
  width: 15px;
  height: 15px;
}

/* Duplicate next to the bin (Katarzyna, 2026-10-07): the same quiet icon, without the red. */
.plan-task-duplicate-button.button.icon {
  width: 26px;
  min-width: 26px;
  height: 26px;
  min-height: 26px;
  padding: 0;
  color: var(--muted);
  opacity: 0.55;
}

.plan-task-row:hover .plan-task-duplicate-button.button.icon,
.plan-task-duplicate-button.button.icon:focus-visible {
  opacity: 1;
}

.plan-task-duplicate-button.button.icon:hover {
  color: var(--text);
  background: #f2f4f7;
}

.plan-task-duplicate-button svg {
  width: 15px;
  height: 15px;
}

.task-detail-copied-subtasks {
  display: grid;
  gap: 4px;
  margin: 0 0 6px;
  padding-left: 18px;
  font-size: 13px;
}

.plan-task-more {
  position: relative;
  width: 34px;
  display: inline-flex;
  justify-content: flex-end;
}

.plan-task-more > summary {
  list-style: none;
}

.plan-task-more > summary::-webkit-details-marker {
  display: none;
}

.plan-task-more-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  right: 0;
  min-width: 150px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 14px 32px rgba(18, 24, 38, 0.16);
  padding: 6px;
}

.plan-task-more-menu button {
  width: 100%;
  min-height: 32px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  text-align: left;
  font: inherit;
  font-size: 13px;
}

.plan-task-more-menu button:hover:not([disabled]) {
  background: var(--surface-2);
}

.plan-task-more-menu button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.plan-task-more-menu button.danger {
  color: var(--red);
}

.plan-task-more-menu svg {
  width: 15px;
  height: 15px;
}

.plan-task-inline-actions {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  min-width: 0;
}

.plan-task-inline-actions .button.icon.compact {
  width: 30px;
  min-width: 30px;
  height: 30px;
}

.plan-task-quick-controls {
  display: none;
  grid-template-columns: 70px 126px 92px;
  align-items: center;
  gap: 5px;
}

.plan-task-row:hover .plan-task-quick-controls,
.plan-task-row:focus-within .plan-task-quick-controls {
  display: inline-grid;
}

.plan-task-quick-controls input,
.plan-task-quick-controls select {
  min-height: 26px;
  height: 26px;
  border-radius: 6px;
  padding: 3px 6px;
  font-size: 12px;
}

.plan-task-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.plan-task-row > .plan-task-side .plan-task-actions {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
}

.plan-task-row:hover > .plan-task-side .plan-task-actions,
.plan-task-row:focus-within > .plan-task-side .plan-task-actions,
.plan-task-edit-row > .plan-task-actions {
  opacity: 1;
  pointer-events: auto;
}

.button.danger-soft {
  border-color: rgba(200, 64, 76, 0.22);
  background: #fff5f5;
  color: var(--red);
}

.plan-task-form {
  padding: 0 16px 18px;
}

.plan-lists-panel {
  margin-bottom: 18px;
}

.plan-list-groups {
  display: grid;
  gap: 14px;
  padding: 0 16px 18px;
}

.plan-list-group {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: #ffffff;
}

.plan-list-group-title {
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  font-weight: 700;
}

.plan-list-form {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.plan-list-form input {
  width: 220px;
  min-height: 36px;
}

.plan-list-add-button {
  min-height: 36px;
}

.plan-list-group .plan-task-list {
  padding: 0 12px;
}

.clickup-lists {
  padding-top: 4px;
}

.clickup-list {
  border-radius: 7px;
}

.clickup-list-title {
  border: 0;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  align-items: center;
  gap: 8px;
}

.clickup-list-title-left {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.clickup-list-title-left span:nth-child(3) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plan-list-more {
  justify-self: end;
}

.plan-list-more-menu {
  min-width: 150px;
}

.plan-list-title-edit-form {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(180px, 360px) auto auto auto;
  align-items: center;
  gap: 8px;
}

.plan-list-title-edit-form input[name="name"] {
  min-height: 30px;
  height: 30px;
  border-radius: var(--radius-1);
  padding: 4px 8px;
  font-weight: 600;
}

.status-dot-ring {
  width: 15px;
  height: 15px;
  border: 1.5px dashed var(--muted-2);
  border-radius: 999px;
  flex: 0 0 auto;
}

.clickup-task-grid-wrap {
  overflow-x: auto;
}

.clickup-task-grid {
  display: grid;
  grid-template-columns: minmax(300px, 1.6fr) 100px 130px 126px 132px 128px;
  align-items: center;
  min-width: 952px;
  border-bottom: 1px solid var(--line);
}

.clickup-task-grid > div {
  min-width: 0;
  min-height: 36px;
  display: flex;
  align-items: center;
  padding: 7px 10px;
  border-right: 1px solid var(--line);
  color: var(--text);
  font-size: 13px;
}

.clickup-task-grid > div:last-child {
  border-right: 0;
}

.clickup-task-header {
  background: #fafafa;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.clickup-task-header > div {
  min-height: 34px;
  color: var(--muted);
}

.clickup-task-row.done .clickup-task-title {
  color: var(--muted);
  text-decoration: line-through;
}

.clickup-task-name {
  gap: 9px;
}

.clickup-task-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.clickup-time-estimate {
  gap: 6px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.clickup-add-task-row {
  background: #ffffff;
}

.clickup-edit-task-row {
  background: #f8fbff;
}

.clickup-edit-task-row {
  grid-template-columns: 46px minmax(360px, 1.8fr) 56px 130px 58px 82px 170px;
  min-width: 1120px;
}

.clickup-edit-task-row > div {
  overflow: visible;
}

.clickup-edit-task-row .plan-task-edit-name {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(150px, 1.4fr) minmax(84px, 0.6fr) minmax(120px, 0.8fr) minmax(84px, 0.6fr);
  align-items: center;
  gap: 7px;
}

.clickup-edit-task-row .clickup-row-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 6px;
}

.clickup-edit-task-row .clickup-row-actions .button {
  width: 100%;
  min-width: 0;
  justify-content: center;
}

.clickup-add-task-row input,
.clickup-add-task-row select {
  width: 100%;
  min-height: 28px;
  height: 28px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  padding: 4px 6px;
  font-size: 13px;
}

.clickup-add-task-row input:focus,
.clickup-add-task-row select:focus {
  background: #ffffff;
  border-color: var(--accent-2);
}

.clickup-add-name {
  gap: 8px;
}

.clickup-add-name input[name="title"] {
  min-width: 150px;
  flex: 1;
}

.clickup-add-name input[name="code"] {
  max-width: 92px;
}

.clickup-add-name .plan-code-select {
  max-width: 170px;
}

.clickup-add-name .plan-completion-milestone-select {
  max-width: 190px;
}

.plan-completion-milestone-select {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.plan-completion-milestone-select:disabled,
.plan-completion-milestone-select.disabled-rpa-only {
  background: #f3f4f6;
  color: var(--muted);
  border-color: var(--line);
  cursor: not-allowed;
  opacity: 0.78;
}

.plan-code-select {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.plan-code-select.compact {
  font-size: 12px;
}

/* Katarzyna, 2026-10-17: the open code list in Plan as compact as the one in My time (the browser's
   own list leaves a lot of room between the codes), grouped the same way: a heading for Chargeable
   and for Non-chargeable, a line between. Browsers without customizable select keep their own list,
   still grouped. */
@supports (appearance: base-select) {
  .plan-code-select,
  .plan-code-select::picker(select) {
    appearance: base-select;
  }

  /* The closed field stays as it was: the chosen code cut with "…" and a small arrow. */
  .plan-code-select > button {
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
  }

  .plan-code-select selectedcontent {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .plan-code-select::picker-icon {
    content: "";
    flex: none;
    width: 12px;
    height: 12px;
    margin-left: 4px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%23333' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
  }

  .plan-code-select::picker(select) {
    max-height: min(320px, 60vh);
    padding: 3px 0;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-1);
    background: #ffffff;
    box-shadow: var(--shadow-menu);
  }

  .plan-code-select optgroup > legend {
    padding: 4px 10px 2px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    line-height: 14px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
  }

  .plan-code-select option {
    min-height: 20px;
    padding: 2px 10px;
    color: var(--text);
    font-size: 12px;
    line-height: 16px;
    white-space: nowrap;
  }

  .plan-code-select option::checkmark {
    display: none;
  }

  .plan-code-select option:hover,
  .plan-code-select option:focus-visible {
    background: var(--surface-2);
    outline: 0;
  }

  .plan-code-select option:checked {
    font-weight: 600;
  }

  .plan-code-select hr {
    margin: 3px 0;
    border: 0;
    border-top: 1px solid var(--line-strong);
  }
}

.plan-task-edit-name input[name="listName"] {
  max-width: 104px;
}

.plan-task-edit-row {
  align-items: start;
  grid-template-columns: 18px minmax(0, 1fr) 150px;
  background: #f8fbff;
  padding: 8px 0;
}

.plan-list-group > .plan-task-add-row {
  margin: 0 12px;
}

.plan-task-edit-row .plan-status-wrap {
  align-self: center;
}

.plan-task-edit-fields {
  display: grid;
  grid-template-columns: minmax(150px, 1.4fr) 86px 140px 104px 74px 132px 112px 86px;
  gap: 6px;
  width: 100%;
}

.plan-task-edit-fields input,
.plan-task-edit-fields select {
  width: 100%;
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #ffffff;
  padding: 5px 7px;
  font-size: 13px;
}

.plan-task-edit-fields .plan-task-edit-title {
  font-weight: 600;
}

.clickup-row-actions {
  width: 100%;
}

.plan-task-timer-actions {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.plan-task-timer-button {
  width: 26px;
  height: 26px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: #ffffff;
  color: var(--text);
  display: inline-grid;
  place-items: center;
  padding: 0;
}

.plan-task-timer-button:hover:not([disabled]) {
  border-color: #9ba69d;
  background: var(--surface-2);
}

.plan-task-timer-button.play {
  color: var(--accent);
}

.plan-task-timer-button.pause {
  color: var(--tv-off-text);
  background: var(--tv-off-row);
  border-color: var(--tv-off-border);
}

.plan-task-timer-button.stop {
  color: var(--red);
  border-color: rgba(200, 64, 76, 0.24);
}

.plan-task-timer-button[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

.compact-avatar {
  width: 26px;
  height: 26px;
  font-size: 11px;
}

.plan-priority,
.plan-priority-flag-only,
.plan-priority-picker-summary,
.plan-priority-option {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
}

.plan-priority-flag-only {
  width: 26px;
  height: 26px;
  justify-content: center;
  border-radius: var(--radius-1);
}

.plan-priority-flag-only svg,
.plan-priority-picker-summary svg,
.plan-priority-option svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
  stroke: currentColor;
}

.plan-priority.low,
.plan-priority-flag-only.low,
.plan-priority-picker-summary.low,
.plan-priority-option.low {
  color: #98a2b3;
}

.plan-priority.normal,
.plan-priority-flag-only.normal,
.plan-priority-picker-summary.normal,
.plan-priority-option.normal {
  color: #4f6bdc;
}

.plan-priority.high,
.plan-priority-flag-only.high,
.plan-priority-picker-summary.high,
.plan-priority-option.high {
  color: #f0b429;
}

.plan-priority.urgent,
.plan-priority-flag-only.urgent,
.plan-priority-picker-summary.urgent,
.plan-priority-option.urgent {
  color: #e03131;
}

.plan-priority-picker {
  position: relative;
  display: inline-block;
  min-width: 0;
}

.plan-priority-picker.disabled {
  pointer-events: none;
}

.plan-priority-picker-summary {
  min-height: 30px;
  min-width: 104px;
  justify-content: flex-start;
  border: 1px solid var(--line);
  border-radius: var(--radius-1);
  background: #fff;
  padding: 5px 9px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.plan-priority-picker-summary::-webkit-details-marker {
  display: none;
}

.plan-priority-picker.compact .plan-priority-picker-summary {
  width: 34px;
  min-width: 34px;
  justify-content: center;
  padding: 0;
}

.plan-priority-picker[open] .plan-priority-picker-summary,
.plan-priority-picker-summary:hover {
  border-color: var(--line-strong);
  background: var(--surface-2);
}

.plan-priority-menu {
  position: absolute;
  z-index: 90;
  top: calc(100% + 6px);
  left: 0;
  width: 180px;
  display: grid;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: var(--radius-2);
  background: #fff;
  box-shadow: var(--shadow-menu);
  padding: 8px;
}

.clickup-priority-cell .plan-priority-menu,
.plan-task-quick-controls .plan-priority-menu,
.task-detail-fields .plan-priority-menu {
  right: 0;
  left: auto;
}

.plan-priority-menu-title {
  padding: 4px 7px 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.plan-priority-option {
  width: 100%;
  min-height: 32px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: var(--radius-1);
  background: transparent;
  padding: 5px 7px;
  text-align: left;
  font-size: 13px;
}

.plan-priority-option:hover,
.plan-priority-option.active {
  background: var(--surface-2);
}

.compact-empty {
  min-height: 42px;
  padding: 10px;
}

.plan-week-wrap {
  width: 100%;
  overflow-x: auto;
}

.plan-week-wrap:has(.plan-status-menu) {
  padding-bottom: 110px;
}

.plan-week-table {
  min-width: 1120px;
  table-layout: fixed;
}

.plan-week-table th,
.plan-week-table td {
  vertical-align: top;
}

.plan-person-col {
  width: 250px;
  min-width: 250px;
}

.plan-person {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
}

.plan-day-cell {
  width: 164px;
  min-width: 164px;
  background: #f8fbf8;
}

.plan-day-total {
  height: 30px;
  border-radius: 5px;
  display: grid;
  place-items: center;
  margin-bottom: 8px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.plan-day-total.empty {
  background: #ffffff;
  color: var(--muted);
}

.plan-day-total.filled,
.plan-day-total.full {
  background: var(--tv-charge-chip);
  border: 1px solid var(--tv-charge-border);
  color: var(--tv-charge-text);
}

.plan-day-total.over {
  background: var(--tv-over-chip);
  border: 1px solid var(--tv-over-border);
  color: #ffffff;
}

.plan-day-tasks {
  display: grid;
  gap: 5px;
}

.plan-task-chip {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 7px 8px;
  border-radius: 5px;
  background: #ffffff;
  color: var(--text);
  box-shadow: inset 0 0 0 1px rgba(149, 160, 151, 0.28);
  font-size: 12px;
  position: relative;
  overflow: visible;
}

.plan-task-chip.in_progress {
  background: var(--tv-other-chip);
  color: var(--tv-other-text);
  box-shadow: inset 0 0 0 1px var(--tv-other-border);
}

.plan-task-chip.wait {
  background: var(--tv-off-chip);
  color: var(--tv-off-text);
  box-shadow: inset 0 0 0 1px var(--tv-off-border);
}

.plan-task-chip.complete {
  background: var(--tv-charge-chip);
  color: var(--tv-charge-text);
  box-shadow: inset 0 0 0 1px var(--tv-charge-border);
}

.plan-task-chip .plan-status-menu {
  top: 21px;
  left: -4px;
  z-index: 40;
}

.plan-task-chip .compact-timer-actions {
  gap: 3px;
}

.plan-task-chip .plan-task-timer-button {
  width: 26px;
  height: 26px;
  border-radius: 6px;
}

.plan-task-chip-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plan-task-chip .plan-status-wrap {
  overflow: visible;
}

.plan-task-chip strong {
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.plan-week-total {
  font-weight: 700;
}

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

.result-table-scroll-shell {
  width: 100%;
  min-width: 0;
}

.result-table-scroll-top {
  width: calc(100% - 32px);
  height: 18px;
  margin: 0 16px;
  overflow-x: auto;
  overflow-y: hidden;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}

.result-table-scroll-spacer {
  height: 1px;
}

.result-table {
  min-width: 1500px;
}

.result-extra-cost-cell {
  min-width: 250px;
  text-align: left;
  vertical-align: top;
}

.result-extra-cost-total {
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.result-signal-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 160px;
}

.project-status-main-row.expanded > td {
  border-bottom-color: transparent;
}

.project-status-code-cell {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.project-status-team-cell {
  min-width: 210px;
}

.project-status-team {
  display: grid;
  grid-template-columns: repeat(2, minmax(84px, 1fr));
  gap: 5px 10px;
  font-size: 12px;
}

.project-status-team > div {
  display: grid;
  gap: 2px;
}

.project-status-detail-row > td {
  padding: 0 14px 14px;
  background: #f8faf7;
  border-bottom: 1px solid var(--line);
}

.project-status-details {
  display: grid;
  gap: 12px;
  width: min(100%, 980px);
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.project-status-detail-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: center;
  font-size: 13px;
}

.project-status-role-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 8px;
}

.project-status-role-card {
  display: grid;
  gap: 4px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-2);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.project-status-role-title {
  font-weight: 700;
}

.project-status-budget-usage {
  display: grid;
  border: 1px solid var(--line);
  border-radius: 7px;
  overflow: hidden;
  background: #fff;
  max-width: 100%;
  overflow-x: auto;
}

.project-status-budget-row {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 82px 82px 74px 96px 86px;
  min-width: 740px;
  min-height: 40px;
  height: 40px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.project-status-budget-row:last-child {
  border-bottom: 0;
}

.project-status-budget-row > div {
  min-width: 0;
  padding: 5px 10px;
}

.project-status-budget-header {
  min-height: 36px;
  height: 36px;
  background: var(--surface-2);
  color: var(--muted);
  font-weight: 700;
}

.project-status-budget-header > div:not(:first-child) {
  text-align: right;
}

.project-status-budget-project-row {
  background: #edf6f1;
  font-weight: 700;
}

.project-status-budget-role-row {
  background: #f7faf6;
}

.project-status-budget-user-row,
.project-status-budget-type-row {
  background: #fff;
}

.project-status-budget-label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.project-status-budget-title,
.project-status-budget-type,
.project-status-budget-label .user-pill span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-status-budget-label .user-pill {
  min-width: 0;
  max-width: 100%;
}

.project-status-budget-role-row .project-status-budget-label {
  padding-left: 24px;
}

.project-status-budget-user-row .project-status-budget-label {
  padding-left: 48px;
}

.project-status-budget-type-row .project-status-budget-label {
  padding-left: 82px;
}

.project-status-budget-number {
  text-align: right;
  white-space: nowrap;
}

.project-status-budget-number .badge {
  min-width: 52px;
  justify-content: center;
}

.project-status-milestones {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(5, minmax(240px, 1fr));
  gap: 4px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.project-status-milestone-item {
  display: grid;
  grid-template-rows: auto auto;
  gap: 4px;
  align-items: center;
  min-height: 46px;
  padding: 5px 7px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #ffffff;
  font-size: 12px;
}

.project-status-milestone-item.done {
  border-color: #9ad7b4;
  background: #eefaf3;
}

.project-status-milestone-item.due-soon {
  border-color: #f1cd82;
  background: #fff8e6;
}

.project-status-milestone-item.overdue {
  border-color: #f3a0a7;
  background: #fff1f2;
}

.project-status-milestone-top {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 8px;
}

.project-status-milestone-flow {
  min-width: 0;
  display: grid;
  grid-template-columns: auto 18px auto minmax(8px, 1fr) auto;
  align-items: center;
  column-gap: 6px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.15;
}

.project-status-milestone-name,
.project-status-milestone-flow-text,
.project-status-milestone-flow-label,
.project-status-milestone-flow-date,
.project-status-milestone-arrow {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-status-milestone-flow-text {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.project-status-milestone-flow-label {
  color: var(--muted);
}

.project-status-milestone-flow-date {
  color: var(--ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.project-status-milestone-arrow {
  color: #95a0b2;
  text-align: center;
}

.project-status-milestone-top .badge {
  width: fit-content;
  justify-self: end;
}

.project-status-milestone-delta {
  justify-self: end;
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-billing-panel {
  display: grid;
  gap: 7px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #ffffff;
}

.project-billing-panel-compact {
  padding: 8px 10px;
}

.project-billing-compact-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 28px;
}

.project-billing-compact-title {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.project-billing-compact-title > span:first-child {
  font-size: 13px;
  font-weight: 600;
}

.project-billing-compact-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.project-billing-mini {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  color: var(--tv-table-muted);
  font-size: 12px;
}

.project-billing-mini strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.project-billing-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.project-billing-header h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
}

.project-billing-form {
  display: grid;
  grid-template-columns:
    minmax(104px, 132px)
    minmax(104px, 132px)
    minmax(126px, 150px)
    minmax(140px, 1fr)
    minmax(136px, 0.9fr)
    minmax(106px, 0.75fr)
    minmax(190px, 1.35fr)
    auto;
  align-items: end;
  gap: 7px;
}

.project-billing-form label {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: var(--tv-table-muted);
  font-size: 12px;
  font-weight: 500;
}

.project-billing-form input {
  min-width: 0;
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 8px;
  background: #ffffff;
  color: var(--text);
  font: inherit;
  font-size: 13px;
}

.project-billing-form input:disabled {
  background: var(--surface-2);
  color: var(--muted);
}

.project-billing-check {
  display: contents;
}

.project-billing-check-item {
  display: grid;
  gap: 3px;
  min-width: 0;
  min-height: 50px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-2);
}

.project-billing-check-label {
  color: var(--tv-table-muted);
  font-size: 11px;
  font-weight: 500;
}

.project-billing-check-value,
.project-billing-difference {
  min-width: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-billing-difference.positive {
  color: var(--success);
}

.project-billing-difference.negative {
  color: var(--danger);
}

.project-billing-difference.neutral {
  color: var(--muted);
}

.project-billing-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
  white-space: nowrap;
}

.project-deadline-cell {
  min-width: 124px;
  white-space: nowrap;
}

.project-milestone-cell {
  min-width: 142px;
}

.project-milestone-status-cell {
  min-width: 118px;
}

.project-next-milestone,
.project-milestone-status {
  display: grid;
  gap: 2px;
  align-items: center;
}

.project-delivery-note {
  line-height: 1.2;
}

.project-completion-cell {
  min-width: 190px;
}

.project-role-status-cell {
  min-width: 118px;
  white-space: nowrap;
}

.project-role-status {
  display: grid;
  gap: 3px;
  justify-items: end;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.project-role-status .badge {
  min-width: 48px;
  justify-content: center;
}

.project-completion-control,
.project-completion-readonly {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 4px;
  width: 100%;
  font-variant-numeric: tabular-nums;
}

.project-completion-input-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  width: 100%;
}

.project-completion-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  width: 100%;
}

.project-completion-input {
  width: 68px;
  min-height: 30px;
  height: 30px;
  padding: 4px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: #fff;
  text-align: right;
  font: inherit;
  font-variant-numeric: tabular-nums;
}

.project-completion-save-button {
  min-height: 30px;
  height: 30px;
  padding: 4px 10px;
  border-radius: 6px;
}

.project-completion-status {
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.project-edit-modal {
  width: min(1180px, calc(100vw - 56px));
}

.project-quality-editor {
  margin: 4px 0 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
}

.project-quality-editor > summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
}

.project-quality-summary-text {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.project-quality-summary-toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.project-quality-summary-toggle svg {
  width: 16px;
  height: 16px;
  transition: transform 120ms ease;
}

.project-quality-collapse-label,
.project-quality-editor[open] .project-quality-expand-label {
  display: none;
}

.project-quality-editor[open] .project-quality-collapse-label {
  display: inline;
}

.project-quality-editor[open] .project-quality-summary-toggle svg {
  transform: rotate(180deg);
}

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

.project-quality-grid label {
  min-width: 0;
}

.project-quality-grid input,
.project-quality-grid select {
  width: 100%;
}

.project-quality-wide {
  grid-column: 1 / -1;
}

.project-quality-help {
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #ffffff;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

[data-quality-referral-country][hidden],
[data-quality-activity-comment][hidden],
[data-quality-pie-type][hidden],
[data-quality-pie-requirement][hidden],
[data-quality-assurance-description][hidden],
[data-quality-other-inspection-description][hidden],
[data-quality-audit-field][hidden],
[data-quality-statutory-audit-field][hidden],
[data-quality-opinion-field][hidden] {
  display: none;
}

.project-milestone-editor {
  margin: 4px 0 18px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
}

.project-milestone-editor-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 8px;
}

.project-milestone-editor-header h3 {
  margin: 0;
  font-size: 14px;
}

.project-milestone-editor-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(140px, 1fr));
  gap: 8px;
}

.project-milestone-editor-grid.with-status {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.project-milestone-edit-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 5px;
  margin: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #ffffff;
  font-size: 13px;
}

.project-milestone-date-field,
.project-milestone-status-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  margin: 0;
  min-height: auto;
  padding: 0;
  font-size: 12px;
  color: var(--muted);
}

.project-milestone-edit-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}

.project-milestone-status-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 6px;
}

/* Date fields show year month day (2026 09 23) whatever the browser's language (Katarzyna,
   2026-09-23). The browser draws these fields itself; in Chrome/Edge its three parts can be
   re-ordered and the "/" separators hidden. The value the program receives is unchanged. */
input[type="date"]::-webkit-datetime-edit-fields-wrapper { display: flex; align-items: center; line-height: normal; }
input[type="date"]::-webkit-datetime-edit-text { display: none; }
input[type="date"]::-webkit-datetime-edit-year-field { order: 1; }
input[type="date"]::-webkit-datetime-edit-month-field { order: 2; margin-left: 0.55ch; }
input[type="date"]::-webkit-datetime-edit-day-field { order: 3; margin-left: 0.55ch; }

.project-milestone-edit-row input[type="date"],
.project-milestone-edit-row select {
  width: 100%;
  min-width: 0;
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 4px 7px;
  background: #ffffff;
  font-size: 12px;
}

.project-milestone-edit-row input:disabled,
.project-milestone-edit-row select:disabled {
  color: var(--muted);
  background: var(--surface-2);
}

.compact-check {
  margin: 0;
  align-self: center;
  align-items: center;
  min-height: auto;
  padding: 0;
  font-size: 12px;
  font-weight: 700;
}

.field-check {
  align-self: end;
  min-height: 38px;
  padding: 8px 0;
  font-weight: 600;
}

.field-check input {
  width: 16px;
  height: 16px;
}

/* A check-row without an avatar: the text takes the full width instead of the 28px avatar column
   (Katarzyna, 2026-09-25: the words were drawn on top of each other in the code editor). */
.check-row.field-check {
  grid-template-columns: 16px minmax(0, 1fr);
}

/* Non-chargeable code editor: one option per row, a bold name and a plain explanation under it. */
.non-charge-code-options {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.non-charge-code-option {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
}

.non-charge-code-option input {
  width: 16px;
  height: 16px;
  margin-top: 2px;
}

.non-charge-code-option > span {
  display: grid;
  gap: 3px;
  min-width: 0;
  font-size: 13px;
  line-height: 1.35;
}

.non-charge-code-option .tiny.muted {
  white-space: normal;
}

.project-code-input {
  min-width: 82px;
  text-transform: uppercase;
  font-weight: 700;
}

.project-client-input {
  min-width: 240px;
}

.project-status-input {
  min-width: 124px;
}

.project-status-command-panel {
  padding: 0;
}

.project-status-command-top {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  padding: 16px;
}

.project-status-title-block {
  min-width: 0;
}

.project-status-command-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}

.project-create-drawer {
  position: relative;
}

.project-create-drawer > summary {
  list-style: none;
}

.project-create-drawer > summary::-webkit-details-marker {
  display: none;
}

.project-create-drawer-body {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.project-status-search-field {
  min-width: 220px;
}

.project-status-export-field {
  min-width: 260px;
}

.project-status-toolbar input,
.project-status-toolbar select {
  width: 100%;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 6px 9px;
  background: #ffffff;
  color: var(--text);
  font-size: 13px;
}

.project-status-list-header {
  padding: 16px 16px 10px;
}

.project-status-list-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.project-status-grid-wrap {
  max-width: 100%;
  padding: 0 16px 56px;
  overflow-x: auto;
  overflow-y: visible;
}

.project-status-grid {
  display: grid;
  width: 100%;
  min-width: 1680px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: visible;
  background: #ffffff;
}

.project-status-grid-row {
  display: grid;
  grid-template-columns: 38px minmax(220px, 0.46fr) minmax(150px, 0.32fr) 108px 116px 94px 118px 132px 112px repeat(4, minmax(90px, 0.22fr)) 124px 72px;
  align-items: center;
  min-height: 54px;
  border-bottom: 1px solid var(--line);
}

.project-status-grid-row > div {
  min-width: 0;
  padding: 8px 10px;
}

.project-status-grid-head {
  min-height: 38px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-align: left;
}

.project-status-grid-head > div {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  justify-content: flex-start;
}

.project-status-main-row {
  position: relative;
}

.project-status-main-row.expanded {
  background: #fbfdfb;
}

.project-status-expand-cell,
.project-status-actions-cell {
  display: flex;
  justify-content: flex-start;
}

.project-status-project-cell,
.project-status-risk,
.project-status-current-milestone,
.project-status-milestone-status,
.project-status-budget-compact,
.project-status-budget-left-cell,
.project-status-completion-balance-cell,
.project-status-deadline,
.project-status-billing,
.project-status-role-owner-list,
.project-completion-readonly,
.project-completion-control {
  min-width: 0;
}

.project-status-project-cell {
  display: grid;
  gap: 3px;
}

.project-status-client,
.project-status-code,
.project-status-current-milestone span,
.project-next-milestone span,
.project-status-team-codes,
.project-completion-status {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-status-client {
  font-weight: 700;
}

.project-status-code {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.project-status-risk {
  display: grid;
  gap: 4px;
  align-items: center;
}

.project-status-risk .badge {
  width: fit-content;
  max-width: 100%;
}

.project-status-current-milestone {
  display: grid;
  gap: 2px;
}

.project-status-milestone-action {
  position: relative;
  min-width: 0;
}

.project-status-current-milestone span:first-child {
  font-weight: 400;
}

.project-status-milestone-status {
  display: grid;
  justify-items: start;
  gap: 2px;
}

.project-status-current-milestone-button {
  width: fit-content;
  max-width: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.project-status-current-milestone-button:hover span:first-child {
  text-decoration: underline;
}

.project-status-milestone-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 40;
  width: 220px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: 7px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: var(--shadow);
  color: var(--text);
  font-size: 12px;
}

.project-status-milestone-popover span {
  grid-column: 1 / -1;
  min-width: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}

.project-status-milestone-popover .button {
  width: 100%;
  justify-content: center;
}

.project-status-milestone-popover:has(.project-status-opinion-field) {
  width: min(380px, calc(100vw - 32px));
}

.project-status-opinion-field {
  grid-column: 1 / -1;
  display: grid;
  gap: 4px;
  margin: 0;
  font-size: 12px;
}

.project-status-opinion-field select,
.task-milestone-opinion-field select {
  width: 100%;
}

.project-status-milestone-popover .warning-text {
  white-space: normal;
}

.task-milestone-opinion-field {
  display: grid;
  gap: 5px;
  margin-top: 12px;
  text-align: left;
}

.project-status-milestone-status .badge {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-status-budget-compact {
  display: grid;
  gap: 4px;
  justify-items: start;
  font-variant-numeric: tabular-nums;
}

.project-status-budget-line {
  width: 100%;
  text-align: left;
  white-space: nowrap;
  font-weight: 400;
}

.project-status-budget-compact .progress {
  width: 100%;
  min-width: 0;
}

.project-status-deadline {
  display: grid;
  gap: 3px;
  text-align: left;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.project-status-billing {
  display: grid;
  justify-items: start;
  gap: 2px;
  max-width: 100%;
  font-variant-numeric: tabular-nums;
}

.project-status-billing .badge,
.project-status-billing .tiny {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-status-completion-balance-cell {
  display: flex;
  justify-content: flex-start;
  font-variant-numeric: tabular-nums;
}

.project-status-role-cell {
  display: flex;
  justify-content: flex-start;
  padding-inline: 4px;
}

.project-status-role-owner-list {
  display: flex;
  justify-content: flex-start;
  gap: 3px;
  max-width: 100%;
  overflow: hidden;
}

.project-status-role-code {
  flex: 0 0 auto;
  min-width: 28px;
  height: 22px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  background: var(--nav-soft);
  color: var(--nav);
  font-size: 12px;
  font-weight: 700;
}

.project-status-role-code.extra {
  min-width: 20px;
  padding: 0 4px;
  background: #edf1ff;
  color: var(--muted);
}

.project-status-team {
  display: grid;
  gap: 4px;
  font-size: 12px;
}

.project-status-owner {
  font-weight: 700;
}

.project-status-team-codes {
  display: flex;
  gap: 4px;
  align-items: center;
  max-width: 100%;
  overflow: hidden;
}

.project-status-team-codes span {
  flex: 0 0 auto;
  min-width: 24px;
  height: 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  background: var(--nav-soft);
  color: var(--nav);
  font-weight: 700;
}

.project-status-grid-detail {
  padding: 0 14px 14px 56px;
  border-bottom: 1px solid var(--line);
  background: #f8faf7;
}

.project-status-details {
  width: 100%;
  max-width: none;
  border-radius: 0 0 8px 8px;
}

.project-status-detail-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, auto));
  justify-content: start;
  align-items: center;
}

.project-status-detail-summary > div {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.project-status-required-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.project-status-full-team {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-2);
  font-size: 12px;
}

.project-status-full-team > div {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.project-completion-readonly {
  align-items: flex-end;
}

.project-completion-view-button {
  border: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  padding: 0;
  color: inherit;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.project-completion-view-button svg {
  width: 14px;
  height: 14px;
  color: var(--muted);
}

.project-completion-value {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.project-completion-value.missing {
  color: #9a6a00;
}

.project-completion-input-wrap {
  flex-wrap: nowrap;
}

.project-completion-input {
  width: 54px;
}

.project-completion-save-button {
  padding: 4px 8px;
}

.row-action-menu {
  position: relative;
}

.row-action-menu > summary {
  list-style: none;
}

.row-action-menu > summary::-webkit-details-marker {
  display: none;
}

.row-action-menu-list {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  min-width: 160px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: var(--shadow);
}

.row-action-menu-list button {
  width: 100%;
  border: 0;
  border-radius: 6px;
  background: transparent;
  padding: 8px 9px;
  text-align: left;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.row-action-menu-list button:hover {
  background: var(--surface-2);
}

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

.row-action-menu-list button.danger:hover {
  background: #fff5f5;
}

.project-status-actions-cell .row-action-menu-list {
  top: auto;
  right: 0;
  bottom: calc(100% + 6px);
  z-index: 60;
}

.project-status-main-row.project-status-menu-down .project-status-actions-cell .row-action-menu-list {
  top: calc(100% + 6px);
  bottom: auto;
}

.danger-text {
  color: #b42318;
}

.warning-text {
  color: #9a6a00;
}

@media (max-width: 1180px) {
  .project-status-command-top {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .project-status-command-actions {
    justify-content: flex-start;
  }

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

  .project-status-export-group {
    width: 100%;
    min-width: 0;
    padding: 10px 0 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .project-status-grid-row {
    grid-template-columns: 36px 220px 142px 104px 112px 88px 116px 128px 108px repeat(4, 78px) 116px 62px;
  }

  .project-status-grid-row > div {
    padding-inline: 8px;
  }
}

@media (max-width: 760px) {
  .project-status-filter-group,
  .project-status-export-group {
    grid-template-columns: 1fr;
  }

  .project-status-grid {
    min-width: 1460px;
    border: 1px solid var(--line);
    gap: 0;
    background: #ffffff;
  }

  .project-status-grid-head {
    display: grid;
  }

  .project-status-grid-row {
    grid-template-columns: 34px 204px 132px 100px 108px 82px 112px 122px 104px repeat(4, 74px) 110px 58px;
    grid-template-areas: none;
    min-height: 52px;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: #ffffff;
  }

  .project-status-expand-cell,
  .project-status-project-cell,
  .project-status-risk-cell,
  .project-status-milestone-cell,
  .project-status-milestone-status-cell,
  .project-status-budget-cell,
  .project-status-completion-cell,
  .project-status-completion-balance-cell,
  .project-status-deadline-cell,
  .project-status-billing-cell,
  .project-status-owner-cell,
  .project-status-role-cell,
  .project-status-actions-cell {
    grid-area: auto;
  }

  .project-status-grid-detail {
    padding: 0 10px 12px 46px;
    border-bottom: 1px solid var(--line);
  }

  .project-status-detail-summary,
  .project-status-full-team {
    grid-template-columns: 1fr;
  }
}

.project-date-input {
  min-width: 138px;
}

.project-role-editor {
  min-width: 190px;
}

.role-hours-grid {
  display: grid;
  grid-template-columns: auto minmax(78px, 1fr);
  gap: 3px 8px;
  min-width: 128px;
  font-size: 12px;
}

.role-hours-label {
  color: var(--muted);
  font-weight: 700;
}

.role-hours-value {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.result-cost-cell {
  min-width: 0;
  text-align: right;
  vertical-align: middle;
}

.result-cost-total {
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.result-cost-breakdown {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 2px 8px;
  margin-top: 2px;
  text-align: right;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.project-expense-list {
  display: grid;
  gap: 4px;
  margin-top: 8px;
}

.project-expense-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 88px auto auto;
  align-items: center;
  gap: 6px;
  padding: 5px 6px;
  border-radius: 6px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: 12px;
}

.project-expense-comment {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-expense-amount {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.project-expense-status-select {
  width: 88px;
  min-height: 26px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 3px 6px;
  background: #ffffff;
  color: var(--text);
  font: inherit;
  font-size: 12px;
}

.project-expense-form {
  display: grid;
  grid-template-columns: 92px 88px minmax(0, 1fr) 34px;
  gap: 6px;
  margin-top: 8px;
  align-items: center;
}

.project-expense-form input,
.project-expense-form select {
  width: 100%;
  min-height: 32px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #ffffff;
  color: var(--text);
  font: inherit;
  font-size: 12px;
}

.mini-icon {
  width: 24px;
  min-width: 24px;
  min-height: 24px;
  height: 24px;
  padding: 0;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 28px;
  background: rgba(38, 50, 63, 0.28);
}

.task-detail-backdrop {
  z-index: 120;
}

.task-delete-backdrop {
  z-index: 160;
}

.modal {
  width: min(1040px, calc(100vw - 56px));
  max-height: calc(100vh - 56px);
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 24px 70px rgba(38, 50, 63, 0.24);
}

.compact-modal {
  width: min(680px, calc(100vw - 56px));
}

.task-detail-modal {
  width: min(1180px, calc(100vw - 42px));
  background: #ffffff;
}

.task-delete-modal {
  width: min(430px, calc(100vw - 48px));
  padding: 18px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
  overflow: visible;
}

.task-delete-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: #fff1f2;
  color: var(--red);
}

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

.task-delete-content {
  min-width: 0;
}

.task-delete-content h2 {
  margin: 0;
  color: var(--text);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.25;
}

.task-delete-content p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.task-delete-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 8px;
}

/* A repeating task: "This task only" and "Whole series (N)" (2026-10-07); a narrow screen wraps them. */
.task-delete-series-actions {
  flex-wrap: wrap;
}

.task-milestone-icon {
  background: #e8f3ef;
  color: var(--green);
}

.task-milestone-warning {
  color: var(--red);
}

.task-milestone-actions .button {
  min-height: 34px;
}

.task-detail-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  min-height: min(720px, calc(100vh - 70px));
}

.task-detail-main {
  padding: 22px 24px;
  border-right: 1px solid var(--line);
  background: #ffffff;
}

.task-detail-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 14px;
  margin-bottom: 18px;
}

.task-detail-title {
  margin-top: 8px;
  min-height: 44px;
  border-color: transparent;
  border-radius: 8px;
  background: var(--surface-2);
  font-size: 24px;
  font-weight: 700;
}

.task-detail-title:focus {
  background: #ffffff;
}

.task-detail-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 12px 18px;
  margin-bottom: 18px;
}

.task-detail-fields .wide-field {
  grid-column: 1 / -1;
}

.task-detail-date-repeat-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px;
  min-width: 0;
}

.task-detail-date-repeat-field > label {
  min-width: 0;
}

.task-detail-date-repeat-field .task-detail-repeat-field {
  align-self: end;
}

.task-detail-repeat-field {
  display: flex;
  align-items: flex-end;
  min-width: 0;
}

.task-detail-repeat-field.active {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(160px, 1fr) auto;
  gap: 12px;
  align-items: end;
}

.task-detail-repeat-summary {
  color: var(--muted);
  font-size: 13px;
}

.task-detail-repeat-summary-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
  font-weight: 700;
}

.task-detail-repeat-summary-title svg {
  width: 16px;
  height: 16px;
}

.task-detail-repeat-picker {
  position: relative;
  z-index: 2;
}

.task-detail-repeat-checkbox {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.task-detail-repeat-popover {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 30;
  width: min(336px, calc(100vw - 72px));
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 14px 32px rgba(22, 36, 57, 0.18);
}

.task-detail-repeat-picker:has(.task-detail-repeat-checkbox:checked) .task-detail-repeat-popover {
  display: grid;
  gap: 12px;
}

.task-detail-repeat-editor[open] .task-detail-repeat-popover {
  display: grid;
  gap: 12px;
}

.task-detail-repeat-popover label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.task-detail-repeat-toggle {
  min-height: 36px;
  white-space: nowrap;
}

/* Weekly repeat on chosen weekdays (Katarzyna, 2026-09-23): seven small boxes under the Schedule select. */
.plan-recurrence-schedule {
  display: grid;
  gap: 8px;
}

.plan-recurrence-weekdays {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.plan-recurrence-weekdays[hidden] {
  display: none;
}

.task-detail-repeat-popover .plan-recurrence-weekday {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  padding: 3px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}

.task-detail-repeat-popover .plan-recurrence-weekday:has(input:checked) {
  background: #e8f0fe;
  border-color: #2563eb;
}

.plan-recurrence-weekday input {
  margin: 0;
}

.task-detail-date-repeat-field .task-detail-repeat-toggle.button.compact {
  min-height: var(--control-lg);
  height: var(--control-lg);
  flex-direction: row;
  gap: 5px;
}

.task-detail-repeat-popover-header,
.task-detail-repeat-popover-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.task-detail-repeat-popover-header strong {
  color: var(--ink);
  font-size: 15px;
}

.task-detail-repeat-popover-header .button {
  display: inline-flex;
  min-height: 28px;
  padding: 4px;
}

.task-detail-repeat-popover-actions {
  justify-content: flex-end;
  padding-top: 2px;
}

.task-detail-repeat-popover-actions .button {
  display: inline-flex;
  color: inherit;
  font-size: 13px;
}

.task-detail-notes {
  margin-top: 12px;
}

form[data-form="plan-task"] textarea[name="notes"],
form[data-form="plan-task-detail"] textarea[name="notes"] {
  font-weight: 400;
}

.task-detail-subtasks {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.task-detail-subtasks-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.task-detail-subtasks-header h3 {
  margin: 0;
  font-size: 15px;
}

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

.plan-subtask-row {
  min-height: 34px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-2);
  background: #fff;
}

.plan-subtask-row.complete {
  background: var(--tv-charge-row);
}

.plan-subtask-status {
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: var(--radius-1);
  background: transparent;
  padding: 0;
}

.plan-subtask-main {
  min-width: 0;
}

.plan-subtask-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
}

.plan-subtask-row.complete .plan-subtask-title {
  color: var(--muted);
  text-decoration: line-through;
}

.plan-subtask-add-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.plan-subtask-add-row input {
  min-height: 32px;
  border-radius: var(--radius-1);
  padding: 6px 8px;
}

.plan-subtask-summary {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.plan-subtask-summary svg {
  width: 14px;
  height: 14px;
}

.task-detail-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
}

.modal-actions-inline {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.task-detail-activity {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  background: #fbfbfb;
}

.task-detail-activity-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 18px 18px 12px;
  border-bottom: 1px solid var(--line);
}

.task-detail-activity-header h3 {
  margin: 0;
  font-size: 15px;
}

.task-activity-list {
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 0;
  overflow: auto;
  padding: 16px 18px 22px;
}

.task-activity-item {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr);
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
}

.task-activity-dot {
  width: 6px;
  height: 6px;
  margin-top: 6px;
  border-radius: 999px;
  background: var(--muted-2);
}

.task-activity-item.comment .task-activity-dot {
  background: var(--accent-2);
}

.task-activity-text {
  color: var(--text);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.modal form {
  padding: 18px;
}

.modal .task-detail-main {
  padding: 22px 24px;
}

.modal-header,
.modal-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.modal-header {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px;
}

.modal-actions {
  position: sticky;
  bottom: -18px;
  margin: 18px -18px -18px;
  padding: 14px 18px;
  background: var(--surface);
  border-top: 1px solid var(--line);
  justify-content: flex-end;
}

.project-edit-form-grid,
.user-edit-form-grid {
  grid-template-columns: repeat(3, minmax(160px, 1fr));
}

.project-edit-form-grid {
  align-items: start;
  gap: 14px 16px;
  margin-bottom: 16px;
}

.project-edit-form-grid label {
  min-width: 0;
  display: grid;
  grid-template-rows: 17px 38px;
  gap: 5px;
  align-items: start;
}

.project-edit-form-grid label.wide {
  grid-column: span 2;
}

.project-edit-form-grid input,
.project-edit-form-grid select {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  height: 38px;
  align-self: stretch;
}

.project-role-form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.project-role-group.visibility-role-group {
  margin-top: 16px;
}

.visibility-role-group .users-visible-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 14px;
}

.visibility-role-group .check-row {
  min-width: 0;
}

.visibility-role-group .check-row span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-role-group {
  margin: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fbfbf8;
}

.project-role-group legend {
  padding: 0 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.check-row {
  min-height: 34px;
  display: grid;
  grid-template-columns: 16px 28px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
}

.check-row input {
  width: 16px;
  min-height: 16px;
}

.muted {
  color: var(--muted);
}

.tiny {
  font-size: 12px;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.row.between {
  justify-content: space-between;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.badge.gray {
  background: #ecefeb;
  color: #515b57;
}

.badge.purple {
  background: rgba(23, 31, 143, 0.1);
  color: var(--nav);
}

.badge.green {
  background: rgba(35, 132, 91, 0.13);
  color: #12613f;
}

.badge.amber {
  background: rgba(212, 163, 34, 0.18);
  color: #765600;
}

.badge.red {
  background: rgba(200, 64, 76, 0.12);
  color: #9d2d38;
}

.badge.blue {
  background: rgba(0, 114, 206, 0.11);
  color: #005a9f;
}

.progress {
  height: 8px;
  border-radius: 999px;
  background: #e9ede6;
  overflow: hidden;
  min-width: 120px;
}

.progress span {
  display: block;
  height: 100%;
  width: var(--w, 0%);
  background: var(--accent-2);
}

.progress.warn span {
  background: var(--amber);
}

.progress.danger span {
  background: var(--red);
}

.empty-state {
  padding: 28px;
  text-align: center;
  color: var(--muted);
}

.notice {
  border: 1px solid var(--line);
  background: #fff;
  border-left: 4px solid var(--accent-2);
  border-radius: 4px;
  padding: 12px 14px;
  color: var(--muted);
}

.notice.warning {
  border-left-color: var(--amber);
}

.notice.danger {
  border-left-color: var(--red);
}

/* Every message shares one place: the card at the top of the page (Katarzyna, 2026-09-15:
   «tegul buna viskas vienodai, nereiketu tai virsuj, tai sone apacioje ziureit»). The standing
   line about the data and the answer to the last action are stacked here, and because the layer
   floats, neither of them ever moves the work area. */
.top-notice-layer {
  position: fixed;
  top: 18px;
  left: 50%;
  z-index: 3000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(440px, calc(100vw - 32px));
  transform: translateX(-50%);
  pointer-events: none;
}

.workspace-sync-status[hidden] {
  display: none;
}

.top-notice,
.toast {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px 8px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-menu);
  color: var(--text);
  font-size: 13px;
  line-height: 1.35;
  pointer-events: auto;
}

.top-notice {
  overflow-wrap: anywhere;
  flex-wrap: wrap;
  /* The standing line can stay for a long time, so the TEXT must never swallow a click meant for
     the page underneath it. Its own buttons do take clicks - that is what they are for. */
  pointer-events: none;
}

.top-notice button,
.top-notice .workspace-sync-confirm {
  pointer-events: auto;
}

/* The way out of a stuck change: one button, then a short confirmation in the same line. */
.workspace-sync-action,
.workspace-sync-confirm .button {
  flex: 0 0 auto;
  min-height: 26px;
  padding: 3px 9px;
  font-size: 12px;
}

.workspace-sync-confirm {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
}

.workspace-sync-confirm .button.danger {
  border-color: var(--red);
  background: var(--red);
  color: #fff;
}

.top-notice-warning {
  border-color: var(--tv-off-border);
  background: var(--tv-off-row);
  color: var(--tv-off-text);
}

/* One loading state everywhere: the same block as an empty state, with three quiet dots so that
   "still loading" never looks like "nothing here" (Katarzyna, 2026-09-16). */
.loading-state {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 28px;
  color: var(--muted);
  text-align: center;
}

.loading-dots {
  display: inline-flex;
  gap: 4px;
}

.loading-dots i {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--accent);
  opacity: 0.3;
  animation: loading-pulse 1.1s ease-in-out infinite;
}

.loading-dots i:nth-child(2) { animation-delay: 0.15s; }
.loading-dots i:nth-child(3) { animation-delay: 0.3s; }

@keyframes loading-pulse {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .loading-dots i { animation: none; opacity: 0.55; }
}

/* One click instead of a calendar for the three dates everybody picks (Katarzyna, 2026-09-16). */
.date-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 5px;
}

.date-quick-button {
  min-height: 22px;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.3;
}

.date-quick-button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.date-quick-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* "Private" in a task: one checkbox with its explanation on one line (Katarzyna, 2026-09-15). */
.task-detail-private {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
}

.task-detail-private input {
  width: 16px;
  height: 16px;
  margin: 0;
  flex: 0 0 auto;
}

.toast-success {
  border-color: var(--tv-charge-border);
  background: var(--tv-charge-chip);
  color: var(--tv-charge-text);
}

.toast-danger {
  border-color: var(--tv-over-border);
  background: var(--tv-over-row);
  color: var(--tv-over-text);
}

.toast-close {
  width: 28px;
  height: 28px;
  min-width: 28px;
  color: inherit;
}

.toast-close svg {
  width: 16px;
  height: 16px;
}

.user-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.user-pill-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.compact-user-code-list {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  max-width: 150px;
}

.compact-user-code {
  width: 30px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  border-radius: 5px;
  background: var(--nav-soft);
  color: var(--nav);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.avatar {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  display: inline-grid;
  place-items: center;
  background: var(--nav-soft);
  color: var(--nav);
  font-size: 12px;
  font-weight: 800;
}

.splitter {
  height: 1px;
  background: var(--line);
  margin: 4px 0;
}

.code-chip {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12px;
  min-width: 62px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  background: #f4f6f1;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 8px;
  color: var(--text);
  font-weight: 700;
  letter-spacing: 0;
  white-space: nowrap;
}

.workload-panel {
  padding: 16px;
}

.workload-scroll {
  overflow: auto;
  max-height: max(340px, calc(100vh - 260px));
  scrollbar-gutter: stable;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
}

.workload-board {
  min-width: 1120px;
}

.workload-grid {
  display: grid;
  grid-template-columns: 288px repeat(var(--day-count), minmax(158px, 1fr));
}

.workload-header-row {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}

.workload-user-row {
  min-height: 196px;
  border-bottom: 1px solid var(--line);
}

.workload-user-row:last-child {
  border-bottom: 0;
}

.workload-person,
.workload-day-header,
.workload-cell {
  border-right: 1px solid var(--line);
}

.workload-person {
  padding: 14px 12px;
  background: #fff;
  position: sticky;
  left: 0;
  z-index: 1;
}

.workload-person-header {
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
}

.workload-person-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
  color: var(--muted);
  font-size: 12px;
}

.workload-day-header {
  padding: 10px 12px;
  background: #f4f6f1;
  text-align: center;
  font-weight: 700;
}

.workload-cell {
  padding: 8px;
  background: #fbfbf8;
  min-height: 196px;
}

.day-total {
  height: 40px;
  border-radius: 4px;
  display: grid;
  place-items: center;
  margin-bottom: 8px;
  color: #123225;
  border: 1px solid rgba(35, 132, 91, 0.18);
}

.day-total.empty {
  background: #edf1ec;
  color: var(--muted);
}

.day-total.filled {
  background: #23845b;
  color: #ffffff;
}

.day-total.full {
  background: #f2d681;
  color: #3f3100;
}

.day-total.over {
  background: #c8404c;
  color: #ffffff;
}

.workload-cards {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.workload-card {
  border-radius: 4px;
  padding: 8px;
  min-height: 48px;
  box-shadow: 0 1px 2px rgba(38, 50, 63, 0.08);
  border: 1px solid rgba(35, 132, 91, 0.2);
}

.workload-card.chargeable {
  background: #dff2e8;
}

.workload-card.noncharge {
  background: #e5f2ff;
  border-color: rgba(0, 114, 206, 0.22);
}

.workload-card-title {
  color: #143225;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.workload-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: rgba(38, 50, 63, 0.72);
  font-size: 11px;
  margin-top: 6px;
}

.workload-empty {
  color: var(--muted-2);
  font-size: 12px;
  text-align: center;
  padding: 10px 0;
}

.workload-matrix {
  min-width: 980px;
  width: 100%;
}

.workload-matrix-row {
  display: grid;
  grid-template-columns: minmax(420px, 1fr) repeat(var(--day-count), 112px) 82px;
  align-items: stretch;
}

.workload-matrix.has-timer .workload-matrix-row {
  grid-template-columns: minmax(420px, 1fr) 92px repeat(var(--day-count), 112px) 82px;
}

.project-approval-matrix .workload-matrix-row {
  grid-template-columns: minmax(420px, 1fr) repeat(var(--day-count), 112px) 82px;
}

.workload-header-cell,
.workload-user-summary-cell,
.workload-timer-summary,
.workload-timer-cell,
.workload-summary-cell,
.workload-day-total,
.workload-week-total,
.workload-project-cell,
.workload-input-cell,
.workload-row-total,
.workload-add-hint {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.workload-name-cell,
.workload-user-summary-cell,
.workload-project-cell {
  position: sticky;
  left: 0;
  z-index: 1;
}

.workload-header-row {
  position: sticky;
  top: 0;
  z-index: 4;
  box-shadow: inset 0 -1px 0 var(--line);
}

.workload-header-cell {
  background: #f4f6f1;
  min-height: 48px;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 700;
}

.workload-name-cell {
  z-index: 5;
}

.workload-total-cell {
  text-align: right;
}

.workload-timer-header {
  text-align: center;
}

.workload-user-summary {
  background: #fff;
  min-height: 44px;
}

.workload-user-summary-cell {
  background: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
}

.workload-expand {
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: #fff;
  display: inline-grid;
  place-items: center;
  padding: 0;
}

.workload-user-main {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(130px, 1fr) 62px 104px auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.workload-user-person {
  min-width: 0;
}

.workload-user-person .user-pill {
  max-width: 100%;
}

.workload-user-person .user-pill span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workload-user-percent,
.workload-user-status,
.workload-user-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.workload-user-percent .badge,
.workload-user-status .badge {
  justify-content: center;
}

.workload-user-percent .badge {
  min-width: 54px;
}

.workload-user-status .badge {
  min-width: 96px;
}

.workload-user-actions {
  min-width: 0;
}

.reopen-week-button,
.review-week-button {
  min-height: 28px;
  padding: 4px 9px;
  border-radius: 999px;
  white-space: nowrap;
}

.review-week-button {
  border-color: #8bc6a5;
  color: #006f44;
}

.collapse-all-button {
  min-height: 32px;
  border-radius: 999px;
  white-space: nowrap;
}

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

.workload-day-total,
.workload-summary-cell,
.workload-week-total,
.workload-row-total {
  min-height: 44px;
  display: grid;
  align-items: center;
  justify-items: stretch;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
  padding: 4px;
}

.workload-timer-summary,
.workload-add-hint {
  min-height: 44px;
  display: grid;
  place-items: center;
  font-weight: 700;
}

.workload-day-total.empty {
  color: var(--muted-2);
  background: #fbfbf8;
}

.workload-day-total.filled {
  color: var(--tv-charge-text);
  background: var(--tv-charge-row);
}

.workload-day-total.full {
  color: var(--tv-off-text);
  background: var(--tv-off-chip);
}

.workload-day-total.over {
  color: var(--tv-over-text);
  background: var(--tv-over-row);
}

.workload-week-total {
  background: #fff;
}

.workload-project-row {
  min-height: 44px;
}

.workload-project-summary-row {
  min-height: 44px;
}

.workload-description-row {
  min-height: 38px;
}

.workload-project-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px 6px 40px;
  background: #fff;
  min-width: 0;
}

.workload-project-summary-row .workload-project-cell {
  padding-left: 12px;
}

.workload-project-details {
  display: grid;
  gap: 5px;
  min-width: 0;
  width: 100%;
}

.workload-project-title {
  font-weight: 700;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: none;
}

.matrix-row-description-input {
  min-height: 28px;
  height: 28px;
  width: 100%;
  min-width: 0;
  font-size: 12px;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.82);
  border-color: transparent;
  border-radius: 5px;
  font-weight: 400;
}

.workload-row-delete {
  width: 28px;
  min-width: 28px;
  min-height: 28px;
  height: 28px;
  padding: 0;
  color: var(--muted);
}

.workload-row-delete:hover {
  color: var(--red);
  border-color: rgba(198, 40, 40, 0.28);
  background: rgba(198, 40, 40, 0.07);
}

.workload-description-row .workload-project-cell {
  padding: 5px 7px;
}

.workload-description-row .workload-project-details {
  gap: 0;
}

.time-matrix-panel .workload-description-row .workload-row-edit-fields,
.team-people-panel .workload-description-row .workload-row-edit-fields,
.time-matrix-panel .workload-add-type-row .workload-row-edit-fields,
.team-people-panel .workload-add-type-row .workload-row-edit-fields {
  grid-template-columns: minmax(82px, 112px) minmax(0, 1fr);
  align-items: center;
  gap: 6px;
}

.time-matrix-panel .matrix-row-code-select,
.team-people-panel .matrix-row-code-select {
  width: 100%;
  min-width: 0;
  min-height: 28px;
  height: 28px;
  padding: 3px 24px 3px 8px;
  border-color: transparent;
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 0.82);
  color: var(--text);
  font-size: 12px;
}

.time-matrix-panel .matrix-row-code-select:hover,
.time-matrix-panel .matrix-row-code-select:focus,
.team-people-panel .matrix-row-code-select:hover,
.team-people-panel .matrix-row-code-select:focus {
  border-color: var(--line-strong);
  background-color: #ffffff;
}

.project-approval-summary-row {
  min-height: 42px;
}

.project-approval-project-cell {
  align-items: center;
  padding-top: 4px;
  padding-bottom: 4px;
}

.project-approval-details {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
  row-gap: 4px;
  width: 100%;
  min-width: 0;
}

.project-approval-title-line {
  display: flex;
  align-items: center;
  gap: 8px;
  grid-column: 1;
  min-width: 0;
}

.project-approval-title-line .workload-project-title {
  min-width: 0;
}

.project-approval-meta,
.project-approval-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.project-approval-project-metrics {
  grid-column: 2;
  justify-content: flex-end;
  align-self: center;
}

.project-approval-actions {
  grid-column: 2;
  justify-content: flex-end;
}

.project-approval-actions .button {
  min-height: 30px;
  padding: 5px 10px;
}

.project-approval-metric {
  display: grid;
  gap: 0;
  justify-content: start;
  font-variant-numeric: tabular-nums;
  padding-right: 12px;
}

.project-approval-metric.budget {
  width: 88px;
  grid-template-columns: 48px 28px;
}

.project-approval-metric.used {
  width: 122px;
  grid-template-columns: 36px 30px 42px;
}

.project-approval-metric.completion {
  width: 132px;
  grid-template-columns: 76px 42px;
}

.project-approval-metric-label {
  text-align: left;
}

.project-approval-metric-hours {
  text-align: right;
}

.project-approval-metric-percent {
  text-align: right;
}

.project-approval-metric-percent-value {
  text-align: right;
}

.project-approval-role-row {
  min-height: 40px;
}

.project-approval-role-row .workload-project-cell {
  padding-left: 18px;
}

.project-approval-line-row .workload-project-cell {
  padding-left: 58px;
}

.project-approval-user-row .workload-project-cell {
  padding-left: 34px;
}

.project-approval-role-label,
.project-approval-role-main,
.project-approval-role-meta,
.project-approval-user-label,
.project-user-approval-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.project-approval-role-label,
.project-approval-user-label {
  width: 100%;
  justify-content: space-between;
}

.project-approval-role-main,
.project-approval-person {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.project-user-approval-actions .button {
  min-height: 28px;
  padding: 4px 9px;
}

.project-approval-line-label {
  width: 100%;
  display: block;
  align-items: center;
  gap: 10px;
}

.project-approval-type {
  min-height: 28px;
  display: flex;
  align-items: center;
  border-radius: 5px;
  background: transparent;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workload-project-row.chargeable .workload-project-cell,
.workload-project-row.chargeable .workload-timer-cell,
.workload-project-row.chargeable .workload-summary-cell,
.workload-project-row.chargeable .workload-input-cell,
.workload-project-row.chargeable .workload-row-total {
  background: var(--tv-charge-row);
}

.workload-project-row.chargeable .code-chip {
  background: var(--tv-charge-chip);
  border-color: var(--tv-charge-border);
  color: var(--tv-charge-text);
}

.workload-project-row.noncharge .workload-project-cell,
.workload-project-row.noncharge .workload-timer-cell,
.workload-project-row.noncharge .workload-summary-cell,
.workload-project-row.noncharge .workload-input-cell,
.workload-project-row.noncharge .workload-row-total {
  background: var(--tv-other-row);
}

.workload-project-row.noncharge .code-chip {
  background: var(--tv-other-chip);
  border-color: var(--tv-other-border);
  color: var(--tv-other-text);
}

.workload-project-row.nonwork .workload-project-cell,
.workload-project-row.nonwork .workload-timer-cell,
.workload-project-row.nonwork .workload-summary-cell,
.workload-project-row.nonwork .workload-input-cell,
.workload-project-row.nonwork .workload-row-total {
  background: var(--tv-off-row);
}

.workload-project-row.nonwork .code-chip {
  background: var(--tv-off-chip);
  border-color: var(--tv-off-border);
  color: var(--tv-off-text);
}

.project-approval-matrix .project-approval-summary-row .workload-project-cell,
.project-approval-matrix .project-approval-summary-row .workload-summary-cell,
.project-approval-matrix .project-approval-summary-row .workload-row-total {
  background: #d3eadc;
  min-height: 42px;
  padding-top: 3px;
  padding-bottom: 3px;
}

.project-approval-matrix .project-approval-role-row .workload-project-cell,
.project-approval-matrix .project-approval-role-row .workload-summary-cell,
.project-approval-matrix .project-approval-role-row .workload-row-total {
  background: #e0f1e7;
  min-height: 38px;
  padding-top: 3px;
  padding-bottom: 3px;
}

.project-approval-matrix .project-approval-user-row .workload-project-cell,
.project-approval-matrix .project-approval-user-row .workload-summary-cell,
.project-approval-matrix .project-approval-user-row .workload-row-total {
  background: #edf8f2;
  min-height: 36px;
  padding-top: 3px;
  padding-bottom: 3px;
}

.project-approval-matrix .project-approval-line-row .workload-project-cell,
.project-approval-matrix .project-approval-line-row .workload-summary-cell,
.project-approval-matrix .project-approval-line-row .workload-row-total {
  background: #f8fcfa;
  min-height: 32px;
}

.workload-timer-cell {
  display: grid;
  place-items: center;
  padding: 5px 3px;
  background: #fff;
  overflow: hidden;
}

.workload-input-cell {
  display: grid;
  place-items: center;
  padding: 4px;
}

.workload-summary-cell {
  background: #fff;
}

.matrix-cell-value {
  width: 100%;
  min-height: 28px;
  display: grid;
  align-items: center;
  justify-items: end;
  padding: 4px 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.workload-summary-value {
  color: #17352a;
}

.matrix-hour-input {
  min-height: 28px;
  height: 28px;
  width: 100%;
  text-align: right;
  border-radius: 5px;
  font-variant-numeric: tabular-nums;
  background: rgba(255, 255, 255, 0.88);
  padding: 4px 10px;
  font-weight: 400;
  border-color: transparent;
  appearance: textfield;
  -moz-appearance: textfield;
}

.matrix-hour-input::-webkit-outer-spin-button,
.matrix-hour-input::-webkit-inner-spin-button {
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
}

.matrix-hour-input:disabled,
.matrix-row-description-input:disabled {
  background: rgba(244, 246, 241, 0.86);
}

.workload-description-row:not(.project-approval-user-row) {
  min-height: 32px;
}

.workload-description-row:not(.project-approval-user-row) .workload-project-cell,
.workload-description-row:not(.project-approval-user-row) .workload-timer-cell,
.workload-description-row:not(.project-approval-user-row) .workload-summary-cell,
.workload-description-row:not(.project-approval-user-row) .workload-input-cell,
.workload-description-row:not(.project-approval-user-row) .workload-row-total {
  min-height: 32px;
  padding-top: 2px;
  padding-bottom: 2px;
}

.workload-description-row:not(.project-approval-user-row) .matrix-cell-value {
  min-height: 24px;
  padding-top: 2px;
  padding-bottom: 2px;
  font-weight: 400;
}

.workload-description-row:not(.project-approval-user-row) .workload-row-total .matrix-cell-value {
  font-weight: 700;
}

.workload-description-row:not(.project-approval-user-row) .matrix-hour-input,
.workload-description-row:not(.project-approval-user-row) .matrix-row-description-input,
.project-approval-line-row .project-approval-type {
  min-height: 24px;
  height: 24px;
  padding-top: 2px;
  padding-bottom: 2px;
  font-weight: 400;
}

.workload-row-total {
  justify-items: stretch;
}

.workload-add-row {
  min-height: 44px;
}

.workload-add-row .workload-project-cell {
  background: #fff;
  padding-left: 48px;
}

.workload-add-hint {
  grid-column: 2 / -1;
  color: var(--muted-2);
  background: #fbfbf8;
  font-weight: 600;
}

.workload-add-type-row {
  min-height: 32px;
}

.workload-add-type-row .workload-project-cell {
  padding: 4px 7px 4px 58px;
}

.workload-add-type-button {
  min-height: 24px;
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 400;
  background: rgba(255, 255, 255, 0.72);
}

.access-builder,
.access-editor {
  min-width: 210px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.access-title {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.access-draft-list,
.access-chips {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.access-builder:not(.has-items) .access-draft-list {
  display: none;
}

.access-builder.has-items .access-empty {
  display: none;
}

.access-empty {
  color: var(--muted-2);
  font-size: 12px;
  font-weight: 600;
}

.access-draft-row,
.access-add-row {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) 34px;
  gap: 6px;
  align-items: center;
}

.access-draft-row select,
.access-add-row select {
  min-height: 34px;
  padding: 6px 8px;
}

.access-draft-row .button,
.access-add-row .button {
  width: 34px;
  min-height: 34px;
}

.access-add-button {
  align-self: flex-start;
  min-height: 34px;
  padding: 6px 10px;
}

.access-chip {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f7f8f5;
  color: var(--text);
  padding: 4px 4px 4px 9px;
  font-size: 12px;
  font-weight: 600;
}

.access-chip button {
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  display: inline-grid;
  place-items: center;
  padding: 0;
}

.access-chip button:hover {
  background: #ecefeb;
  color: var(--red);
}

.timer-controls {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.workload-timer-cell .timer-controls {
  margin-left: 0;
  display: grid;
  grid-template-columns: repeat(3, 24px);
  justify-content: center;
  gap: 3px;
}

.timer-button {
  width: 28px;
  min-height: 28px;
  border-radius: 3px;
}

.workload-timer-cell .timer-button {
  width: 24px;
  min-height: 24px;
  padding: 0;
}

.timer-button svg.lucide {
  width: 14px;
  height: 14px;
}

.workload-timer-cell .timer-button svg.lucide {
  width: 12px;
  height: 12px;
}

.timer-button.active {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}

.floating-timer-stack {
  position: fixed;
  right: 22px;
  bottom: 20px;
  z-index: 60;
  width: min(420px, calc(100vw - 40px));
  display: grid;
  gap: 8px;
}

.floating-timer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  border: 1px solid var(--line);
  border-left: 5px solid var(--green);
  border-radius: 6px;
  background: #ffffff;
  box-shadow: 0 16px 36px rgba(38, 50, 63, 0.22);
  padding: 10px 12px;
}

.floating-timer-controls {
  cursor: default;
}

.floating-timer-controls .button {
  cursor: pointer;
}

.floating-timer.paused {
  border-left-color: var(--amber);
  box-shadow: 0 10px 24px rgba(38, 50, 63, 0.16);
}

.floating-timer-main {
  min-width: 0;
}

.floating-timer-status {
  color: var(--green);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.floating-timer.paused .floating-timer-status {
  color: #765600;
}

.floating-timer-project {
  margin-top: 3px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.floating-timer-description {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.floating-timer-side {
  display: grid;
  justify-items: end;
  gap: 6px;
}

.floating-timer-readout {
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.floating-timer-controls {
  display: inline-flex;
  gap: 4px;
}

.compact-preview {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.compact-preview-row {
  display: grid;
  grid-template-columns: 86px 96px 88px 64px 72px;
  gap: 8px;
  align-items: center;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: #fbfbf8;
  font-size: 12px;
}

.compact-preview-error {
  margin-top: -4px;
  padding: 0 8px 4px 96px;
  color: var(--red);
  font-size: 12px;
  font-weight: 700;
}

.hidden {
  display: none !important;
}

svg.lucide {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

@media (max-width: 1080px) {
  .app-shell {
    grid-template-columns: 84px minmax(0, 1fr);
  }

  .sidebar {
    position: sticky;
    top: 7px;
    height: calc(100vh - 7px);
    border-right: 1px solid var(--line);
    border-bottom: 0;
    padding: 14px 10px;
    gap: 12px;
    overflow-x: hidden;
  }

  .brand {
    justify-content: center;
    padding: 0 0 14px;
  }

  .brand-logo {
    width: 46px;
    min-width: 46px;
  }

  .nav-button {
    justify-content: center;
    padding: 11px 8px;
    gap: 0;
  }

  .nav-button span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .nav-button.active {
    box-shadow: inset 4px 0 0 var(--nav);
  }

  .sidebar-footer {
    display: none;
  }

  .nav-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }

  .grid-2,
  .metric-grid,
  .grid-3 {
    grid-template-columns: 1fr;
  }

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

  .import-actions {
    grid-template-columns: 1fr auto auto auto;
  }

  .project-status-role-grid,
  .project-status-milestones {
    grid-template-columns: repeat(2, minmax(150px, 1fr));
  }

  .plan-week-table {
    min-width: 980px;
  }

}

@media (max-width: 680px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: sticky;
    top: 7px;
    z-index: 12;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 8px 10px;
  }

  .brand,
  .sidebar-footer {
    display: none;
  }

  .nav-group {
    display: flex;
    flex-direction: row;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .nav-button {
    width: 42px;
    min-width: 42px;
    height: 40px;
    padding: 0;
  }

  .nav-button.active {
    box-shadow: inset 0 -3px 0 var(--nav);
  }

  .content,
  .topbar {
    padding-left: 14px;
    padding-right: 14px;
  }

  .topbar {
    height: auto;
    padding-top: 14px;
    padding-bottom: 14px;
    align-items: flex-start;
    flex-direction: column;
  }

  .form-grid,
  .import-actions {
    grid-template-columns: 1fr;
  }

  .time-balance-grid {
    grid-template-columns: 1fr;
  }

  .project-status-toolbar {
    display: grid;
    grid-template-columns: 1fr;
  }

  .result-toolbar {
    display: grid;
    grid-template-columns: 1fr;
  }

  .project-status-toolbar label,
  .result-toolbar label {
    min-width: 0;
  }

  .project-status-role-grid,
  .project-status-milestones,
  .project-status-team {
    grid-template-columns: 1fr;
  }

  .admin-time-export-controls {
    width: 100%;
    justify-content: stretch;
  }

  .admin-time-export-controls label,
  .admin-time-export-controls .button {
    width: 100%;
  }

  .plan-tabs {
    overflow-x: auto;
  }

  .plan-panel-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .plan-my-task-form {
    grid-template-columns: 1fr 1fr;
  }

  .plan-my-task-title,
  .plan-my-task-actions {
    grid-column: 1 / -1;
  }

  .plan-my-task-actions {
    justify-content: flex-start;
  }

  .plan-task-row {
    grid-template-columns: 18px minmax(0, 1fr);
  }

  .plan-task-list-header {
    display: none;
  }

  .plan-task-assignee-cell {
    grid-column: 2;
    justify-self: start;
    place-items: start;
  }

  .plan-task-edit-fields {
    grid-template-columns: 1fr 1fr;
  }

  .plan-task-edit-fields .plan-task-edit-title {
    grid-column: 1 / -1;
  }

  .plan-task-side {
    grid-column: 2;
    justify-self: start;
    justify-items: start;
  }

  .plan-task-quick-controls {
    grid-template-columns: 72px 126px;
    justify-content: start;
  }

  .task-detail-shell {
    grid-template-columns: 1fr;
  }

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

  .task-detail-fields {
    grid-template-columns: 1fr;
  }

  .task-detail-repeat-field.active {
    grid-template-columns: 1fr;
  }

  .plan-task-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .topbar-export-controls {
    width: 100%;
  }

  .form-grid .wide {
    grid-column: span 1;
  }

  .floating-timer-stack {
    right: 14px;
    bottom: 14px;
    left: auto;
    width: min(360px, calc(100vw - 28px));
  }

  .floating-timer {
    grid-template-columns: 1fr;
    justify-items: stretch;
  }

  .floating-timer-side {
    justify-items: start;
  }

}

/* Professional UI redesign layer */
:root {
  --bg: #f6f7f9;
  --app-bg: #f6f7f9;
  --surface: #ffffff;
  --surface-2: #f8f9fb;
  --surface-3: #f1f3f6;
  --line: #e3e6ea;
  --line-strong: #c9d0d8;
  --text: #202833;
  --muted: #667085;
  --muted-2: #98a2b3;
  --nav: #171f8f;
  --nav-soft: #eef2ff;
  --accent: #171f8f;
  --accent-2: #0072ce;
  --green: #1f7a4d;
  --amber: #b7791f;
  --red: #b4232f;
  --blue: #0072ce;
  --radius-1: 4px;
  --radius-2: 6px;
  --radius-3: 8px;
  --control-sm: 30px;
  --control-md: 34px;
  --control-lg: 38px;
  --tv-charge-row: #edf8f2;
  --tv-charge-chip: #cfeedd;
  --tv-charge-border: #8bc7a7;
  --tv-charge-text: #12613f;
  --tv-other-row: #edf6ff;
  --tv-other-chip: #d8ecff;
  --tv-other-border: #98c7ed;
  --tv-other-text: #005a9f;
  --tv-off-row: #fff7d8;
  --tv-off-chip: #ffedaa;
  --tv-off-border: #e2c65e;
  --tv-off-text: #765600;
  --tv-over-row: #ffe9ec;
  --tv-over-chip: #f4a0a7;
  --tv-over-border: #ed858d;
  --tv-over-text: #9d1b28;
  --sidebar-width: 228px;
  --topbar-height: 58px;
  --shadow: none;
  --shadow-menu: 0 14px 34px rgba(32, 40, 51, 0.14);
  --shadow-modal: 0 24px 70px rgba(32, 40, 51, 0.22);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body {
  border-top: 0;
  line-height: 1.42;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body,
button,
input,
select,
textarea {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.app-shell {
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  background: var(--bg);
}

.sidebar {
  top: 0;
  height: 100vh;
  padding: 16px 12px;
  gap: 14px;
  background: #fff;
}

.brand {
  align-items: center;
  gap: 14px;
  padding: 4px 10px 18px;
}

.brand-logo {
  width: 120px;
  min-width: 120px;
  height: auto;
  max-height: none;
  object-fit: contain;
}

.brand-title {
  margin-top: 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #202833;
}

.brand-title span {
  display: block;
}

.brand > div {
  padding-left: 14px;
  border-left: 1px solid var(--line-strong);
}

.sidebar-controls {
  display: flex;
  justify-content: flex-end;
  padding: 0 2px;
}

.sidebar-toggle {
  width: 32px;
  height: 32px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-2);
  background: #fff;
  color: var(--muted);
}

.sidebar-toggle:hover {
  background: var(--surface-2);
  color: var(--nav);
}

.sidebar-toggle svg {
  width: 17px;
  height: 17px;
}

@media (min-width: 761px) {
  .app-shell.sidebar-collapsed {
    grid-template-columns: 68px minmax(0, 1fr);
  }

  .sidebar-collapsed .sidebar {
    padding-inline: 8px;
  }

  .sidebar-collapsed .brand {
    display: none;
  }

  .sidebar-collapsed .sidebar-controls {
    justify-content: center;
    padding: 0;
  }

  .sidebar-collapsed .nav-button {
    justify-content: center;
    gap: 0;
    padding-inline: 8px;
  }

  .sidebar-collapsed .nav-button span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

.nav-group {
  gap: 3px;
}

.nav-button {
  min-height: 34px;
  padding: 8px 10px;
  border-radius: var(--radius-2);
  color: #425466;
  font-size: 13px;
  font-weight: 500;
}

.nav-button:hover {
  background: var(--surface-2);
  border-color: transparent;
  color: var(--nav);
}

.nav-button.active {
  background: #f5f7ff;
  border-color: transparent;
  color: var(--nav);
  box-shadow: inset 3px 0 0 var(--nav);
  font-weight: 600;
}

.main {
  background: var(--bg);
}

.topbar {
  min-height: var(--topbar-height);
  padding: 0 24px;
  gap: 12px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
}

.topbar h1 {
  font-size: 20px;
  font-weight: 600;
}

.topbar-heading {
  min-width: 0;
}

.topbar-heading.with-week {
  gap: 14px;
}

.topbar-actions {
  align-items: center;
}

.topbar-notifications {
  position: relative;
  min-width: 0;
}

.topbar-notification-button {
  position: relative;
  width: 34px;
  min-width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--radius-2);
  background: transparent;
  color: #425466;
  padding: 0;
}

.topbar-notification-button:hover,
.topbar-notifications.open .topbar-notification-button {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--nav);
}

.topbar-notification-button svg {
  width: 18px;
  height: 18px;
}

.topbar-notification-count {
  position: absolute;
  top: 1px;
  right: 0;
  min-width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #16199f;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  padding: 0 4px;
}

.topbar-notification-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 35;
  width: min(420px, calc(100vw - 32px));
  display: grid;
  border: 1px solid var(--line);
  border-radius: var(--radius-3);
  background: #fff;
  box-shadow: var(--shadow-menu);
  overflow: hidden;
}

.topbar-notification-header {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}

.topbar-notification-header > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.topbar-notification-header > .topbar-notification-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: max-content;
}

.topbar-notification-list {
  max-height: min(420px, calc(100vh - 120px));
  overflow: auto;
}

.topbar-notification-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px;
  align-items: start;
  gap: 2px;
  width: 100%;
  min-height: 64px;
  border-bottom: 1px solid var(--line);
  background: #fff;
  color: var(--text);
}

.topbar-notification-open {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr);
  gap: 10px;
  width: 100%;
  min-height: 63px;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 10px 12px;
  text-align: left;
}

.topbar-notification-item:hover,
.topbar-notification-open:hover {
  background: var(--surface-2);
}

.topbar-notification-item:last-child {
  border-bottom: 0;
}

.topbar-notification-dot {
  width: 7px;
  height: 7px;
  margin-top: 6px;
  border-radius: 999px;
  background: transparent;
}

.topbar-notification-item.unread .topbar-notification-dot {
  background: var(--accent);
}

.topbar-notification-dismiss {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 8px 6px 0 0;
  border: 1px solid transparent;
  border-radius: var(--radius-2);
  background: transparent;
  color: var(--muted);
}

.topbar-notification-dismiss:hover {
  border-color: var(--line);
  background: #fff;
  color: var(--nav);
}

.topbar-notification-dismiss svg {
  width: 14px;
  height: 14px;
}

.topbar-notification-body {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.topbar-notification-title,
.topbar-notification-message,
.topbar-notification-meta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-notification-title {
  font-size: 13px;
  font-weight: 600;
}

.topbar-notification-message {
  font-size: 12px;
  color: #425466;
}

.topbar-notification-meta {
  font-size: 11px;
  color: var(--muted);
}

.topbar-user-menu {
  position: relative;
  min-width: 0;
}

.topbar-user-button {
  min-height: 34px;
  max-width: 260px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-2);
  background: transparent;
  color: var(--text);
  padding: 4px 8px;
  font-weight: 500;
}

.topbar-user-button:hover,
.topbar-user-menu.open .topbar-user-button {
  background: var(--surface-2);
  border-color: var(--line);
}

.topbar-user-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-user-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  width: min(320px, calc(100vw - 32px));
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-3);
  background: #fff;
  box-shadow: var(--shadow-menu);
}

.topbar-user-card {
  display: grid;
  gap: 4px;
  padding: 4px 4px 10px;
  border-bottom: 1px solid var(--line);
}

.topbar-user-select {
  gap: 5px;
  min-height: auto;
}

.topbar-user-select select {
  min-height: var(--control-md);
  height: var(--control-md);
}

.menu-action {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: var(--radius-2);
  background: transparent;
  color: var(--text);
  padding: 7px 8px;
  text-align: left;
}

.menu-action:hover {
  background: var(--surface-2);
}

.content {
  padding: 18px 24px 32px;
  gap: 14px;
}

.panel {
  border: 1px solid var(--line);
  border-radius: var(--radius-2);
  box-shadow: none;
  padding: 14px;
  background: #fff;
}

.panel.tight {
  padding: 0;
}

.section-header {
  align-items: center;
  margin-bottom: 10px;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
}

.section-caption {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

label {
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

input,
select,
textarea {
  min-height: var(--control-lg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-1);
  padding: 8px 10px;
  background: #fff;
  color: var(--text);
}

textarea {
  min-height: 76px;
}

input:focus,
select:focus,
textarea:focus,
button:focus-visible {
  outline: 2px solid rgba(0, 114, 206, 0.22);
  outline-offset: 1px;
  border-color: var(--accent-2);
}

.button {
  min-height: var(--control-md);
  border-radius: var(--radius-2);
  padding: 7px 12px;
  gap: 7px;
  font-size: 13px;
  font-weight: 500;
}

.button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}

.button.primary:hover {
  background: #101774;
  border-color: #101774;
}

.button.compact {
  min-height: var(--control-sm);
  border-radius: var(--radius-2);
  padding: 5px 9px;
}

.button.icon {
  width: var(--control-md);
  min-height: var(--control-md);
  border-radius: var(--radius-2);
}

.button.status-state {
  border-radius: var(--radius-2);
  font-weight: 600;
}

.badge {
  min-height: 22px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.badge.gray {
  background: #eef0f3;
  color: #596273;
}

.badge.purple {
  background: #eef2ff;
  color: var(--nav);
}

.badge.green {
  background: #e7f5ee;
  color: #16633d;
}

.badge.amber {
  background: #fff3d6;
  color: #865b11;
}

.badge.red {
  background: #ffe8ea;
  color: #9f1f2a;
}

.badge.blue {
  background: #e8f3ff;
  color: #005a9f;
}

.avatar,
.compact-user-code {
  border-radius: var(--radius-2);
  background: #eef2ff;
  color: var(--nav);
  font-weight: 700;
}

.code-chip {
  min-width: 58px;
  height: 26px;
  border-radius: var(--radius-2);
  background: #f4f6f8;
  border-color: var(--line);
  color: #344054;
  font-family: inherit;
  font-weight: 600;
}

.table-wrap {
  max-height: max(320px, calc(100vh - 230px));
  border-top: 1px solid var(--line);
}

table {
  border-collapse: separate;
  border-spacing: 0;
}

th,
td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}

th {
  background: var(--surface-2);
  color: #475467;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
}

tbody tr:hover {
  background: #fafbfc;
}

.numeric,
.matrix-cell-value,
.matrix-hour-input,
.project-approval-metric,
.role-hours-value,
.metric-value,
.result-extra-cost-total,
.result-cost-total {
  font-variant-numeric: tabular-nums;
}

.metric-grid {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}

.metric {
  min-height: 82px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent-2);
  border-radius: var(--radius-2);
  padding: 12px;
}

.metric-label {
  font-size: 12px;
}

.metric-value {
  margin-top: 8px;
  font-size: 22px;
  font-weight: 600;
}

.metric-note {
  font-size: 12px;
}

.toolbar > .button,
.toolbar > .badge,
.toolbar input,
.toolbar select,
.section-toolbar .button,
.section-toolbar select,
.section-toolbar input {
  min-height: var(--control-md);
  height: var(--control-md);
}

.inline-week-controls {
  gap: 6px;
}

.week-range-picker {
  min-height: 30px;
  padding: 0 4px;
  font-size: 13px;
  font-weight: 500;
}

.week-nav-button {
  width: 28px;
  min-width: 28px;
  min-height: 30px;
  height: 30px;
}

.week-status-actions {
  gap: 6px;
}

.my-time-command-bar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-2);
  background: #fff;
}

.my-time-command-main {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.command-eyebrow {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0;
}

.command-title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}

.command-week {
  display: inline-flex;
  align-items: center;
}

.my-time-command-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}

.my-time-command-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.my-time-command-actions .week-status-actions {
  flex-wrap: nowrap;
}

.time-matrix-panel {
  padding: 0;
  overflow: hidden;
}

.time-matrix-toolbar {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 7px 12px;
  border-bottom: 0;
  background: #fff;
}

.time-matrix-toolbar .button {
  min-height: 30px;
  color: var(--muted);
}

.time-matrix-toolbar .button.primary {
  background: #f5f7ff;
  border-color: #d9defb;
  color: var(--nav);
}

.time-matrix-panel .workload-scroll {
  border: 0;
  border-radius: 0;
}

.details-panel summary {
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  font-weight: 600;
}

.details-panel:not([open]) summary {
  border-bottom: 0;
}

.details-panel-content {
  padding: 0;
}

.time-import-modal {
  width: min(720px, calc(100vw - 48px));
}

.time-export-modal {
  width: min(560px, calc(100vw - 48px));
}

.time-import-modal .modal-header,
.time-export-modal .modal-header {
  margin: 0;
  padding: 16px;
}

.time-export-modal .admin-time-export-controls {
  justify-content: flex-start;
  padding: 14px 16px 16px;
}

.time-import-body {
  display: grid;
  gap: 10px;
  padding: 14px 16px 16px;
}

.import-actions {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) repeat(4, auto);
  gap: 8px;
  align-items: end;
}

.import-file-summary,
.import-error-panel {
  border-radius: var(--radius-2);
}

.import-error-row {
  border-radius: var(--radius-2);
}

.time-balance-panel {
  padding: 12px 14px;
}

.time-balance-header {
  margin-bottom: 10px;
}

.time-balance-grid {
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
}

.time-balance-item {
  min-height: 58px;
  border-radius: var(--radius-2);
  border-left-width: 3px;
  padding: 8px 10px;
}

.time-balance-label {
  font-weight: 600;
}

.time-balance-value {
  margin-top: 4px;
  font-size: 18px;
  font-weight: 600;
}

.time-balance-note {
  margin-top: 3px;
  font-size: 11px;
}

.workload-panel {
  padding: 14px;
}

.workload-scroll {
  max-height: max(380px, calc(100vh - 244px));
  border-radius: var(--radius-2);
  background: #fff;
}

.workload-matrix-row {
  grid-template-columns: minmax(390px, 1fr) repeat(var(--day-count), 104px) 78px;
}

.workload-matrix.has-timer .workload-matrix-row {
  grid-template-columns: minmax(390px, 1fr) 104px repeat(var(--day-count), 104px) 78px;
}

.project-approval-matrix .workload-matrix-row {
  grid-template-columns: minmax(390px, 1fr) repeat(var(--day-count), 104px) 78px;
}

.workload-header-cell {
  min-height: 42px;
  padding: 8px 10px;
  font-weight: 600;
  background: var(--surface-2);
}

.workload-user-summary-cell {
  padding: 6px 10px;
}

.workload-expand {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-1);
}

.workload-user-main {
  grid-template-columns: minmax(130px, 1fr) 58px 98px auto;
}

.workload-day-total,
.workload-summary-cell,
.workload-week-total,
.workload-row-total,
.workload-timer-summary,
.workload-add-hint {
  min-height: 38px;
  font-weight: 600;
}

.workload-project-row,
.workload-project-summary-row {
  min-height: 38px;
}

.workload-description-row {
  min-height: 30px;
}

.workload-project-cell {
  gap: 8px;
  padding: 5px 9px 5px 34px;
}

.workload-project-summary-row .workload-project-cell {
  padding-left: 10px;
}

.workload-project-title {
  font-weight: 600;
}

.matrix-cell-value {
  min-height: 26px;
  padding: 3px 9px;
  font-weight: 600;
}

.matrix-hour-input,
.matrix-row-description-input {
  min-height: 26px;
  height: 26px;
  border-radius: var(--radius-1);
  padding: 3px 9px;
  font-weight: 400;
}

.workload-description-row:not(.project-approval-user-row) .matrix-cell-value,
.workload-description-row:not(.project-approval-user-row) .matrix-hour-input,
.workload-description-row:not(.project-approval-user-row) .matrix-row-description-input,
.project-approval-line-row .project-approval-type {
  min-height: 23px;
  height: 23px;
  padding-top: 2px;
  padding-bottom: 2px;
  font-weight: 400;
}

.workload-project-row.chargeable .workload-project-cell,
.workload-project-row.chargeable .workload-timer-cell,
.workload-project-row.chargeable .workload-summary-cell,
.workload-project-row.chargeable .workload-input-cell,
.workload-project-row.chargeable .workload-row-total {
  background: var(--tv-charge-row);
}

.workload-project-row.noncharge .workload-project-cell,
.workload-project-row.noncharge .workload-timer-cell,
.workload-project-row.noncharge .workload-summary-cell,
.workload-project-row.noncharge .workload-input-cell,
.workload-project-row.noncharge .workload-row-total {
  background: var(--tv-other-row);
}

.workload-project-row.nonwork .workload-project-cell,
.workload-project-row.nonwork .workload-timer-cell,
.workload-project-row.nonwork .workload-summary-cell,
.workload-project-row.nonwork .workload-input-cell,
.workload-project-row.nonwork .workload-row-total {
  background: var(--tv-off-row);
}

.project-approval-matrix .project-approval-summary-row .workload-project-cell,
.project-approval-matrix .project-approval-summary-row .workload-summary-cell,
.project-approval-matrix .project-approval-summary-row .workload-row-total {
  background: #e6f4ed;
}

.project-approval-matrix .project-approval-role-row .workload-project-cell,
.project-approval-matrix .project-approval-role-row .workload-summary-cell,
.project-approval-matrix .project-approval-role-row .workload-row-total {
  background: #edf8f2;
}

.project-approval-matrix .project-approval-user-row .workload-project-cell,
.project-approval-matrix .project-approval-user-row .workload-summary-cell,
.project-approval-matrix .project-approval-user-row .workload-row-total {
  background: #f4fbf7;
}

.project-approval-matrix .project-approval-line-row .workload-project-cell,
.project-approval-matrix .project-approval-line-row .workload-summary-cell,
.project-approval-matrix .project-approval-line-row .workload-row-total {
  background: #fbfefd;
}

.timer-button,
.workload-timer-cell .timer-button,
.plan-task-timer-button {
  border-radius: var(--radius-1);
}

.workload-timer-cell .timer-button.button.icon {
  width: 24px;
  min-width: 24px;
  max-width: 24px;
  height: 24px;
  min-height: 24px;
  padding: 0;
}

.floating-timer {
  border-left-width: 4px;
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-menu);
}

.floating-timer-status,
.floating-timer-project,
.floating-timer-readout {
  font-weight: 600;
}

.plan-hello {
  display: none;
}

.plan-main-panel {
  margin-bottom: 12px;
  padding: 0;
  border-radius: var(--radius-2);
}

.plan-week-title-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.plan-week-header-actions {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.plan-main-tabs {
  gap: 0;
  padding: 0 12px;
  border-bottom: 1px solid var(--line);
}

.plan-main-tab {
  min-height: 40px;
  border: 0;
  border-radius: 0;
  padding: 9px 12px;
  color: var(--muted);
  font-weight: 600;
}

.plan-main-tab:hover {
  border-color: transparent;
  background: transparent;
  color: var(--text);
}

.plan-main-tab.active {
  background: transparent;
  border-color: transparent;
  color: var(--nav);
  box-shadow: inset 0 -2px 0 var(--nav);
}

.plan-tabs {
  gap: 14px;
}

.plan-tab,
.plan-section-title,
.plan-list-group-title,
.clickup-task-title,
.clickup-task-header,
.project-status-role-title {
  font-weight: 600;
}

.plan-list-group {
  border-radius: var(--radius-2);
}

.clickup-task-grid {
  grid-template-columns: minmax(300px, 1.6fr) 90px 126px 112px 120px 116px;
}

.clickup-task-grid > div {
  min-height: 34px;
  padding: 6px 9px;
}

.clickup-add-task-row input,
.clickup-add-task-row select {
  border-radius: var(--radius-1);
}

.plan-task-row {
  min-height: 44px;
}

.plan-task-quick-controls {
  min-width: 298px;
  visibility: hidden;
  display: inline-grid;
  opacity: 0;
}

.plan-task-row:hover .plan-task-quick-controls,
.plan-task-row:focus-within .plan-task-quick-controls {
  visibility: visible;
  opacity: 1;
}

.plan-week-table {
  min-width: 1040px;
}

.plan-person-col {
  width: 226px;
  min-width: 226px;
}

.plan-day-cell {
  width: 150px;
  min-width: 150px;
}

.plan-day-total {
  height: 28px;
  font-weight: 600;
}

.plan-task-chip {
  min-height: 30px;
  border-radius: var(--radius-2);
  box-shadow: inset 0 0 0 1px rgba(149, 160, 151, 0.22);
}

.modal {
  border-radius: var(--radius-3);
  box-shadow: var(--shadow-modal);
}

.modal form {
  padding: 16px;
}

.modal-header {
  padding-bottom: 14px;
  margin-bottom: 14px;
}

.modal-actions {
  margin: 16px -16px -16px;
  padding: 12px 16px;
}

.task-detail-modal {
  width: min(1120px, calc(100vw - 40px));
}

.task-detail-main {
  padding: 20px;
}

.task-detail-title {
  min-height: 40px;
  border-radius: var(--radius-2);
  font-size: 22px;
  font-weight: 600;
}

.task-detail-activity {
  background: var(--surface-2);
}

.project-status-toolbar,
.result-toolbar {
  padding: 12px 14px;
  gap: 8px;
}

.project-status-toolbar label,
.result-toolbar label,
.admin-time-export-controls label {
  font-weight: 600;
}

.project-status-toolbar select,
.result-toolbar select,
.admin-time-export-controls input {
  min-height: var(--control-md);
  border-radius: var(--radius-1);
}

.project-status-details {
  border-radius: var(--radius-2);
  background: var(--surface-2);
}

.project-status-role-card,
.project-status-milestone-item,
.project-expense-item {
  border-radius: var(--radius-2);
}

.project-directory-table,
.result-table {
  font-size: 13px;
}

.result-table {
  min-width: 1420px;
}

.result-extra-cost-total,
.result-cost-total,
.project-expense-amount {
  font-weight: 600;
}

.empty-state {
  padding: 22px;
}

.notice {
  border-radius: var(--radius-2);
}

.team-time-surface {
  display: grid;
  gap: 12px;
}

.team-time-command-bar {
  grid-template-columns: minmax(260px, 0.8fr) minmax(420px, 1.4fr) auto;
}

.team-time-command-controls {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.team-time-search {
  min-width: 210px;
  height: var(--control-md);
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-1);
  background: #fff;
  color: var(--muted);
}

.team-time-search svg {
  width: 15px;
  height: 15px;
}

.team-time-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  padding: 0;
  background: transparent;
}

.team-time-filter-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.team-time-filter {
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.team-time-filter:hover {
  border-color: var(--line);
  background: var(--surface-2);
  color: var(--text);
}

.team-time-filter.active {
  border-color: #d9defb;
  background: #f5f7ff;
  color: var(--nav);
}

.team-time-summary-strip {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 12px;
}

.team-time-panel {
  padding: 0;
  overflow: hidden;
}

.team-time-tabs {
  min-height: 42px;
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.team-time-tab {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0 14px;
  color: var(--muted);
  font-weight: 600;
}

.team-time-tab span {
  min-width: 22px;
  min-height: 20px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 11px;
}

.team-time-tab.active {
  color: var(--nav);
  box-shadow: inset 0 -2px 0 var(--nav);
}

.team-time-tab.active span {
  background: var(--nav-soft);
  color: var(--nav);
}

.team-time-panel-toolbar,
.team-selection-bar,
.team-edit-notice {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.team-selection-bar {
  background: #f5f7ff;
  color: var(--nav);
  font-weight: 600;
}

.team-edit-notice {
  background: #fffaf0;
  color: #5f4700;
}

.team-edit-notice-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.team-chargeability-table {
  width: min(100%, 1060px);
  overflow-x: auto;
  background: #fff;
  border-right: 1px solid var(--line);
}

.team-chargeability-row {
  min-width: 940px;
  min-height: 44px;
  display: grid;
  grid-template-columns: minmax(260px, 300px) 132px 118px 118px 118px 124px;
  align-items: center;
  column-gap: 18px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  font-size: 13px;
}

.team-chargeability-header {
  min-height: 40px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.team-chargeability-row .numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.team-chargeability-person {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.team-chargeability-person .team-user-identity {
  min-width: 0;
}

.team-time-panel .workload-scroll {
  border-radius: 0;
  border: 0;
  max-height: calc(100vh - 282px);
}

.team-time-matrix {
  min-width: 1040px;
}

.team-time-matrix .workload-matrix-row {
  grid-template-columns: minmax(620px, 1fr) repeat(var(--day-count), 74px) 70px;
}

.team-people-panel .team-time-matrix {
  width: max-content;
  min-width: 0;
  border-right: 1px solid var(--line);
}

.team-people-panel .team-time-matrix .workload-matrix-row {
  grid-template-columns: 730px repeat(var(--day-count), 74px) 70px;
}

.team-time-matrix .workload-user-summary-cell {
  min-width: 0;
  padding: 7px 10px;
  overflow: visible;
}

.team-time-matrix .workload-user-summary {
  position: relative;
  z-index: 2;
}

.team-time-matrix .workload-user-summary.editing-on-behalf .workload-user-summary-cell {
  background: #f4f8ff;
  box-shadow: inset 3px 0 0 var(--nav);
}

.team-time-matrix .workload-user-summary.editing-on-behalf .team-user-name {
  color: var(--nav);
}

.team-time-matrix .workload-user-summary:has(.team-row-menu[open]) {
  z-index: 30;
}

.team-workload-user-main {
  grid-template-columns: minmax(0, 1fr) 48px 86px;
  align-items: center;
  gap: 6px;
}

.team-workload-user-main.has-actions {
  grid-template-columns: minmax(220px, 1fr) 48px 86px 242px;
}

.team-user-identity {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
}

.team-user-identity .avatar {
  flex: 0 0 28px;
}

.team-user-progress-slot,
.team-user-status,
.team-user-action-line {
  min-width: 0;
  display: flex;
  align-items: center;
}

.team-user-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.team-user-hours {
  text-align: right;
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.team-user-progress-slot,
.team-user-status {
  justify-content: center;
}

.team-user-progress.badge,
.team-user-status .badge {
  width: 100%;
  min-width: 46px;
  justify-content: center;
}

.team-user-action-line {
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 7px;
  width: 100%;
  min-height: 34px;
  min-width: 0;
  overflow: visible;
}

.team-user-action-line .admin-reviewed-badge {
  width: 96px;
  min-width: 96px;
  justify-content: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-user-action-line .review-week-button,
.team-user-action-line .reopen-week-button,
.team-user-action-line .edit-on-behalf-button.active {
  width: 96px;
  min-width: 96px;
  justify-content: center;
}

.team-user-action-line .team-row-menu,
.team-user-action-line .team-edit-on-behalf-icon {
  flex: 0 0 34px;
}

.edit-on-behalf-button {
  min-height: 28px;
  padding: 4px 9px;
  border-radius: 999px;
  color: var(--muted);
  white-space: nowrap;
}

.edit-on-behalf-button.active {
  color: var(--nav);
  border-color: #d9defb;
  background: #f5f7ff;
}

.team-submit-on-behalf-button {
  min-height: 28px;
  padding: 4px 9px;
  font-size: 12px;
  white-space: nowrap;
}

.team-row-menu {
  position: relative;
  z-index: 1;
}

.team-row-menu[open] {
  z-index: 40;
}

.team-row-menu > summary {
  list-style: none;
}

.team-row-menu > summary::-webkit-details-marker {
  display: none;
}

.team-row-menu-content {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 50;
  min-width: 132px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-2);
  background: #fff;
  box-shadow: var(--shadow-menu);
}

.team-row-menu-content .button {
  width: 100%;
  justify-content: flex-start;
}

.team-review-select {
  width: 18px;
  min-width: 18px;
  display: grid;
  place-items: center;
}

.team-review-select input {
  width: 14px;
  height: 14px;
}

.team-projects-panel .project-approval-matrix {
  min-width: 966px;
}

.team-projects-panel .project-approval-matrix .workload-matrix-row {
  grid-template-columns: minmax(430px, 1fr) repeat(var(--day-count), 92px) 76px;
}

.team-projects-panel .project-approval-summary-row .workload-project-cell,
.team-projects-panel .project-approval-summary-row .workload-summary-cell,
.team-projects-panel .project-approval-summary-row .workload-row-total {
  background: #edf6f1;
}

.team-projects-panel .project-approval-role-row .workload-project-cell,
.team-projects-panel .project-approval-role-row .workload-summary-cell,
.team-projects-panel .project-approval-role-row .workload-row-total,
.team-projects-panel .project-approval-user-row .workload-project-cell,
.team-projects-panel .project-approval-user-row .workload-summary-cell,
.team-projects-panel .project-approval-user-row .workload-row-total,
.team-projects-panel .project-approval-line-row .workload-project-cell,
.team-projects-panel .project-approval-line-row .workload-summary-cell,
.team-projects-panel .project-approval-line-row .workload-row-total {
  background: #fff;
}

.team-projects-panel .project-approval-role-row .workload-project-cell {
  padding-left: 28px;
}

.team-projects-panel .project-approval-user-row .workload-project-cell {
  padding-left: 48px;
}

.team-projects-panel .project-approval-line-row .workload-project-cell {
  padding-left: 70px;
}

@media (max-width: 1280px) {
  .team-time-command-bar {
    grid-template-columns: 1fr;
  }

  .team-time-summary-strip,
  .team-time-command-controls {
    justify-content: flex-start;
  }

  .team-time-matrix {
    min-width: 978px;
  }

  .team-time-matrix .workload-matrix-row {
    grid-template-columns: minmax(600px, 1fr) repeat(var(--day-count), 62px) 68px;
  }

  .team-people-panel .team-time-matrix {
    width: max-content;
    min-width: 0;
  }

  .team-people-panel .team-time-matrix .workload-matrix-row {
    grid-template-columns: 730px repeat(var(--day-count), 68px) 70px;
  }

  .team-projects-panel .project-approval-matrix {
    min-width: 888px;
  }

  .team-projects-panel .project-approval-matrix .workload-matrix-row {
    grid-template-columns: minmax(380px, 1fr) repeat(var(--day-count), 86px) 78px;
  }
}

@media (max-width: 1080px) {
  .app-shell {
    grid-template-columns: 208px minmax(0, 1fr);
  }

  .sidebar {
    top: 0;
    height: 100vh;
    padding: 14px 10px;
  }

  .brand {
    justify-content: flex-start;
    gap: 10px;
    padding: 4px 4px 14px;
  }

  .brand > div {
    padding-left: 10px;
  }

  .brand-logo {
    width: 108px;
    min-width: 108px;
  }

  .brand-title {
    font-size: 13px;
  }

  .nav-button {
    justify-content: flex-start;
    gap: 9px;
  }

  .nav-button span {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }

  .my-time-command-bar {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .my-time-command-meta,
  .my-time-command-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: sticky;
    top: 0;
    z-index: 12;
    height: auto;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .sidebar-controls {
    display: none;
  }

  .brand {
    display: flex !important;
    padding: 0;
    border-bottom: 0;
  }

  .brand-logo {
    width: 92px;
    min-width: 92px;
  }

  .sidebar .brand-title {
    display: none;
  }

  .sidebar .brand > div {
    display: none;
  }

  .nav-group {
    display: flex;
    flex-direction: row;
    gap: 4px;
    overflow-x: auto;
    padding-bottom: 0;
  }

  .nav-button {
    width: auto;
    min-width: 38px;
    height: 36px;
    padding: 0 9px;
  }

  .nav-button span {
    display: none;
  }

  .nav-button.active {
    box-shadow: inset 0 -3px 0 var(--nav);
  }

  .topbar {
    min-height: auto;
    padding: 10px 14px;
    align-items: stretch;
    flex-direction: column;
  }

  .topbar-user-dropdown {
    left: 0;
    right: auto;
  }

  .content {
    padding: 12px 12px 24px;
  }

  .my-time-command-main,
  .my-time-command-actions,
  .week-status-actions {
    flex-wrap: wrap;
  }

  .import-actions {
    grid-template-columns: 1fr;
  }

  .time-balance-grid,
  .metric-grid {
    grid-template-columns: 1fr;
  }

  .team-time-command-controls,
  .team-time-summary-strip,
  .team-time-panel-toolbar,
  .team-selection-bar,
  .team-edit-notice {
    align-items: stretch;
    flex-direction: column;
  }

  .team-time-search {
    width: 100%;
  }

  .team-time-filter-group {
    width: 100%;
  }

  .team-people-panel .workload-scroll {
    max-height: none;
    overflow: visible;
  }

  .team-people-panel .team-time-matrix {
    width: 100%;
    min-width: 0;
    border-right: 0;
  }

  .team-people-panel .workload-header-row {
    display: none;
  }

  .team-people-panel .workload-matrix-row {
    display: block;
  }

  .team-people-panel .workload-user-summary {
    border-bottom: 1px solid var(--line);
  }

  .team-people-panel .workload-user-summary-cell,
  .team-people-panel .workload-project-cell {
    position: static;
    border-right: 0;
  }

  .team-people-panel .team-workload-user-main {
    grid-template-columns: 1fr;
  }

  .team-people-panel .team-user-action-line {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .team-people-panel .workload-day-total,
  .team-people-panel .workload-week-total,
  .team-people-panel .workload-summary-cell,
  .team-people-panel .workload-row-total {
    display: none;
  }

  .team-people-panel .workload-project-cell {
    padding-left: 44px;
  }

  .project-status-role-grid,
  .project-status-milestones,
  .project-status-team {
    grid-template-columns: 1fr;
  }

  .plan-main-tabs {
    overflow-x: auto;
  }

  .task-detail-shell {
    grid-template-columns: 1fr;
  }

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

  .task-detail-fields {
    grid-template-columns: 1fr;
  }

  .task-detail-repeat-field.active {
    grid-template-columns: 1fr;
  }

  .modal-backdrop {
    padding: 14px;
  }

  .modal,
  .compact-modal,
  .task-detail-modal {
    width: calc(100vw - 28px);
    max-height: calc(100vh - 28px);
  }

  .floating-timer-stack {
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
  }
}

@media (max-width: 430px) {
  .topbar h1 {
    font-size: 18px;
  }

  .command-title {
    font-size: 18px;
  }

  .my-time-command-bar {
    padding: 10px;
  }

  .button {
    max-width: 100%;
  }

  .topbar-user-name {
    max-width: 160px;
  }
}

.project-create-panel,
.user-create-panel {
  padding: 0;
  overflow: hidden;
}

.project-create-panel summary,
.user-create-panel summary {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  cursor: pointer;
  font-weight: 600;
  border-bottom: 0;
}

.project-create-panel[open] summary,
.user-create-panel[open] summary {
  border-bottom: 1px solid var(--line);
}

.project-create-header,
.user-create-header {
  padding: 14px 14px 0;
}

.project-create-panel form,
.user-create-panel form {
  padding: 0 14px 14px;
}

.plan-task-row {
  grid-template-columns: 18px minmax(0, 1fr) 58px minmax(332px, 360px);
  min-height: 42px;
  padding: 6px 0;
}

.plan-task-row.plan-task-edit-row {
  grid-template-columns: 18px minmax(0, 1fr) 150px;
}

.plan-task-side {
  display: grid;
  grid-template-columns: 32px 92px 68px 58px 34px;
  align-items: center;
  justify-items: end;
  gap: 8px;
}

.plan-task-date {
  min-width: 92px;
  text-align: right;
}

.plan-task-quick-controls {
  width: 298px;
  min-height: 26px;
}

.plan-task-row > .plan-task-side .plan-task-actions {
  min-width: 74px;
  min-height: 30px;
}

@media (max-width: 760px) {
  .plan-task-row {
    grid-template-columns: 18px minmax(0, 1fr);
  }

  .plan-task-row.plan-task-edit-row {
    grid-template-columns: 18px minmax(0, 1fr);
  }

  .plan-task-assignee-cell {
    grid-column: 2;
    justify-self: start;
    place-items: start;
  }

  .plan-task-side {
    grid-column: 2;
    justify-content: flex-start;
    justify-items: start;
    grid-template-columns: 32px 92px 68px 58px 34px;
  }

  .plan-task-quick-controls {
    width: 100%;
  }
}

/* Final Projects Status compactness overrides. Keep after late theme overrides. */
.project-status-grid-row > div {
  padding: 6px 8px;
}

.project-status-grid-row > .project-status-role-cell {
  padding-inline: 4px;
}

.project-status-details .project-status-milestones {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(5, minmax(240px, 1fr));
  gap: 4px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.project-status-details .project-status-milestone-item {
  min-width: 240px;
}

.project-status-risk {
  gap: 3px;
}

.project-status-risk-badges {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.project-status-risk-badges .badge {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-status-risk .project-next-milestone {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.project-status-risk .project-next-milestone span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-notes-panel {
  display: grid;
  gap: 0;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-2);
  background: #ffffff;
}

.project-notes-panel.expanded {
  gap: 8px;
}

.project-notes-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;
  align-items: center;
  gap: 10px;
}

.project-notes-toggle {
  width: 100%;
  min-height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.project-notes-toggle-main {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  min-width: 0;
}

.project-notes-toggle svg {
  width: 15px;
  height: 15px;
  color: var(--muted);
}

.project-notes-title {
  font-size: 13px;
  font-weight: 600;
}

.project-notes-filter {
  display: grid;
  gap: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
}

.project-notes-filter select {
  min-height: 30px;
  padding: 5px 8px;
  border-radius: var(--radius-1);
  font-size: 12px;
}

.project-note-form,
.project-note-edit-form {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) auto;
  align-items: start;
  gap: 7px;
}

.project-note-form select,
.project-note-edit-form select,
.project-note-form textarea,
.project-note-edit-form textarea {
  min-height: 32px;
  padding: 6px 8px;
  border-radius: var(--radius-1);
  font-size: 13px;
}

.project-note-form textarea,
.project-note-edit-form textarea {
  min-height: 34px;
  max-height: 120px;
  resize: vertical;
}

.project-note-list {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}

.project-note-item {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr) 210px 68px;
  /* The note itself may run over several lines, so the type, the author and the buttons line up
     with its first line instead of floating in the middle of it (Katarzyna, 2026-09-16). */
  align-items: start;
  gap: 8px;
  min-height: 36px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}

.project-note-item:last-child {
  border-bottom: 0;
}

.project-note-type {
  justify-self: start;
  max-width: 128px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-note-meta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A note is written to be read, so it is shown whole: it wraps onto as many lines as it needs and
   keeps the line breaks the person typed (Katarzyna, 2026-09-16: «kai Projects irasau kazkoki
   Note, tai tekstas netelpa»). Before, it was cut off after one line with an ellipsis. */
.project-note-text {
  min-width: 0;
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.5;
}

.project-note-meta {
  color: var(--muted);
  font-size: 11px;
}

.project-note-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  min-width: 0;
}

.project-note-empty {
  min-height: 32px;
  padding: 8px 0 2px;
  color: var(--muted);
  font-size: 12px;
}

@media (max-width: 920px) {
  .project-note-form,
  .project-note-edit-form,
  .project-note-item {
    min-width: 760px;
  }

  .project-notes-heading {
    min-width: 760px;
  }

  .project-notes-panel {
    overflow-x: auto;
  }
}

.project-status-risk .project-next-milestone span:first-child {
  flex: 0 0 auto;
  max-width: 58px;
}

.project-status-budget-compact {
  gap: 3px;
}

.project-status-budget-left-cell {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.project-status-budget-left-cell .badge {
  min-width: 48px;
  justify-content: center;
}

.project-status-budget-line.secondary {
  line-height: 1.1;
}

.project-status-completion-cell .project-completion-readonly {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 2px;
}

.project-status-main-row .project-completion-status {
  display: block;
  max-width: 100%;
  font-size: 11px;
  line-height: 1.1;
}

.project-status-completion-cell .project-completion-control {
  align-items: flex-start;
  gap: 4px;
}

.project-status-completion-cell .project-completion-input-wrap {
  width: auto;
  max-width: 74px;
  display: grid;
  grid-template-columns: 54px 14px;
  align-items: center;
  justify-content: start;
  gap: 3px;
}

.project-status-completion-cell .project-completion-actions {
  width: 112px;
  max-width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 4px;
}

.project-status-completion-cell .project-completion-save-button {
  width: 100%;
  min-width: 0;
  min-height: 28px;
  height: 28px;
  padding: 3px 6px;
  justify-content: center;
}

.project-status-grid-head > div,
.project-status-main-row > div {
  text-align: left;
}

.project-status-main-row .project-status-budget-compact,
.project-status-main-row .project-status-budget-left-cell,
.project-status-main-row .project-status-deadline,
.project-status-main-row .project-status-billing,
.project-status-main-row .project-completion-readonly,
.project-status-main-row .project-completion-control,
.project-status-main-row .project-status-role-owner-list {
  justify-items: start;
  justify-content: flex-start;
  align-items: flex-start;
  text-align: left;
}

.project-status-owner-cell .project-status-team {
  gap: 3px;
}

.project-status-team-codes span {
  height: 20px;
  min-width: 22px;
  padding: 0 5px;
}

/* Remaining SaaS screens polish: Result, Users, Directories, Plan, Submission status. */
.result-toolbar {
  display: grid;
  grid-template-columns: minmax(180px, 1.4fr) repeat(3, minmax(130px, 1fr));
  align-items: end;
  gap: 8px;
}

.users-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) repeat(3, minmax(140px, 1fr)) auto;
  align-items: end;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}

.result-toolbar input,
.result-toolbar select,
.users-toolbar input,
.users-toolbar select {
  width: 100%;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 6px 9px;
  background: #fff;
  color: var(--text);
  font-size: 13px;
}

.result-table-wrap,
.users-table-wrap,
.directories-table-wrap {
  max-width: 100%;
  overflow-x: visible;
}

.result-table-wrap {
  padding: 0 16px 56px;
}

.result-table,
.users-table,
.directories-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
  font-size: 13px;
}

.result-table th,
.result-table td,
.users-table th,
.users-table td,
.directories-table th,
.directories-table td {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.result-table td,
.users-table td,
.directories-table td {
  height: 58px;
}

.result-table .result-cost-cell,
.users-table td:last-child,
.directories-table td:last-child {
  overflow: visible;
}

.result-header {
  align-items: center;
  padding: 16px 16px 0;
}

.section-title-count {
  color: var(--muted);
  font-weight: 600;
}

.result-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: max-content;
}

.result-col-project {
  width: 22%;
}

.result-col-code {
  width: 8%;
}

.result-col-money {
  width: 10%;
}

.result-col-completion,
.result-col-margin {
  width: 8%;
}

.result-col-other-cost {
  width: 14%;
}

.result-other-cost-head {
  min-width: 118px;
  white-space: nowrap;
}

.result-col-signals {
  width: 10%;
}

.result-project-cell,
.users-person-cell {
  display: table-cell;
}

.result-table td {
  height: 44px;
  padding-top: 7px;
  padding-bottom: 7px;
}

.result-project-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  white-space: nowrap;
}

.users-person-name {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.result-project-title {
  display: block;
  min-width: 0;
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.result-project-code {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.result-project-code-cell {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.result-cost-cell {
  position: relative;
  text-align: right;
  vertical-align: middle;
}

.result-other-cost-main {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 84px;
}

.result-cost-details {
  position: relative;
  margin-top: 0;
  text-align: right;
}

.result-cost-details > summary {
  list-style: none;
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
  cursor: pointer;
}

.result-cost-details > summary::-webkit-details-marker {
  display: none;
}

.result-cost-details[open] {
  z-index: 30;
}

.result-cost-popover {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: min(430px, calc(100vw - 56px));
  text-align: left;
  padding: 30px 8px 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  box-shadow: var(--shadow);
  z-index: 31;
}

/* The last rows' details open upwards so they are fully visible (Katarzyna, 2026-09-29). */
.result-cost-details.open-up .result-cost-popover {
  top: auto;
  bottom: calc(100% + 6px);
}

/* Room for the expense type: the popover is a little wider, fields stay on one line. */
.result-cost-popover {
  width: min(560px, calc(100vw - 56px));
}

.result-cost-popover .project-expense-form {
  grid-template-columns: 84px 84px 110px minmax(0, 1fr) 34px;
}

.result-cost-popover .project-expense-item {
  grid-template-columns: minmax(0, 1fr) 84px 110px auto auto;
}

.project-expense-kind-select {
  width: 110px;
  min-height: 26px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 3px 6px;
  background: #ffffff;
  color: var(--text);
  font: inherit;
  font-size: 12px;
}

.result-cost-close.button.icon {
  position: absolute;
  top: 1px;
  right: 1px;
  width: 18px;
  min-width: 18px;
  min-height: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.result-cost-close svg {
  width: 12px;
  height: 12px;
}

.result-cost-popover .project-expense-list:first-child,
.result-cost-popover .project-expense-form:first-child {
  margin-top: 0;
}

.result-cost-popover .project-expense-form {
  margin-top: 8px;
}

.timer-entry-times {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}

.result-signal-list.compact {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
}

.result-signal-list.compact .badge {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.result-completion-missing {
  color: #9a6a00;
  font-weight: 400;
}

/* Compact filters for Projects Status and Result. */
.project-status-toolbar,
.result-toolbar {
  min-height: 0;
  padding: 8px 16px;
  gap: 8px;
  align-items: end;
}

.project-status-toolbar {
  grid-template-columns: minmax(0, 1fr) max-content;
}

.project-status-filter-group {
  grid-template-columns: minmax(150px, 1fr) minmax(118px, 0.7fr) minmax(160px, 0.95fr) minmax(172px, 0.95fr);
  gap: 8px;
}

.project-status-export-group {
  min-width: 0;
  grid-template-columns: minmax(220px, 280px) auto;
  gap: 6px;
  padding: 0 0 0 12px;
  border-left: 1px solid var(--line);
}

.result-toolbar {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(132px, 0.75fr) minmax(160px, 0.9fr) minmax(112px, 0.55fr);
}

.project-status-toolbar label,
.result-toolbar label {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: #667085;
  font-size: 11px;
  line-height: 14px;
  font-weight: 500;
  white-space: nowrap;
}

.project-status-toolbar input,
.project-status-toolbar select,
.result-toolbar input,
.result-toolbar select {
  min-height: 30px;
  height: 30px;
  border-radius: 5px;
  padding-top: 4px;
  padding-bottom: 4px;
  font-size: 12px;
}

.project-status-toolbar select,
.result-toolbar select {
  padding-right: 24px;
}

.project-status-toolbar .button,
.result-toolbar .button {
  min-height: 30px;
  height: 30px;
  padding: 4px 10px;
}

.project-status-command-top {
  padding-bottom: 10px;
}

.result-header {
  padding-bottom: 8px;
}

.users-header,
.directories-header {
  padding: 16px 16px 10px;
}

.users-header-actions,
.directories-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.invite-link-notice {
  display: grid;
  gap: 8px;
  margin: 0 16px 12px;
}

.invite-link-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* An invitation link the server no longer accepts (2026-10-08): said plainly, under "Create new link". */
.invite-link-expired {
  color: #b54708;
}

.invite-link-input {
  flex: 1 1 auto;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

@media (max-width: 760px) {
  .invite-link-row {
    align-items: stretch;
    flex-direction: column;
  }
}

.user-action-drawer,
.directory-action-drawer {
  position: relative;
}

.user-create-panel.user-action-drawer {
  overflow: visible;
}

.user-action-drawer > summary,
.directory-action-drawer > summary {
  list-style: none;
}

.user-action-drawer > summary::-webkit-details-marker,
.directory-action-drawer > summary::-webkit-details-marker {
  display: none;
}

.user-action-drawer-body {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 30;
  width: min(720px, calc(100vw - 320px));
  max-height: min(78vh, 720px);
  overflow: auto;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
}

.admin-tools-body {
  display: grid;
  gap: 10px;
  width: min(760px, calc(100vw - 320px));
}

.admin-tools-body > .panel {
  margin: 0;
  border-radius: 8px;
  box-shadow: none;
}

.form-section-title {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
}

.inline-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
}

.users-col-person {
  width: 30%;
}

.users-col-role {
  width: 12%;
}

.users-col-access {
  width: 17%;
}

.users-col-invitation {
  width: 15%;
}

.users-col-capacity {
  width: 8%;
}

.users-col-status {
  width: 11%;
}

.users-col-actions {
  width: 7%;
}

.users-table .row-action-menu,
.directories-table .row-action-menu {
  display: inline-flex;
}

.directories-col-code {
  width: 14%;
}

.directories-col-description {
  width: 58%;
}

.directories-col-type {
  width: 18%;
}

.directories-col-actions {
  width: 10%;
}

.directories-panel {
  overflow: visible;
}

.plan-more-tasks {
  width: 100%;
  border: 1px dashed var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--muted);
  padding: 4px 6px;
  font-size: 12px;
  font-weight: 700;
  text-align: left;
}

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

  .result-header {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .result-table-wrap {
    overflow-x: auto;
  }

  .result-table {
    min-width: 1080px;
  }

  .result-count,
  .users-toolbar .badge {
    justify-self: start;
  }
}

@media (max-width: 760px) {
  .visibility-role-group .users-visible-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .result-toolbar,
  .users-toolbar {
    grid-template-columns: 1fr;
  }

  .result-table-wrap,
  .users-table-wrap,
  .directories-table-wrap {
    overflow-x: auto;
  }

  .result-table,
  .users-table,
  .directories-table {
    min-width: 760px;
  }

  .user-action-drawer-body {
    position: fixed;
    left: 12px;
    right: 12px;
    top: 96px;
    width: auto;
    max-height: calc(100vh - 120px);
  }
}

/* Plan module professional workload/list polish. */
.plan-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.plan-workload-toolbar {
  position: relative;
  z-index: 60;
  display: grid;
  grid-template-columns: minmax(240px, 340px) auto;
  align-items: end;
  gap: 10px;
  padding: 12px 16px 8px;
}

.team-workload-panel {
  overflow: visible;
  background: #ffffff;
}

.plan-workload-filter-field {
  min-width: 0;
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.plan-workload-filter-field select {
  min-width: 0;
}

.plan-workload-people-filter {
  position: relative;
  min-width: 0;
}

.plan-workload-people-filter > summary {
  min-height: 36px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16px;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-1);
  background: #fff;
  padding: 4px 10px;
  color: var(--text);
  cursor: pointer;
  list-style: none;
}

.plan-workload-people-filter > summary::-webkit-details-marker {
  display: none;
}

.plan-workload-people-filter > summary span {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.plan-workload-people-filter > summary strong,
.plan-workload-people-filter > summary small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plan-workload-people-filter > summary small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.plan-workload-people-menu {
  position: absolute;
  z-index: 95;
  top: calc(100% + 6px);
  left: 0;
  width: min(360px, calc(100vw - 40px));
  max-height: 380px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--radius-2);
  background: #fff;
  box-shadow: var(--shadow-menu);
  padding: 8px;
}

.plan-workload-people-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}

.plan-workload-people-bulk-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.plan-workload-people-list {
  max-height: 310px;
  overflow-y: auto;
  padding-top: 6px;
}

.plan-workload-person-option {
  min-height: 38px;
  display: grid;
  grid-template-columns: 18px 28px minmax(0, 1fr) 64px;
  align-items: center;
  gap: 8px;
  border-radius: var(--radius-1);
  padding: 5px 7px;
  color: var(--text);
  cursor: pointer;
}

.plan-workload-person-option:hover {
  background: var(--surface-2);
}

.plan-workload-person-option input {
  margin: 0;
}

.plan-workload-person-option-name,
.plan-workload-person-option-meta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plan-workload-person-option-name {
  font-weight: 700;
}

.plan-workload-person-option-meta {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.plan-workload-count {
  justify-self: start;
  align-self: center;
}

@media (max-width: 760px) {
  .plan-workload-toolbar {
    grid-template-columns: 1fr;
  }

  .plan-workload-people-menu {
    width: min(360px, calc(100vw - 32px));
  }
}

.plan-people-picker {
  position: relative;
  min-width: 0;
}

.plan-people-picker-button {
  width: 100%;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid transparent;
  border-radius: var(--radius-1);
  background: transparent;
  color: var(--text);
  padding: 3px 7px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.plan-people-picker-button:hover:not([disabled]),
.plan-people-picker-button:focus-visible {
  border-color: var(--line-strong);
  background: #fff;
  outline: 0;
}

.plan-people-picker-button > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plan-people-picker.compact .plan-people-picker-button {
  width: 34px;
  justify-content: center;
  padding: 2px;
}

.compact-avatar.empty {
  display: inline-grid;
  place-items: center;
  background: var(--surface-2);
  color: var(--muted);
}

.plan-people-picker-menu {
  position: absolute;
  z-index: 80;
  top: calc(100% + 6px);
  left: 0;
  width: min(320px, calc(100vw - 36px));
  max-height: 340px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--radius-2);
  background: #fff;
  box-shadow: var(--shadow-menu);
  padding: 8px;
}

.clickup-task-grid > div:last-child .plan-people-picker-menu,
.task-detail-fields .plan-people-picker-menu {
  right: 0;
  left: auto;
}

.plan-people-picker-search-wrap {
  min-height: 34px;
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-1);
  padding: 0 9px;
  color: var(--muted);
}

.plan-people-picker-search-wrap svg {
  width: 15px;
  height: 15px;
}

.plan-people-picker-search {
  width: 100%;
  border: 0;
  outline: 0;
  padding: 0;
  background: transparent;
  font-size: 13px;
}

.plan-people-picker-list {
  max-height: 282px;
  overflow-y: auto;
  padding-top: 6px;
}

.plan-people-picker-option {
  width: 100%;
  min-height: 38px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 82px 16px;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: var(--radius-1);
  background: transparent;
  padding: 5px 7px;
  color: var(--text);
  text-align: left;
}

.plan-people-picker-option:hover,
.plan-people-picker-option.active {
  background: var(--surface-2);
}

.plan-people-picker-option.selected {
  background: #f5f7ff;
  color: var(--nav);
}

.plan-notify-picker {
  display: grid;
  gap: 8px;
}

.plan-notify-selected {
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: var(--radius-1);
  background: #fff;
}

.plan-notify-chip {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-2);
  background: var(--surface-2);
  padding: 2px 6px 2px 3px;
  font-size: 12px;
  font-weight: 600;
}

.plan-notify-chip button {
  width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: var(--radius-1);
  background: transparent;
  color: var(--muted);
  padding: 0;
}

.plan-notify-chip button:hover {
  background: #fff;
  color: var(--red);
}

.plan-notify-chip svg {
  width: 13px;
  height: 13px;
}

.plan-notify-empty {
  color: var(--muted);
  font-size: 12px;
}

.plan-notify-actions-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.plan-notify-add-button {
  justify-content: flex-start;
  border-color: var(--line);
  background: #fff;
  width: auto;
  min-width: 148px;
}

.plan-people-picker-name,
.plan-people-picker-role {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plan-people-picker-role {
  color: var(--muted);
  font-size: 12px;
}

.plan-workload-scroll {
  max-height: calc(100vh - 226px);
  overflow: auto;
  border-top: 1px solid var(--line);
}

.plan-workload-grid {
  min-width: 1060px;
  width: 100%;
  display: grid;
  grid-auto-rows: auto;
}

.plan-workload-grid.no-person {
  min-width: 840px;
}

.plan-workload-row {
  display: grid;
  grid-template-columns: 250px repeat(var(--plan-day-count), minmax(150px, 1fr)) 82px;
  min-height: 142px;
  border-bottom: 1px solid var(--line);
  overflow: visible;
}

.plan-workload-grid.no-person .plan-workload-row {
  grid-template-columns: repeat(var(--plan-day-count), minmax(150px, 1fr)) 82px;
}

.plan-workload-user-row.has-draft {
  min-height: 210px;
}

.plan-workload-user-row.collapsed {
  min-height: 48px;
}

.plan-workload-header-row {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 46px;
}

.plan-workload-cell {
  min-width: 0;
  border-right: 1px solid var(--line);
  background: #fff;
}

.plan-workload-cell:last-child {
  border-right: 0;
}

.plan-workload-header-cell {
  min-height: 46px;
  display: grid;
  align-content: center;
  padding: 7px 10px;
  background: #f7f8f6;
  color: var(--text);
  font-weight: 700;
}

.plan-workload-person-cell {
  position: sticky;
  left: 0;
  z-index: 12;
  width: 250px;
}

.plan-workload-header-row .plan-workload-person-cell {
  z-index: 25;
}

.plan-workload-day-header {
  text-align: center;
}

.plan-workload-day-header.today,
.plan-day-cell.today {
  box-shadow: inset 0 0 0 2px rgba(23, 31, 143, 0.12);
}

.plan-person {
  height: 100%;
  min-height: 86px;
  padding: 12px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: flex-start;
  gap: 8px;
}

.plan-workload-user-row.collapsed .plan-person {
  min-height: 48px;
  padding-top: 7px;
  padding-bottom: 7px;
  align-items: center;
}

.plan-person-text {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.plan-person-text strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plan-person-controls {
  min-width: 78px;
  display: inline-grid;
  grid-template-columns: minmax(42px, auto) 30px;
  align-items: center;
  justify-content: end;
  gap: 6px;
}

.plan-person-percent {
  min-width: 42px;
  height: 30px;
  min-height: 30px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--radius-2);
  padding: 0 8px;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.plan-person-percent.green,
.plan-person-percent.green-soft {
  background: var(--tv-charge-row);
  color: var(--tv-charge-text);
}

.plan-person-percent.amber {
  background: var(--tv-off-row);
  color: var(--tv-off-text);
}

.plan-person-percent.red {
  background: var(--tv-over-row);
  color: var(--tv-over-text);
}

.plan-person-percent.gray {
  background: var(--surface-2);
  color: var(--muted);
}

.plan-person-collapse {
  width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  color: var(--muted);
}

.plan-day-cell {
  position: relative;
  width: auto;
  min-width: 0;
  box-sizing: border-box;
  min-height: 100%;
  display: grid;
  align-content: start;
  gap: 7px;
  padding: 8px;
  background: #fbfdfb;
  overflow: visible;
}

.plan-workload-user-row.collapsed .plan-day-cell {
  min-height: 48px;
  padding: 5px 8px;
  align-content: center;
  gap: 0;
}

.plan-workload-user-row.collapsed .plan-capacity-bar {
  height: 36px;
}

.plan-workload-user-row.collapsed .plan-week-total {
  min-height: 48px;
  display: grid;
  align-content: center;
}

.plan-workload-grid.team-workload .plan-workload-user-row:not(.collapsed) {
  min-height: 0;
}

.plan-workload-grid.team-workload .plan-workload-user-row:not(.collapsed) .plan-person {
  min-height: 0;
}

.plan-workload-grid.team-workload .plan-workload-user-row:not(.collapsed) .plan-day-cell {
  min-height: 0;
}

.plan-workload-grid.team-workload .plan-workload-user-row:not(.collapsed) .plan-day-add-target {
  position: static;
  left: auto;
  right: auto;
  bottom: auto;
  width: auto;
}

.plan-workload-grid.team-workload {
  min-width: 1120px;
  background: #ffffff;
}

.plan-workload-grid.team-workload .plan-workload-row {
  grid-template-columns: 260px repeat(var(--plan-day-count), minmax(148px, 1fr)) 72px;
}

.plan-workload-grid.team-workload .plan-workload-header-row {
  min-height: 40px;
}

.plan-workload-grid.team-workload .plan-workload-header-cell {
  min-height: 40px;
  padding: 5px 10px;
  background: #f7f2ef;
  color: #667085;
  font-size: 12px;
  font-weight: 600;
}

.plan-workload-grid.team-workload .plan-workload-person-cell {
  width: 260px;
}

.plan-workload-grid.team-workload .plan-workload-user-row {
  border-bottom-color: #e2e7e1;
}

.plan-workload-grid.team-workload .plan-workload-cell {
  border-right-color: #e2e7e1;
}

.plan-workload-grid.team-workload .plan-workload-user-row.collapsed {
  min-height: 50px;
}

.plan-workload-grid.team-workload .plan-workload-user-row.collapsed .plan-person {
  min-height: 50px;
}

.plan-workload-grid.team-workload .plan-day-cell {
  padding: 5px 3px 6px;
  gap: 5px;
  background: #fbfdfb;
}

.plan-workload-grid.team-workload .plan-workload-user-row.collapsed .plan-day-cell {
  min-height: 50px;
  padding: 5px 3px;
}

.plan-workload-grid.team-workload .plan-capacity-bar {
  height: 38px;
  border: 0;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(9, 30, 20, 0.05);
  font-size: 13px;
  font-weight: 700;
}

.plan-workload-grid.team-workload .plan-workload-user-row.collapsed .plan-capacity-bar {
  height: 38px;
}

.plan-workload-grid.team-workload .plan-capacity-bar.partial,
.plan-workload-grid.team-workload .plan-capacity-bar.empty {
  background: #bfe8cf;
  color: #ffffff;
}

.plan-workload-grid.team-workload .plan-capacity-bar.partial .plan-capacity-fill,
.plan-workload-grid.team-workload .plan-capacity-bar.empty .plan-capacity-fill {
  background: #3aaa73;
}

.plan-workload-grid.team-workload .plan-capacity-bar.full {
  background: #f4cd81;
  color: #1f2933;
}

.plan-workload-grid.team-workload .plan-capacity-bar.full .plan-capacity-fill {
  background: #f4cd81;
}

.plan-workload-grid.team-workload .plan-capacity-bar.over {
  background: #f39ca2;
  color: #ffffff;
}

.plan-workload-grid.team-workload .plan-capacity-bar.over .plan-capacity-fill {
  background: #ef4f5c;
}

.plan-workload-grid.team-workload .plan-capacity-bar::after {
  height: 5px;
  border-radius: 0 0 6px 6px;
}

.plan-workload-grid.team-workload .plan-capacity-bar.partial::after,
.plan-workload-grid.team-workload .plan-capacity-bar.empty::after {
  background: #65c28d;
}

.plan-workload-grid.team-workload .plan-capacity-bar.full::after {
  background: #f4cd81;
}

.plan-workload-grid.team-workload .plan-capacity-bar.over::after {
  background: #ef4f5c;
}

.plan-workload-grid.team-workload .plan-day-tasks {
  gap: 4px;
}

.plan-workload-grid.team-workload .plan-task-chip {
  min-height: 30px;
  border-radius: 6px;
  background: #eff1ef;
  box-shadow: inset 0 0 0 1px rgba(149, 160, 151, 0.22), 0 1px 2px rgba(16, 24, 40, 0.08);
}

.plan-workload-grid.team-workload .plan-task-chip.complete {
  background: #98d1ad;
}

.plan-workload-grid.team-workload .plan-task-chip.in_progress {
  background: var(--tv-other-chip);
  color: var(--tv-other-text);
  box-shadow: inset 0 0 0 1px var(--tv-other-border), 0 1px 2px rgba(16, 24, 40, 0.08);
}

.plan-workload-grid.team-workload .plan-task-chip.wait {
  background: var(--tv-off-chip);
  color: var(--tv-off-text);
  box-shadow: inset 0 0 0 1px var(--tv-off-border), 0 1px 2px rgba(16, 24, 40, 0.08);
}

.plan-workload-grid.team-workload .plan-workload-user-row.empty-week:not(.collapsed):not(.has-draft) {
  height: 52px;
  min-height: 52px;
}

.plan-workload-grid.team-workload .plan-workload-user-row.empty-week:not(.collapsed):not(.has-draft) > .plan-workload-cell {
  height: 52px;
  min-height: 52px;
  box-sizing: border-box;
}

.plan-workload-grid.team-workload .plan-workload-user-row.empty-week:not(.collapsed):not(.has-draft) .plan-person {
  height: 52px;
  min-height: 52px;
  box-sizing: border-box;
  padding: 6px 8px 6px 12px;
  align-items: center;
}

.plan-workload-grid.team-workload .plan-workload-user-row.empty-week:not(.collapsed):not(.has-draft) .plan-day-cell {
  height: 52px;
  min-height: 52px;
  box-sizing: border-box;
  padding: 7px 3px;
  align-content: center;
}

.plan-workload-grid.team-workload .plan-workload-user-row.empty-week:not(.collapsed):not(.has-draft) .plan-day-tasks,
.plan-workload-grid.team-workload .plan-workload-user-row.empty-week:not(.collapsed):not(.has-draft) .plan-day-add-target {
  display: none;
}

.plan-workload-grid.team-workload .plan-workload-user-row.empty-week:not(.collapsed):not(.has-draft) .plan-week-total {
  height: 52px;
  min-height: 52px;
  box-sizing: border-box;
  padding: 0 10px;
  align-content: center;
}

.plan-workload-grid.team-workload .plan-workload-user-row.collapsed {
  height: 52px;
  min-height: 52px;
}

.plan-workload-grid.team-workload .plan-workload-user-row.collapsed > .plan-workload-cell {
  height: 52px;
  min-height: 52px;
  box-sizing: border-box;
}

.plan-workload-grid.team-workload .plan-workload-user-row.collapsed .plan-person {
  height: 52px;
  min-height: 52px;
  box-sizing: border-box;
  padding: 6px 8px 6px 12px;
  align-items: center;
}

.plan-workload-grid.team-workload .plan-workload-user-row.collapsed .plan-day-cell {
  height: 52px;
  min-height: 52px;
  box-sizing: border-box;
  padding: 7px 3px;
  align-content: center;
}

.plan-workload-grid.team-workload .plan-workload-user-row.collapsed .plan-week-total {
  height: 52px;
  min-height: 52px;
  box-sizing: border-box;
  padding: 0 10px;
  align-content: center;
}

.plan-day-cell:focus-within {
  z-index: 35;
}

.plan-day-cell.nonwork {
  background: #f4f5f6;
}

.plan-capacity-bar {
  position: relative;
  width: 100%;
  min-width: 0;
  height: 30px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-1);
  background: var(--tv-charge-row);
  color: var(--tv-charge-text);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.plan-capacity-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--tv-charge-chip);
}

.plan-capacity-text {
  position: relative;
  z-index: 1;
  justify-self: end;
  padding-right: 10px;
  text-align: right;
}

.plan-capacity-bar.empty {
  border-color: var(--tv-charge-border);
  background: var(--tv-charge-chip);
  color: var(--tv-charge-text);
}

.plan-capacity-bar.partial .plan-capacity-fill {
  background: var(--tv-charge-chip);
}

.plan-capacity-bar.full {
  background: var(--tv-off-chip);
  border-color: var(--tv-off-border);
  color: var(--tv-off-text);
}

.plan-capacity-bar.full .plan-capacity-fill {
  background: var(--tv-off-chip);
}

.plan-capacity-bar.over {
  background: var(--tv-over-chip);
  border-color: var(--tv-over-border);
  color: #ffffff;
}

.plan-capacity-bar.over .plan-capacity-fill {
  background: var(--tv-over-chip);
}

.plan-capacity-bar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: transparent;
}

.plan-capacity-bar.empty::after {
  background: var(--tv-charge-border);
}

.plan-capacity-bar.partial::after {
  right: auto;
  width: var(--capacity-fill-width, 0%);
  background: var(--tv-charge-border);
}

.plan-capacity-bar.full::after {
  background: var(--tv-off-border);
}

.plan-capacity-bar.over::after {
  background: #e94f5b;
}

.plan-capacity-bar.nonwork {
  background: #eef0f2;
  color: var(--muted);
}

.plan-day-tasks {
  width: 100%;
  min-width: 0;
  display: grid;
  gap: 5px;
}

.plan-task-chip {
  width: 100%;
  min-width: 0;
  grid-template-columns: 18px minmax(0, 1fr) 48px;
  min-height: 30px;
  padding: 5px 7px;
  box-shadow: inset 0 0 0 1px rgba(149, 160, 151, 0.2);
}

.plan-task-chip strong {
  width: 48px;
  text-align: right;
}

.plan-task-chip .compact-timer-actions {
  position: absolute;
  top: 4px;
  right: 5px;
  opacity: 0;
  pointer-events: none;
  border-radius: var(--radius-1);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 0 0 1px rgba(149, 160, 151, 0.18);
}

.plan-task-chip:hover .compact-timer-actions,
.plan-task-chip:focus-within .compact-timer-actions {
  opacity: 1;
  pointer-events: auto;
}

.plan-day-add-target {
  width: 100%;
  min-width: 0;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px dashed transparent;
  border-radius: var(--radius-1);
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  opacity: 0;
}

.plan-day-cell:hover .plan-day-add-target,
.plan-day-cell:focus-within .plan-day-add-target {
  opacity: 1;
  border-color: var(--line);
}

.plan-cell-task-form {
  position: absolute;
  z-index: 45;
  top: 42px;
  left: 8px;
  width: calc(100% - 16px);
  min-width: 220px;
  display: grid;
  gap: 6px;
  padding: 7px;
  border: 1px solid #d9defb;
  border-radius: var(--radius-2);
  background: #fff;
  box-shadow: var(--shadow-menu);
}

.plan-cell-task-top,
.plan-cell-task-fields,
.plan-cell-task-actions {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px;
  align-items: center;
}

.plan-cell-task-fields {
  grid-template-columns: minmax(0, 1fr) 64px 74px;
}

.plan-cell-task-top.no-assignee {
  grid-template-columns: minmax(0, 1fr);
}

.plan-cell-task-actions {
  grid-template-columns: auto auto;
  justify-content: end;
}

.plan-cell-task-form input,
.plan-cell-task-form select {
  width: 100%;
  min-height: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-1);
  padding: 4px 6px;
  font-size: 12px;
}

.plan-weekend-control {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

.team-workload-section-header {
  align-items: center;
}

.team-workload-section-actions {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.plan-unified-task-list {
  gap: 0;
  overflow-x: auto;
  padding-top: 0;
}

.plan-unified-task-list > .plan-task-list-header,
.plan-unified-task-list .plan-list-group > .plan-task-list-header {
  margin: 0;
}

.plan-unified-task-list .plan-list-group {
  border-radius: 0;
  border-width: 0 0 1px;
  overflow: visible;
}

.plan-unified-task-list .plan-list-group:first-of-type {
  border-top: 0;
}

.clickup-task-group-body {
  position: relative;
}

.clickup-task-group-body.plan-task-list {
  border-top: 0;
}

.clickup-task-grid {
  grid-template-columns: 46px minmax(280px, 1.6fr) 92px 126px 104px 96px 128px;
  min-width: 940px;
}

.clickup-task-grid > div {
  min-height: 48px;
  padding: 6px 9px;
}

.clickup-task-header {
  position: sticky;
  top: 0;
  z-index: 10;
  min-height: 40px;
}

.clickup-task-header > div {
  min-height: 40px;
}

.clickup-status-cell {
  justify-content: center;
}

.clickup-assignee-cell {
  overflow: visible;
}

.clickup-priority-cell {
  overflow: visible;
  justify-content: center;
}

.clickup-task-name {
  display: grid;
  align-content: center;
  gap: 2px;
}

.clickup-task-grid > .clickup-task-name {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 2px;
}

.clickup-task-title {
  max-width: 100%;
}

.clickup-list-title-left {
  border: 0;
  background: transparent;
  padding: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.clickup-list-title {
  min-height: 38px;
}

.clickup-add-task-row {
  background: #fbfcff;
}

.clickup-add-task-row .plan-people-picker,
.clickup-edit-task-row .plan-people-picker {
  width: 100%;
}

.clickup-add-task-row .plan-priority-picker,
.clickup-edit-task-row .plan-priority-picker,
.plan-task-edit-fields .plan-priority-picker,
.plan-cell-task-fields .plan-priority-picker {
  width: 100%;
}

.clickup-add-task-row .plan-priority-picker-summary,
.clickup-edit-task-row .plan-priority-picker-summary,
.plan-task-edit-fields .plan-priority-picker-summary,
.plan-cell-task-fields .plan-priority-picker-summary {
  width: 100%;
}

.clickup-edit-task-row {
  grid-template-columns: 46px minmax(300px, 1.6fr) 56px 130px 58px 82px 170px;
  min-width: 1040px;
}

.clickup-edit-task-row > div {
  overflow: visible;
}

.clickup-edit-task-row .plan-task-edit-name {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(150px, 1.4fr) minmax(84px, 0.6fr) minmax(120px, 0.8fr) minmax(84px, 0.6fr);
  align-items: center;
  gap: 7px;
}

.clickup-edit-task-row .clickup-row-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 6px;
}

.clickup-edit-task-row .clickup-row-actions .button {
  width: 100%;
  min-width: 0;
  justify-content: center;
}

.plan-task-quick-controls {
  grid-template-columns: 38px 126px 92px;
  min-width: 266px;
}

.plan-task-row .plan-task-quick-controls {
  display: inline-grid;
  visibility: visible;
  opacity: 1;
}

.plan-task-row > .plan-task-side .plan-task-actions {
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 760px) {
  .plan-header-actions {
    justify-content: flex-start;
  }

  .plan-workload-scroll {
    max-height: none;
  }

  .plan-workload-grid {
    min-width: 980px;
  }

  .plan-workload-row {
    grid-template-columns: 220px repeat(var(--plan-day-count), 146px) 76px;
  }

  .plan-workload-person-cell {
    width: 220px;
  }
}

/* Stable task-list axes for My Work and Tasks on narrow desktop/tablet widths. */
.plan-work-panel .plan-task-sections,
.plan-unified-task-list {
  overflow-x: auto;
  scrollbar-gutter: stable;
}

.plan-work-panel .plan-task-sections {
  --plan-task-list-columns: 22px minmax(180px, 2fr) minmax(56px, 0.55fr) minmax(52px, 0.45fr) minmax(84px, 0.75fr) minmax(62px, 0.55fr) minmax(50px, 0.45fr) minmax(54px, 0.5fr);
  --plan-task-list-min-width: 640px;
}

.plan-unified-task-list {
  --plan-task-list-columns: 22px minmax(210px, 2fr) minmax(56px, 0.55fr) minmax(52px, 0.45fr) minmax(84px, 0.75fr) minmax(62px, 0.55fr) minmax(62px, 0.55fr);
  --plan-task-list-min-width: 620px;
}

.plan-work-panel .plan-task-list-header,
.plan-work-panel .plan-task-row:not(.plan-task-edit-row) {
  grid-template-columns: var(--plan-task-list-columns);
  min-width: var(--plan-task-list-min-width);
  column-gap: 8px;
}

.plan-unified-task-list .plan-task-list-header,
.plan-unified-task-list .plan-task-row:not(.plan-task-edit-row) {
  grid-template-columns: var(--plan-task-list-columns);
  min-width: var(--plan-task-list-min-width);
  column-gap: 8px;
}

.plan-unified-task-list .plan-list-group-title {
  display: grid;
  grid-template-columns: var(--plan-task-list-columns);
  column-gap: 8px;
  align-items: center;
  min-width: var(--plan-task-list-min-width);
  width: auto;
  margin: 0;
  padding: 6px 0;
}

.plan-unified-task-list .plan-list-group .plan-task-list {
  padding-left: 0;
  padding-right: 0;
}

.plan-unified-task-list .clickup-list-title-left {
  grid-column: 1 / 11;
  width: 100%;
}

.plan-unified-task-list .plan-list-more {
  grid-column: 11;
  width: 100%;
  justify-content: center;
  justify-self: stretch;
}

.plan-unified-task-list .plan-list-title-edit-form {
  grid-column: 1 / -1;
}

.plan-unified-task-list .plan-list-add-task-row {
  display: grid;
  grid-template-columns: var(--plan-task-list-columns);
  column-gap: 8px;
  align-items: center;
  width: 100%;
  min-width: var(--plan-task-list-min-width);
  min-height: 36px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: #ffffff;
  color: var(--muted);
  padding: 0;
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.plan-unified-task-list .plan-list-add-task-row:hover {
  background: var(--surface-2);
  color: var(--accent);
}

.plan-unified-task-list .plan-list-add-task-label {
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 6px 0;
}

.plan-unified-task-list .plan-list-add-task-label svg {
  width: 15px;
  height: 15px;
}

.plan-unified-task-list .plan-completed-toggle-row {
  display: grid;
  grid-template-columns: var(--plan-task-list-columns);
  column-gap: 8px;
  align-items: center;
  width: 100%;
  min-width: var(--plan-task-list-min-width);
  min-height: 36px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: #ffffff;
  color: var(--muted);
  padding: 0;
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.plan-unified-task-list .plan-completed-toggle-row:hover {
  background: var(--surface-2);
  color: var(--text);
}

.plan-unified-task-list .plan-completed-toggle-label {
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 6px 0;
  font-weight: 700;
}

.plan-unified-task-list .plan-completed-toggle-label svg {
  width: 14px;
  height: 14px;
  color: var(--muted);
}

.plan-task-hide-button {
  min-width: 54px;
  justify-content: center;
}

.plan-work-panel .plan-task-list-header-side,
.plan-work-panel .plan-task-row:not(.plan-task-edit-row) > .plan-task-side,
.plan-unified-task-list .plan-task-list-header-side.no-timer,
.plan-unified-task-list .plan-task-row:not(.plan-task-edit-row) > .plan-task-side.no-timer {
  display: contents;
}

.plan-work-panel .plan-task-list-header,
.plan-unified-task-list .plan-task-list-header {
  display: grid;
}

.plan-work-panel .plan-task-list-header > div,
.plan-work-panel .plan-task-list-header-side span,
.plan-unified-task-list .plan-task-list-header > div,
.plan-unified-task-list .plan-task-list-header-side span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plan-work-panel .plan-task-list-header > div:nth-child(3),
.plan-work-panel .plan-task-list-header-side span:first-child,
.plan-unified-task-list .plan-task-list-header > div:nth-child(3),
.plan-unified-task-list .plan-task-list-header-side span:first-child {
  text-align: center;
}

.plan-work-panel .plan-task-list-header-side span:nth-child(2),
.plan-work-panel .plan-task-list-header-side span:nth-child(3),
.plan-unified-task-list .plan-task-list-header-side span:nth-child(2),
.plan-unified-task-list .plan-task-list-header-side span:nth-child(3) {
  text-align: right;
}

.plan-work-panel .plan-task-list-header-side span:nth-child(n + 4),
.plan-unified-task-list .plan-task-list-header-side span:nth-child(n + 4) {
  text-align: center;
}

.plan-work-panel .plan-task-assignee-cell,
.plan-unified-task-list .plan-task-assignee-cell {
  width: auto;
  justify-self: center;
  place-items: center;
}

.plan-work-panel .plan-task-priority-cell,
.plan-unified-task-list .plan-task-priority-cell {
  width: auto;
  justify-self: center;
}

.plan-work-panel .plan-task-date,
.plan-unified-task-list .plan-task-date {
  min-width: 0;
  width: 100%;
  text-align: right;
}

.plan-work-panel .plan-task-estimate,
.plan-unified-task-list .plan-task-estimate {
  min-width: 0;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  justify-content: stretch;
  justify-items: end;
  column-gap: 0;
}

.plan-work-panel .plan-task-estimate-empty,
.plan-unified-task-list .plan-task-estimate-empty {
  grid-column: 1 / -1;
  justify-self: end;
}

.plan-work-panel .plan-task-timer-actions,
.plan-unified-task-list .plan-task-timer-actions {
  justify-self: center;
}

.plan-work-panel .plan-task-more,
.plan-unified-task-list .plan-task-more {
  width: 100%;
  justify-content: center;
}

.plan-work-panel .plan-task-row > .plan-task-side .plan-task-actions,
.plan-unified-task-list .plan-task-row > .plan-task-side .plan-task-actions {
  min-width: 0;
}

/* Projects Status main rows should read like data, not headings. */
.project-status-main-row .project-status-client,
.project-status-main-row .project-status-code,
.project-status-main-row .project-status-budget-line,
.project-status-main-row .project-status-budget-line.secondary,
.project-status-main-row .project-completion-view-button,
.project-status-main-row .project-completion-value {
  font-weight: 400;
}

/* Team workload compact B2B table view. */
.plan-workload-grid.team-workload {
  min-width: 1280px;
  width: 100%;
  background: #ffffff;
}

.plan-workload-grid.team-workload .plan-workload-row {
  grid-template-columns: 270px repeat(var(--plan-day-count), minmax(184px, 1fr)) 72px;
  min-height: 0;
  border-bottom: 1px solid #dde4df;
  align-items: stretch;
}

.plan-workload-grid.team-workload .plan-workload-header-row {
  min-height: 38px;
}

.plan-workload-grid.team-workload .plan-workload-header-cell {
  min-height: 38px;
  padding: 5px 10px;
  background: #f5f3ef;
  color: #5c6670;
  font-size: 12px;
  font-weight: 600;
}

.plan-workload-grid.team-workload .plan-workload-person-cell {
  width: 270px;
  background: #ffffff;
}

.plan-workload-grid.team-workload .plan-workload-header-row .plan-workload-person-cell {
  background: #f5f3ef;
}

.plan-workload-grid.team-workload .plan-workload-cell {
  border-right: 1px solid #dde4df;
}

.plan-workload-grid.team-workload .plan-person {
  min-height: 44px;
  padding: 7px 8px 7px 10px;
  grid-template-columns: 30px minmax(0, 1fr) 70px;
  align-items: start;
  gap: 8px;
}

.plan-workload-grid.team-workload .avatar {
  width: 28px;
  height: 28px;
  font-size: 11px;
}

.plan-workload-grid.team-workload .plan-person-text {
  padding-top: 3px;
}

.plan-workload-grid.team-workload .plan-person-text strong {
  font-size: 13px;
  line-height: 1.25;
}

.plan-workload-grid.team-workload .plan-person-controls {
  min-width: 70px;
  grid-template-columns: 42px 20px;
  gap: 4px;
  justify-self: end;
}

.plan-workload-grid.team-workload .plan-person-percent {
  width: 42px;
  min-width: 42px;
  height: 24px;
  min-height: 24px;
  padding: 0 6px;
  border-radius: 6px;
  font-size: 12px;
}

.plan-workload-grid.team-workload .plan-person-collapse {
  width: 20px;
  min-width: 20px;
  height: 24px;
  min-height: 24px;
  border: 0;
  background: transparent;
  color: #8a94a0;
}

.plan-workload-grid.team-workload .plan-person-collapse svg {
  width: 14px;
  height: 14px;
}

.plan-workload-grid.team-workload .plan-day-cell {
  min-height: 44px;
  padding: 4px;
  gap: 4px;
  background: #fbfcfb;
}

.plan-workload-grid.team-workload .plan-day-cell.nonwork {
  background:
    repeating-linear-gradient(
      -45deg,
      #f3f4f5 0,
      #f3f4f5 4px,
      #eceff1 4px,
      #eceff1 8px
    );
}

.plan-workload-grid.team-workload .plan-capacity-bar {
  height: 36px;
  border: 1px solid transparent;
  border-radius: 6px;
  box-shadow: none;
  font-size: 13px;
  font-weight: 700;
}

.plan-workload-grid.team-workload .plan-capacity-bar::after {
  display: none;
}

.plan-workload-grid.team-workload .plan-capacity-text {
  justify-self: end;
  padding-right: 12px;
  text-align: right;
}

.plan-workload-grid.team-workload .plan-capacity-bar.empty {
  border-color: #9bd8b6;
  background: #d7f1e2;
  color: #006b45;
}

.plan-workload-grid.team-workload .plan-capacity-bar.empty .plan-capacity-fill {
  display: none;
}

.plan-workload-grid.team-workload .plan-capacity-bar.partial {
  border-color: #8ed3ac;
  background: #dff4e8;
  color: #006b45;
}

.plan-workload-grid.team-workload .plan-capacity-bar.partial .plan-capacity-fill {
  display: block;
  background: #36a970;
}

.plan-workload-grid.team-workload .plan-capacity-bar.full {
  border-color: #efc974;
  background: #f5ce80;
  color: #23303b;
}

.plan-workload-grid.team-workload .plan-capacity-bar.full .plan-capacity-fill {
  display: none;
}

.plan-workload-grid.team-workload .plan-capacity-bar.over {
  border-color: #e95b64;
  background: #ef4f5c;
  color: #ffffff;
}

.plan-workload-grid.team-workload .plan-capacity-bar.over .plan-capacity-fill {
  display: none;
}

.plan-workload-grid.team-workload .plan-capacity-bar.nonwork {
  border-color: #d7dce0;
  background: #eef0f2;
  color: #667085;
}

.plan-workload-grid.team-workload .plan-day-tasks {
  gap: 4px;
}

.plan-workload-grid.team-workload .plan-task-chip {
  grid-template-columns: 14px minmax(0, 1fr) 42px;
  min-height: 30px;
  padding: 4px 7px;
  gap: 6px;
  border-radius: 5px;
  background: #f4f6f5;
  color: #17212b;
  box-shadow: inset 0 0 0 1px rgba(121, 137, 126, 0.25);
  font-size: 12px;
}

.plan-workload-grid.team-workload .plan-task-chip:hover {
  background: #eef2ef;
}

.plan-workload-grid.team-workload .plan-task-chip .plan-status-wrap {
  width: 14px;
}

.plan-workload-grid.team-workload .plan-task-chip-title {
  min-width: 0;
  text-align: left;
}

.plan-workload-grid.team-workload .plan-task-chip strong {
  width: 42px;
  color: inherit;
  font-size: 11px;
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.plan-workload-grid.team-workload .plan-task-chip.complete {
  background: #bfe8cf;
  color: #095b3d;
  box-shadow: inset 0 0 0 1px #8ed3ac;
}

.plan-workload-grid.team-workload .plan-task-chip.in_progress {
  background: #dff0ff;
  color: #075985;
  box-shadow: inset 0 0 0 1px #afd7f6;
}

.plan-workload-grid.team-workload .plan-task-chip.wait {
  background: #fff0cf;
  color: #8a5600;
  box-shadow: inset 0 0 0 1px #f2ce80;
}

.plan-workload-grid.team-workload .plan-more-tasks {
  min-height: 24px;
  padding: 3px 7px;
  border-color: #d7dde0;
  border-radius: 5px;
  background: #ffffff;
  font-size: 11px;
}

.plan-workload-grid.team-workload .plan-day-add-target {
  position: static;
  right: auto;
  bottom: auto;
  left: auto;
  width: 100%;
  min-width: 0;
  height: 24px;
  min-height: 24px;
  justify-content: flex-start;
  padding: 0 8px;
  border-color: transparent;
  background: transparent;
  font-size: 12px;
  opacity: 0;
  box-shadow: none;
}

.plan-workload-grid.team-workload .plan-day-add-target svg {
  width: 14px;
  height: 14px;
}

.plan-workload-grid.team-workload .plan-cell-task-form {
  position: static;
  z-index: auto;
  top: auto;
  left: auto;
  width: 100%;
  min-width: 0;
  margin-top: 4px;
  box-shadow: none;
}

.plan-workload-grid.team-workload .plan-day-cell:hover .plan-day-add-target,
.plan-workload-grid.team-workload .plan-day-cell:focus-within .plan-day-add-target {
  opacity: 1;
}

.plan-workload-grid .plan-task-chip[draggable="true"] {
  cursor: grab;
}

.plan-workload-grid .plan-task-chip.dragging {
  cursor: grabbing;
  opacity: 0.58;
}

.plan-workload-grid .plan-day-cell.drag-over {
  background: #eef4ff;
  box-shadow: inset 0 0 0 2px rgba(23, 31, 143, 0.18);
}

.plan-workload-grid.team-workload .plan-day-cell.nonwork.drag-over {
  background:
    linear-gradient(rgba(238, 244, 255, 0.78), rgba(238, 244, 255, 0.78)),
    repeating-linear-gradient(
      -45deg,
      #f3f4f5 0,
      #f3f4f5 4px,
      #eceff1 4px,
      #eceff1 8px
    );
}

.plan-workload-grid.team-workload .plan-workload-user-row.collapsed,
.plan-workload-grid.team-workload .plan-workload-user-row.empty-week:not(.has-draft) {
  height: 46px;
  min-height: 46px;
}

.plan-workload-grid.team-workload .plan-workload-user-row.collapsed > .plan-workload-cell,
.plan-workload-grid.team-workload .plan-workload-user-row.empty-week:not(.has-draft) > .plan-workload-cell {
  height: 46px;
  min-height: 46px;
}

.plan-workload-grid.team-workload .plan-workload-user-row.collapsed .plan-person,
.plan-workload-grid.team-workload .plan-workload-user-row.empty-week:not(.has-draft) .plan-person {
  height: 46px;
  min-height: 46px;
  padding-top: 6px;
  padding-bottom: 6px;
  align-items: center;
}

.plan-workload-grid.team-workload .plan-workload-user-row.collapsed .plan-day-cell,
.plan-workload-grid.team-workload .plan-workload-user-row.empty-week:not(.has-draft) .plan-day-cell {
  height: 46px;
  min-height: 46px;
  padding: 4px;
  align-content: center;
}

.plan-workload-grid.team-workload .plan-workload-user-row.collapsed .plan-capacity-bar,
.plan-workload-grid.team-workload .plan-workload-user-row.empty-week:not(.has-draft) .plan-capacity-bar {
  height: 36px;
}

.plan-workload-grid.team-workload .plan-workload-user-row.collapsed .plan-week-total,
.plan-workload-grid.team-workload .plan-workload-user-row.empty-week:not(.has-draft) .plan-week-total {
  height: 46px;
  min-height: 46px;
  align-content: center;
}

@media (max-width: 760px) {
  .plan-workload-grid.team-workload {
    min-width: 1180px;
  }

  .plan-workload-grid.team-workload .plan-workload-row {
    grid-template-columns: 250px repeat(var(--plan-day-count), minmax(178px, 1fr)) 70px;
  }

  .plan-workload-grid.team-workload .plan-workload-person-cell {
    width: 250px;
  }
}

/* Keep Team workload clean: no heavy "today" column outline. */
.plan-workload-grid.team-workload .plan-workload-day-header.today,
.plan-workload-grid.team-workload .plan-day-cell.today {
  box-shadow: none;
}

.plan-workload-grid.team-workload .plan-workload-day-header.today {
  background: #f5f3ef;
}

.plan-workload-grid.team-workload .plan-workload-row {
  border-bottom-color: #f2f4f1;
}

.plan-workload-grid.team-workload .plan-workload-cell {
  border-right-color: #f2f4f1;
}

/* Shared data-grid inset: match Projects Status / Project control spacing. */
.time-matrix-panel > .workload-scroll,
.team-time-panel > .workload-scroll,
.team-workload-panel > .plan-workload-scroll,
.team-workload-panel > .plan-week-wrap {
  width: calc(100% - 32px);
  margin: 0 16px 56px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.time-matrix-panel > .workload-scroll {
  border-top: 0;
  border-right: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  scrollbar-gutter: auto;
}

.team-time-panel > .workload-scroll {
  border-right: 0;
  scrollbar-gutter: auto;
}

.team-people-panel .team-time-matrix {
  border-right: 0;
}

.team-chargeability-panel .team-chargeability-table {
  width: min(calc(100% - 32px), 1060px);
  margin: 0 16px 56px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow-x: auto;
}

/* Standard table shell: same visual rhythm as Projects Status / Project control. */
.result-table-wrap,
.users-table-wrap,
.directories-table-wrap,
.panel.tight > .table-wrap:not(.result-table-wrap):not(.users-table-wrap):not(.directories-table-wrap),
.details-panel-content > .table-wrap {
  width: calc(100% - 32px);
  margin: 0 16px 56px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  overflow: auto;
}

.result-table,
.users-table,
.directories-table,
.panel.tight > .table-wrap:not(.result-table-wrap):not(.users-table-wrap):not(.directories-table-wrap) table,
.details-panel-content > .table-wrap table {
  border-collapse: separate;
  border-spacing: 0;
  background: #ffffff;
}

.result-table th,
.result-table td,
.users-table th,
.users-table td,
.directories-table th,
.directories-table td,
.panel.tight > .table-wrap:not(.result-table-wrap):not(.users-table-wrap):not(.directories-table-wrap) th,
.panel.tight > .table-wrap:not(.result-table-wrap):not(.users-table-wrap):not(.directories-table-wrap) td,
.details-panel-content > .table-wrap th,
.details-panel-content > .table-wrap td {
  padding: 8px 10px;
}

.result-table tbody tr:last-child td,
.users-table tbody tr:last-child td,
.directories-table tbody tr:last-child td,
.panel.tight > .table-wrap:not(.result-table-wrap):not(.users-table-wrap):not(.directories-table-wrap) tbody tr:last-child td,
.details-panel-content > .table-wrap tbody tr:last-child td {
  border-bottom: 0;
}

/* No extra top rule above table headers. */
.project-status-grid,
.time-matrix-panel > .workload-scroll,
.team-time-panel > .workload-scroll,
.team-workload-panel > .plan-workload-scroll,
.team-workload-panel > .plan-week-wrap,
.team-chargeability-panel .team-chargeability-table,
.result-table-wrap,
.users-table-wrap,
.directories-table-wrap,
.panel.tight > .table-wrap:not(.result-table-wrap):not(.users-table-wrap):not(.directories-table-wrap),
.details-panel-content > .table-wrap {
  border-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* Compact single-line table headers. Keep workload day/date headers taller. */
.result-table th,
.users-table th,
.directories-table th,
.panel.tight > .table-wrap:not(.result-table-wrap):not(.users-table-wrap):not(.directories-table-wrap) th,
.details-panel-content > .table-wrap th {
  height: 34px;
  padding-top: 6px;
  padding-bottom: 6px;
  line-height: 16px;
}

.project-status-grid-head {
  min-height: 36px;
}

.project-status-grid-head > div {
  padding-top: 6px;
  padding-bottom: 6px;
}

.team-chargeability-header {
  min-height: 36px;
  padding-top: 6px;
  padding-bottom: 6px;
}

.time-matrix-panel .workload-header-row {
  box-shadow: none;
}

.time-matrix-panel .workload-header-cell {
  border-top: 0;
}

/* Unified table/list typography and density.
   Rounded badges/chips keep their own semantic styling. */
:root {
  --tv-table-font-size: 13px;
  --tv-table-header-font-size: 12px;
  --tv-table-body-weight: 400;
  --tv-table-header-weight: 600;
  --tv-table-row-height: 44px;
  --tv-table-detail-row-height: 32px;
  --tv-table-header-height: 36px;
  --tv-table-muted: #66707c;
}

.workload-matrix,
.project-status-grid,
.result-table,
.users-table,
.directories-table,
.team-chargeability-table,
.plan-task-list,
.plan-unified-task-list,
.plan-workload-grid {
  color: var(--text);
  font-size: var(--tv-table-font-size);
  font-weight: var(--tv-table-body-weight);
}

.workload-header-cell,
.project-status-grid-head,
.project-status-grid-head > div,
.result-table th,
.users-table th,
.directories-table th,
.team-chargeability-header,
.plan-task-list-header,
.clickup-task-header,
.plan-workload-header-cell,
.panel.tight > .table-wrap:not(.result-table-wrap):not(.users-table-wrap):not(.directories-table-wrap) th,
.details-panel-content > .table-wrap th {
  color: #475467;
  font-size: var(--tv-table-header-font-size);
  font-weight: var(--tv-table-header-weight);
  letter-spacing: 0;
}

.workload-user-summary-cell,
.workload-project-cell,
.workload-summary-cell,
.workload-day-total,
.workload-week-total,
.workload-row-total,
.matrix-cell-value,
.workload-project-title,
.team-user-name,
.team-user-hours,
.project-status-main-row,
.project-status-main-row > div,
.project-status-client,
.project-status-code,
.project-status-current-milestone,
.project-status-current-milestone span,
.project-status-budget-line,
.project-status-budget-line.secondary,
.project-status-deadline,
.project-completion-value,
.project-completion-view-button,
.result-table td,
.result-project-title,
.result-project-code-cell,
.result-cost-total,
.users-table td,
.users-person-name,
.directories-table td,
.team-chargeability-row,
.team-chargeability-row .numeric,
.plan-task-row,
.plan-task-title,
.plan-task-date,
.plan-task-estimate,
.plan-workload-grid:not(.team-workload) .plan-task-chip,
.plan-workload-grid.team-workload .plan-task-chip {
  font-size: var(--tv-table-font-size);
  font-weight: var(--tv-table-body-weight);
}

.numeric,
.matrix-cell-value,
.workload-summary-value,
.project-status-budget-number,
.project-status-budget-line,
.project-status-budget-line.secondary,
.result-table .numeric,
.team-chargeability-row .numeric {
  font-weight: var(--tv-table-body-weight);
}

.result-table td,
.users-table td,
.directories-table td,
.team-chargeability-row {
  height: var(--tv-table-row-height);
  min-height: var(--tv-table-row-height);
}

.project-status-grid-row {
  min-height: 48px;
}

.workload-user-summary,
.workload-project-row,
.workload-project-summary-row {
  min-height: 40px;
}

.workload-description-row,
.project-approval-line-row,
.project-approval-user-row {
  min-height: var(--tv-table-detail-row-height);
}

.workload-header-cell {
  min-height: 42px;
}

.project-status-grid-head,
.team-chargeability-header,
.clickup-task-header,
.clickup-task-header > div {
  min-height: var(--tv-table-header-height);
}

.result-table th,
.users-table th,
.directories-table th,
.team-chargeability-header,
.panel.tight > .table-wrap:not(.result-table-wrap):not(.users-table-wrap):not(.directories-table-wrap) th,
.details-panel-content > .table-wrap th {
  height: var(--tv-table-header-height);
  padding-top: 6px;
  padding-bottom: 6px;
  line-height: 16px;
}

.project-status-code,
.project-status-current-milestone span:nth-child(2),
.project-status-deadline .tiny,
.project-completion-status,
.result-project-code-cell,
.plan-task-meta,
.plan-task-date,
.team-user-hours {
  color: var(--tv-table-muted);
}

.badge,
.code-chip,
.compact-user-code,
.avatar,
.project-status-role-code,
.project-status-team-codes span {
  font-weight: 600;
}

.compact-user-code,
.avatar {
  font-weight: 700;
}

/* Remove outer table frames; internal row and column separators remain. */
.project-status-grid,
.time-matrix-panel > .workload-scroll,
.team-time-panel > .workload-scroll,
.team-workload-panel > .plan-workload-scroll,
.team-workload-panel > .plan-week-wrap,
.team-chargeability-panel .team-chargeability-table,
.plan-unified-task-list,
.plan-task-list,
.result-table-wrap,
.users-table-wrap,
.directories-table-wrap,
.panel.tight > .table-wrap:not(.result-table-wrap):not(.users-table-wrap):not(.directories-table-wrap),
.details-panel-content > .table-wrap {
  border: 0;
  border-radius: 0;
}

.project-status-grid-row > div:last-child,
.workload-matrix-row > div:last-child,
.plan-workload-row > .plan-workload-cell:last-child,
.team-chargeability-row > div:last-child {
  border-right: 0;
}

.project-status-grid > .project-status-grid-row:last-child > div,
.workload-matrix > .workload-matrix-row:last-child > div,
.plan-workload-grid > .plan-workload-row:last-child > .plan-workload-cell,
.team-chargeability-table > .team-chargeability-row:last-child > div,
.result-table tbody tr:last-child td,
.users-table tbody tr:last-child td,
.directories-table tbody tr:last-child td,
.panel.tight > .table-wrap:not(.result-table-wrap):not(.users-table-wrap):not(.directories-table-wrap) tbody tr:last-child td,
.details-panel-content > .table-wrap tbody tr:last-child td {
  border-bottom: 0;
}

/* Users list density: match the tighter Team Time rhythm. */
.users-table th,
.users-table td {
  padding: 6px 8px;
}

.users-table td {
  height: 40px;
  min-height: 40px;
}

.users-table .tiny {
  font-size: 11px;
  line-height: 14px;
}

.users-table .numeric {
  text-align: right;
  white-space: nowrap;
}

.users-table th:nth-child(4),
.users-table td:nth-child(4) {
  padding-left: 18px;
}

/* Compact table width model: tables use the width their columns need, not the full page. */
.project-status-grid,
.time-matrix-panel > .workload-scroll,
.team-time-panel > .workload-scroll,
.team-workload-panel > .plan-workload-scroll,
.team-workload-panel > .plan-week-wrap,
.team-chargeability-panel .team-chargeability-table,
.result-table-wrap,
.users-table-wrap,
.directories-table-wrap,
.panel.tight > .table-wrap:not(.result-table-wrap):not(.users-table-wrap):not(.directories-table-wrap),
.details-panel-content > .table-wrap {
  width: max-content;
  max-width: calc(100% - 32px);
  margin-left: 16px;
  margin-right: 16px;
  overflow-x: auto;
}

.project-status-grid,
.workload-matrix,
.plan-workload-grid,
.team-chargeability-table,
.plan-unified-task-list,
.plan-task-list {
  width: max-content;
  max-width: 100%;
}

.result-table,
.users-table,
.directories-table,
.panel.tight > .table-wrap:not(.result-table-wrap):not(.users-table-wrap):not(.directories-table-wrap) table,
.details-panel-content > .table-wrap table {
  width: max-content;
  min-width: 0;
  table-layout: auto;
}

.result-col-project {
  width: 220px;
}

.result-col-code {
  width: 82px;
}

.result-col-money,
.result-col-other-cost {
  width: 112px;
}

.result-col-completion,
.result-col-margin {
  width: 92px;
}

.users-col-person {
  width: 260px;
}

.users-col-role {
  width: 116px;
}

.users-col-access {
  width: 190px;
}

.users-col-invitation {
  width: 150px;
}

.users-col-capacity {
  width: 74px;
}

.users-col-status {
  width: 116px;
}

.users-col-actions {
  width: 68px;
}

.directories-col-code {
  width: 110px;
}

.directories-col-description {
  width: 320px;
}

.directories-col-type {
  width: 150px;
}

.directories-col-actions {
  width: 74px;
}

.project-status-grid-row {
  grid-template-columns: 34px 220px 138px 94px 100px 78px 86px 112px 96px repeat(4, 86px) 68px;
}

.workload-matrix-row {
  grid-template-columns: 390px repeat(var(--day-count), 104px) 78px;
}

.workload-matrix.has-timer .workload-matrix-row {
  grid-template-columns: 390px 104px repeat(var(--day-count), 104px) 78px;
}

.team-people-panel .team-time-matrix .workload-matrix-row {
  grid-template-columns: 620px repeat(var(--day-count), 74px) 70px;
}

.team-projects-panel .project-approval-matrix .workload-matrix-row {
  grid-template-columns: 430px repeat(var(--day-count), 92px) 76px;
}

.team-chargeability-row {
  min-width: 0;
  grid-template-columns: 280px 112px 112px 112px 100px 110px;
}

.plan-workload-grid {
  min-width: 0;
}

.plan-workload-row {
  min-width: 0;
  grid-template-columns: 250px repeat(var(--plan-day-count), 176px) 72px;
}

.plan-workload-grid.no-person .plan-workload-row {
  grid-template-columns: repeat(var(--plan-day-count), 176px) 72px;
}

.plan-workload-grid.team-workload .plan-workload-row {
  min-width: 0;
  grid-template-columns: 270px repeat(var(--plan-day-count), 184px) 72px;
}

.plan-work-panel,
.plan-unified-task-list {
  --plan-task-list-columns: 22px 300px 58px 54px 88px 70px 62px;
  --plan-task-list-min-width: 654px;
}

/* Time balance KPI cards: align with the Results metric-card style. */
.time-balance-panel {
  padding: 16px;
}

.time-balance-header {
  align-items: center;
  margin-bottom: 12px;
}

.time-balance-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(170px, 1fr));
  gap: 12px;
}

.time-balance-item {
  min-height: 104px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent-2);
  border-radius: 4px;
  padding: 16px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.time-balance-item.balance-positive {
  border-left-color: #23845b;
}

.time-balance-item.balance-negative {
  border-left-color: #c8404c;
}

.time-balance-item.balance-neutral {
  border-left-color: #899590;
}

.time-balance-label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
}

.time-balance-value {
  margin-top: 12px;
  color: var(--text);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.1;
}

.balance-positive .time-balance-value {
  color: #12613f;
}

.balance-negative .time-balance-value {
  color: #9d2d38;
}

@media (max-width: 1180px) {
  .time-balance-grid {
    grid-template-columns: repeat(2, minmax(170px, 1fr));
  }
}

.submission-metric-grid {
  grid-template-columns: repeat(4, minmax(170px, 1fr));
  gap: 12px;
}

.submission-metric-grid .metric {
  min-height: 104px;
  border-left-width: 4px;
  border-radius: 4px;
  padding: 16px;
}

.submission-metric-grid .metric-label {
  font-size: 13px;
  font-weight: 400;
}

.submission-metric-grid .metric-value {
  margin-top: 12px;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.1;
}

@media (max-width: 1180px) {
  .submission-metric-grid {
    grid-template-columns: repeat(2, minmax(170px, 1fr));
  }
}

/* Compact KPI cards: Results and Submission follow the My Time balance format. */
.time-balance-panel {
  padding: 12px 14px;
}

.time-balance-header {
  margin-bottom: 10px;
}

.time-balance-grid,
.result-metric-grid,
.submission-metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.time-balance-item,
.result-metric-grid .metric,
.submission-metric-grid .metric {
  min-height: 58px;
  border: 1px solid var(--line);
  border-left: 3px solid #cfd8d3;
  border-radius: var(--radius-2);
  padding: 8px 10px;
  background: var(--surface-2);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.time-balance-item.balance-positive {
  border-left-color: #23845b;
}

.time-balance-item.balance-negative {
  border-left-color: #c8404c;
}

.time-balance-item.balance-neutral {
  border-left-color: #899590;
}

.time-balance-label,
.result-metric-grid .metric-label,
.submission-metric-grid .metric-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.result-metric-grid .metric-label i,
.submission-metric-grid .metric-label i {
  width: 14px;
  height: 14px;
}

.time-balance-value,
.result-metric-grid .metric-value,
.submission-metric-grid .metric-value {
  margin-top: 4px;
  color: var(--text);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.1;
}

.result-metric-grid .metric-note,
.submission-metric-grid .metric-note {
  margin-top: 3px;
  font-size: 11px;
}

/* Submission status table (Katarzyna, 2026-09-26): no Admin review / Actions columns, widths by need. */
.submission-table {
  width: 100%;
  table-layout: fixed;
}

.submission-col-code { width: 6%; }
.submission-col-person { width: 22%; }
.submission-col-position { width: 11%; }
.submission-col-week { width: 15%; }
.submission-col-status { width: 10%; }
.submission-col-timing { width: 18%; }
.submission-col-submitted { width: 12%; }
.submission-col-hours { width: 6%; }

.submission-table td {
  vertical-align: top;
}

.submission-table .submission-person {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.submission-table .submission-week,
.submission-table .submission-submitted {
  white-space: nowrap;
}

.submission-timing-line {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.submission-excuse-button {
  min-height: 24px;
  padding: 2px 8px;
  font-size: 12px;
}

.submission-excuse-button.icon {
  width: 24px;
  padding: 0;
}

.week-excuse-detail {
  margin-top: 3px;
  white-space: normal;
}

/* Team Time needs a wider first column because actions live before the day columns. */
.team-people-panel .team-time-matrix .workload-matrix-row {
  grid-template-columns: 748px repeat(var(--day-count), 74px) 70px;
}

.team-people-panel .team-workload-user-main.has-actions {
  grid-template-columns: minmax(0, 1fr) 48px 86px 244px;
}

.team-people-panel .team-user-action-line .review-week-button,
.team-people-panel .team-user-action-line .reopen-week-button {
  width: 92px;
  min-width: 92px;
}

/* Total column hours are emphasized in My Time and Team Time tables. */
.time-matrix-panel .workload-week-total .matrix-cell-value,
.time-matrix-panel .workload-row-total .matrix-cell-value,
.team-people-panel .workload-week-total .matrix-cell-value,
.team-people-panel .workload-row-total .matrix-cell-value,
.team-projects-panel .workload-row-total .matrix-cell-value {
  font-weight: 700;
}

.project-status-grid-row > .project-status-role-cell {
  padding-inline: 6px;
}

.project-status-actions-cell {
  overflow: visible;
}

.project-status-edit-button.button.icon {
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
}

.team-projects-panel .project-approval-matrix .workload-matrix-row {
  grid-template-columns: 560px repeat(var(--day-count), 92px) 76px;
}

.team-projects-panel .project-approval-details {
  grid-template-columns: minmax(0, 1fr) max-content;
}

.team-projects-panel .project-approval-project-metrics {
  flex-wrap: nowrap;
  white-space: nowrap;
}

.team-projects-panel .project-approval-metric.completion {
  width: 126px;
  grid-template-columns: 74px 38px;
}

.result-table .result-col-other-cost {
  width: 150px;
}

.result-table th:nth-child(7),
.result-table td:nth-child(7) {
  padding-left: 18px;
}

.result-other-cost-main {
  min-width: 126px;
}

/* Table/workspace sections should not be boxed in by an extra outer frame. */
.panel.tight,
.panel.workload-panel,
.plan-main-panel {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* My Work task table: compact ClickUp-like rows with stable columns. */
.plan-work-panel .plan-task-sections {
  --plan-work-columns: 22px minmax(390px, 1fr) 58px 54px 112px 78px 62px 54px;
  --plan-work-min-width: 880px;
  padding: 8px 16px 14px;
  overflow-x: auto;
  scrollbar-gutter: stable;
}

.plan-work-panel .plan-task-list-header,
.plan-work-panel .plan-task-row:not(.plan-task-edit-row) {
  width: 100%;
  min-width: var(--plan-work-min-width);
  grid-template-columns: var(--plan-work-columns);
  column-gap: 8px;
}

.plan-work-panel .plan-task-list-header {
  min-height: 32px;
  padding: 0 0 6px;
  align-items: center;
}

.plan-work-panel .plan-task-list {
  width: 100%;
  min-width: var(--plan-work-min-width);
  border-top: 0;
}

.plan-work-panel .plan-task-section {
  width: 100%;
  min-width: var(--plan-work-min-width);
}

.plan-work-panel .plan-task-row:not(.plan-task-edit-row) {
  min-height: 40px;
  padding: 4px 0;
  align-items: center;
}

.plan-work-panel .plan-task-list-header-side,
.plan-work-panel .plan-task-row:not(.plan-task-edit-row) > .plan-task-side {
  display: contents;
}

.plan-work-panel .plan-task-main {
  min-width: 0;
  gap: 1px;
}

.plan-work-panel .plan-task-title {
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.25;
}

.plan-work-panel .plan-task-context,
.plan-work-panel .plan-subtask-summary {
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.plan-work-panel .plan-task-assignee-cell,
.plan-work-panel .plan-task-priority-cell,
.plan-work-panel .plan-task-timer-actions,
.plan-work-panel .plan-task-more {
  width: auto;
  justify-self: center;
}

.plan-work-panel .plan-task-date,
.plan-work-panel .plan-task-estimate {
  width: 100%;
  min-width: 0;
  justify-self: stretch;
  text-align: right;
}

.plan-work-panel .plan-task-estimate {
  grid-template-columns: minmax(0, 1fr);
  justify-items: end;
}

.plan-work-panel .plan-task-estimate-empty {
  justify-self: end;
}

.plan-work-panel .plan-task-list-header > div,
.plan-work-panel .plan-task-list-header-side span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plan-work-panel .plan-task-list-header > div:nth-child(3),
.plan-work-panel .plan-task-list-header-side span:first-child,
.plan-work-panel .plan-task-list-header-side span:nth-child(4),
.plan-work-panel .plan-task-list-header-side span:nth-child(5) {
  text-align: center;
}

.plan-work-panel .plan-task-list-header-side span:nth-child(2),
.plan-work-panel .plan-task-list-header-side span:nth-child(3) {
  text-align: right;
}

.plan-work-panel .compact-empty {
  min-width: var(--plan-work-min-width);
  padding: 8px 0;
  min-height: 32px;
  color: var(--muted);
  background: transparent;
}

.team-time-tabs-panel {
  padding: 0;
  background: #ffffff;
}

.team-time-tabs-panel .team-time-tabs {
  border-bottom: 1px solid var(--line);
}

/* Team workload uses the same softer workload palette as My week/My plan. */
.plan-workload-grid.no-person .plan-capacity-bar,
.plan-workload-grid.team-workload .plan-capacity-bar {
  height: 36px;
  border: 1px solid transparent;
  border-radius: 6px;
  box-shadow: none;
  font-size: 13px;
  font-weight: 700;
}

.plan-workload-grid.no-person .plan-capacity-bar::after,
.plan-workload-grid.team-workload .plan-capacity-bar::after {
  display: none;
}

.plan-workload-grid.no-person .plan-capacity-text,
.plan-workload-grid.team-workload .plan-capacity-text {
  justify-self: end;
  padding-right: 12px;
  text-align: right;
}

.plan-workload-grid.no-person .plan-capacity-bar.empty,
.plan-workload-grid.team-workload .plan-capacity-bar.empty {
  border-color: var(--tv-charge-border);
  background: var(--tv-charge-chip);
  color: var(--tv-charge-text);
}

.plan-workload-grid.no-person .plan-capacity-bar.empty .plan-capacity-fill,
.plan-workload-grid.team-workload .plan-capacity-bar.empty .plan-capacity-fill {
  display: none;
}

.plan-workload-grid.no-person .plan-capacity-bar.partial,
.plan-workload-grid.team-workload .plan-capacity-bar.partial {
  border-color: var(--tv-charge-border);
  background: var(--tv-charge-row);
  color: var(--tv-charge-text);
}

.plan-workload-grid.no-person .plan-capacity-bar.partial .plan-capacity-fill,
.plan-workload-grid.team-workload .plan-capacity-bar.partial .plan-capacity-fill {
  display: block;
  background: var(--tv-charge-chip);
}

.plan-workload-grid.no-person .plan-capacity-bar.full,
.plan-workload-grid.team-workload .plan-capacity-bar.full {
  border-color: var(--tv-off-border);
  background: var(--tv-off-chip);
  color: var(--tv-off-text);
}

.plan-workload-grid.no-person .plan-capacity-bar.full .plan-capacity-fill,
.plan-workload-grid.team-workload .plan-capacity-bar.full .plan-capacity-fill {
  display: none;
}

.plan-workload-grid.no-person .plan-capacity-bar.over,
.plan-workload-grid.team-workload .plan-capacity-bar.over {
  border-color: var(--tv-over-border);
  background: var(--tv-over-row);
  color: var(--tv-over-text);
}

.plan-workload-grid.no-person .plan-capacity-bar.over .plan-capacity-fill,
.plan-workload-grid.team-workload .plan-capacity-bar.over .plan-capacity-fill {
  display: block;
  background: var(--tv-over-chip);
}

.plan-workload-grid.no-person .plan-capacity-bar.nonwork,
.plan-workload-grid.team-workload .plan-capacity-bar.nonwork {
  border-color: #d7dce0;
  background: #eef0f2;
  color: #667085;
}

.plan-workload-grid.team-workload .plan-task-chip.complete {
  background: var(--tv-charge-chip);
  color: var(--tv-charge-text);
  box-shadow: inset 0 0 0 1px var(--tv-charge-border);
}

.plan-workload-grid.team-workload .plan-task-chip.in_progress {
  background: var(--tv-other-chip);
  color: var(--tv-other-text);
  box-shadow: inset 0 0 0 1px var(--tv-other-border);
}

.plan-workload-grid.team-workload .plan-task-chip.wait {
  background: var(--tv-off-chip);
  color: var(--tv-off-text);
  box-shadow: inset 0 0 0 1px var(--tv-off-border);
}

/* Plan data rows should read like the core B2B tables: compact, calm and aligned. */
.plan-work-panel,
.plan-lists-panel,
.team-workload-panel {
  font-size: var(--tv-table-font-size);
}

.plan-work-panel .plan-task-list-header,
.plan-lists-panel .plan-task-list-header,
.plan-lists-panel .clickup-task-header,
.team-workload-panel .plan-workload-header-cell {
  min-height: 36px;
  padding-top: 6px;
  padding-bottom: 6px;
  background: #f7f8fa;
  color: #475467;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
}

.team-workload-panel .plan-workload-header-row .plan-workload-person-cell {
  padding-left: 24px;
  background: #ffffff;
}

.team-workload-panel .plan-person {
  padding-left: 24px;
}

.plan-work-panel .plan-task-row:not(.plan-task-edit-row),
.plan-lists-panel .plan-task-row:not(.plan-task-edit-row),
.plan-lists-panel .clickup-task-row {
  min-height: 42px;
  padding-top: 0;
  padding-bottom: 0;
  border-bottom: 1px solid var(--line);
  background: #ffffff;
}

.plan-work-panel .plan-task-title,
.plan-lists-panel .plan-task-title,
.plan-lists-panel .clickup-task-title,
.plan-workload-grid .plan-task-chip-title,
.plan-workload-grid .plan-person-text strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.3;
}

.plan-work-panel .plan-task-context,
.plan-work-panel .plan-subtask-summary,
.plan-lists-panel .plan-task-context,
.plan-lists-panel .plan-subtask-summary,
.plan-lists-panel .clickup-task-name .tiny,
.team-workload-panel .plan-workload-day-header .tiny {
  color: #667085;
  font-size: 12px;
  font-weight: 400;
}

.plan-work-panel .plan-task-date,
.plan-work-panel .plan-task-estimate,
.plan-lists-panel .plan-task-date,
.plan-lists-panel .plan-task-estimate,
.plan-lists-panel .clickup-time-estimate,
.plan-workload-grid .plan-task-chip strong,
.plan-workload-grid .plan-week-total,
.plan-workload-grid .plan-capacity-text {
  font-size: 13px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.plan-lists-panel .clickup-task-grid > div {
  min-height: 42px;
  padding-top: 6px;
  padding-bottom: 6px;
  font-size: 13px;
  font-weight: 400;
}

.plan-lists-panel .clickup-list-title {
  min-height: 36px;
  border-bottom: 1px solid var(--line);
  background: #ffffff;
}

.plan-lists-panel .clickup-list-title-left {
  font-size: 13px;
  font-weight: 400;
}

.team-workload-panel .plan-workload-row {
  border-bottom: 1px solid var(--line);
}

.team-workload-panel .plan-workload-cell {
  border-right-color: var(--line);
}

.team-workload-panel .plan-day-cell {
  background: #ffffff;
}

.team-workload-panel .plan-task-chip {
  min-height: 28px;
  padding-top: 4px;
  padding-bottom: 4px;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(102, 112, 133, 0.16);
  font-size: 13px;
  font-weight: 400;
}

.team-workload-panel .plan-task-chip.complete,
.team-workload-panel .plan-task-chip.in_progress,
.team-workload-panel .plan-task-chip.wait {
  font-weight: 400;
}

/* Team workload should use the full available width for long task names. */
.team-workload-panel > .plan-workload-scroll,
.team-workload-panel > .plan-week-wrap {
  width: 100%;
  max-width: 100%;
  margin: 0 0 56px;
  background: #ffffff;
  overflow-x: auto;
}

.team-workload-panel .plan-workload-grid {
  display: block;
  width: 100%;
  min-width: 100%;
  max-width: none;
}

.team-workload-panel .plan-workload-row {
  width: 100%;
  box-sizing: border-box;
  grid-template-columns: 250px repeat(var(--plan-day-count), minmax(176px, 1fr)) 72px;
}

.team-workload-panel .plan-workload-grid.no-person .plan-workload-row {
  grid-template-columns: repeat(var(--plan-day-count), minmax(176px, 1fr)) 72px;
}

.team-workload-panel .plan-workload-grid.team-workload .plan-workload-row {
  grid-template-columns: 270px repeat(var(--plan-day-count), minmax(184px, 1fr)) 72px;
}

.team-workload-panel .plan-week-total {
  display: grid;
  grid-template-rows: 36px minmax(0, 1fr);
  align-content: start;
  justify-items: stretch;
  min-height: 0;
  padding: 4px;
  text-align: right;
}

.team-workload-panel .plan-week-total-value {
  grid-row: 1;
  display: grid;
  place-items: center end;
  width: 100%;
  min-width: 0;
  height: 36px;
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 0 8px;
  line-height: 1;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.team-workload-panel .plan-workload-user-row.collapsed .plan-workload-total-cell.plan-week-total,
.team-workload-panel .plan-workload-user-row.empty-week:not(.has-draft) .plan-workload-total-cell.plan-week-total {
  display: grid;
  grid-template-rows: 36px minmax(0, 1fr);
  align-content: start;
  justify-items: stretch;
  height: auto;
  min-height: 0;
  padding: 4px;
}

.team-workload-panel .plan-workload-total-cell .plan-week-total-value {
  justify-self: stretch;
}

/* Team workload rows are split into a fixed summary line and a separate task detail line. */
.team-workload-panel .plan-workload-grid.team-workload .plan-workload-user-row.plan-workload-summary-row {
  height: 44px;
  min-height: 44px;
  border-bottom: 0;
}

.team-workload-panel .plan-workload-grid.team-workload .plan-workload-user-row.plan-workload-summary-row > .plan-workload-cell {
  height: 44px;
  min-height: 44px;
  box-sizing: border-box;
}

.team-workload-panel .plan-workload-grid.team-workload .plan-workload-user-row.plan-workload-summary-row .plan-person {
  height: 44px;
  min-height: 44px;
  padding: 6px 8px 6px 24px;
  align-items: center;
}

.team-workload-panel .plan-workload-grid.team-workload .plan-workload-user-row.plan-workload-summary-row .plan-day-summary-cell {
  height: 44px;
  min-height: 44px;
  padding: 4px;
  align-content: center;
  gap: 0;
  background: #ffffff;
}

.team-workload-panel .plan-workload-grid.team-workload .plan-workload-user-row.plan-workload-summary-row .plan-capacity-bar {
  height: 36px;
}

.team-workload-panel .plan-workload-grid.team-workload .plan-workload-user-row.plan-workload-summary-row .plan-week-total {
  display: grid;
  grid-template-rows: 36px;
  align-content: center;
  justify-items: stretch;
  height: 44px;
  min-height: 44px;
  padding: 4px;
  background: #ffffff;
}

.team-workload-panel .plan-workload-grid.team-workload .plan-workload-user-row.plan-workload-summary-row .plan-week-total-value {
  height: 36px;
  border: 1px solid #e0e6e1;
  background: #fbfcfb;
  color: var(--text);
}

.team-workload-panel .plan-workload-grid.team-workload .plan-workload-detail-row {
  min-height: 0;
  border-bottom: 1px solid #f2f4f1;
}

.team-workload-panel .plan-workload-grid.team-workload .plan-workload-detail-row > .plan-workload-cell {
  min-height: 0;
  background: #ffffff;
}

.team-workload-panel .plan-workload-grid.team-workload .plan-workload-detail-spacer {
  background: #ffffff;
}

.team-workload-panel .plan-workload-grid.team-workload .plan-day-detail-cell {
  min-height: 0;
  padding: 0 4px 6px;
  align-content: start;
  gap: 4px;
  background: #ffffff;
}

.team-workload-panel .plan-workload-grid.team-workload .plan-day-detail-cell .plan-day-tasks:empty {
  display: none;
}

.team-workload-panel > .plan-workload-scroll:has(.plan-status-menu),
.team-workload-panel > .plan-week-wrap:has(.plan-status-menu) {
  padding-bottom: 150px;
}

/* Plan task tables: split task context into stable Assigned by / Code / Name columns. */
.plan-work-panel .plan-task-sections {
  --plan-work-columns: 22px minmax(260px, 1.35fr) 82px 82px 82px 82px 82px minmax(150px, 0.8fr) 82px 82px 82px 72px;
  --plan-work-min-width: 1294px;
}

.plan-unified-task-list {
  --plan-task-list-columns: 22px minmax(260px, 1.35fr) 82px 82px minmax(150px, 0.8fr) 82px 82px 82px 82px 82px 72px;
  --plan-task-list-min-width: 1204px;
}

.plan-work-panel .plan-task-meta-cell,
.plan-unified-task-list .plan-task-meta-cell {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
}

.plan-work-panel .plan-task-subtasks-cell,
.plan-unified-task-list .plan-task-subtasks-cell {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 12px;
}

.plan-work-panel .plan-task-assigned-by-cell,
.plan-unified-task-list .plan-task-assigned-by-cell {
  text-align: left;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.plan-work-panel .plan-task-code-cell,
.plan-unified-task-list .plan-task-code-cell {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.plan-work-panel .plan-resizable-header-cell,
.plan-unified-task-list .plan-resizable-header-cell {
  display: flex;
  align-items: center;
}

.plan-work-panel .plan-task-list-header > div:nth-child(2),
.plan-work-panel .plan-task-list-header > div:nth-child(3),
.plan-work-panel .plan-task-list-header > div:nth-child(4),
.plan-work-panel .plan-task-list-header > div:nth-child(5),
.plan-unified-task-list .plan-task-list-header > div:nth-child(2),
.plan-unified-task-list .plan-task-list-header > div:nth-child(3),
.plan-unified-task-list .plan-task-list-header > div:nth-child(4),
.plan-unified-task-list .plan-task-list-header > div:nth-child(5) {
  justify-content: flex-start;
  text-align: left;
}

.plan-work-panel .plan-task-list-header-side span:nth-child(1),
.plan-work-panel .plan-task-list-header-side span:nth-child(2),
.plan-work-panel .plan-task-list-header-side span:nth-child(3),
.plan-unified-task-list .plan-task-list-header-side span:nth-child(1),
.plan-unified-task-list .plan-task-list-header-side span:nth-child(2),
.plan-unified-task-list .plan-task-list-header-side span:nth-child(3) {
  justify-content: flex-start;
  text-align: left;
}

.plan-work-panel .plan-task-list-header-side span:nth-child(4),
.plan-unified-task-list .plan-task-list-header-side span:nth-child(4) {
  justify-content: center;
  text-align: center;
}

.plan-work-panel .plan-task-assignee-cell,
.plan-unified-task-list .plan-task-assignee-cell {
  justify-self: stretch;
  place-items: center start;
}

.plan-work-panel .plan-task-priority-cell,
.plan-unified-task-list .plan-task-priority-cell {
  justify-self: stretch;
  place-items: center start;
}

.plan-work-panel .plan-task-date,
.plan-unified-task-list .plan-task-date {
  text-align: left;
}

.plan-work-panel .plan-task-estimate,
.plan-unified-task-list .plan-task-estimate {
  text-align: left;
  justify-items: start;
}

.plan-work-panel .plan-task-estimate-empty,
.plan-unified-task-list .plan-task-estimate-empty,
.plan-work-panel .plan-task-timer-actions,
.plan-unified-task-list .plan-task-timer-actions {
  justify-self: start;
}

.plan-work-panel .plan-resizable-header-cell {
  position: relative;
  min-height: 24px;
  padding-right: 12px;
}

.plan-work-panel .plan-column-resizer {
  position: absolute;
  top: 3px;
  right: 0;
  bottom: 3px;
  width: 9px;
  border: 0;
  border-radius: 4px;
  padding: 0;
  background: transparent;
  cursor: col-resize;
}

.plan-work-panel .plan-column-resizer::after {
  content: "";
  position: absolute;
  top: 3px;
  bottom: 3px;
  right: 4px;
  width: 1px;
  background: transparent;
}

.plan-work-panel .plan-column-resizer:hover::after,
.plan-work-panel .plan-column-resizer:focus-visible::after,
body.is-resizing-plan-column .plan-work-panel .plan-column-resizer::after {
  background: #98a2b3;
}

body.is-resizing-plan-column {
  cursor: col-resize;
  user-select: none;
}

/* Team workload final layout: fixed summary row + separate task detail row per person. */
.team-workload-panel .plan-workload-grid.team-workload {
  display: block;
  width: 100%;
  min-width: max(100%, 1240px);
  max-width: none;
}

.team-workload-panel .plan-workload-grid.team-workload .plan-workload-row,
.team-workload-panel .plan-workload-grid.team-workload .plan-workload-user-block > .plan-workload-row {
  display: grid;
  width: 100%;
  box-sizing: border-box;
  grid-template-columns: 270px repeat(var(--plan-day-count), minmax(184px, 1fr)) 96px;
}

.team-workload-panel .plan-workload-grid.team-workload .plan-workload-user-block {
  width: 100%;
  box-sizing: border-box;
  border-bottom: 1px solid #f2f4f1;
  background: #ffffff;
}

.team-workload-panel .plan-workload-grid.team-workload .plan-workload-user-block > .plan-workload-row {
  border-bottom: 0;
}

.team-workload-panel .plan-workload-grid.team-workload .plan-workload-summary-row {
  height: 44px;
  min-height: 44px;
}

.team-workload-panel .plan-workload-grid.team-workload .plan-workload-summary-row > .plan-workload-cell {
  height: 44px;
  min-height: 44px;
  box-sizing: border-box;
}

.team-workload-panel .plan-workload-grid.team-workload .plan-workload-summary-row .plan-person {
  height: 44px;
  min-height: 44px;
  padding: 6px 8px 6px 24px;
  align-items: center;
}

.team-workload-panel .plan-workload-grid.team-workload .plan-day-summary-cell {
  display: grid;
  height: 44px;
  min-height: 44px;
  padding: 4px;
  align-content: center;
  gap: 0;
  background: #ffffff;
}

.team-workload-panel .plan-workload-grid.team-workload .plan-day-summary-cell .plan-capacity-bar {
  height: 36px;
}

.team-workload-panel .plan-workload-grid.team-workload .plan-workload-summary-row .plan-week-total {
  display: grid;
  height: 44px;
  min-height: 44px;
  grid-template-rows: 36px;
  align-content: center;
  justify-items: stretch;
  padding: 4px;
  background: #ffffff;
}

.team-workload-panel .plan-workload-grid.team-workload .plan-workload-summary-row .plan-week-total-value {
  display: grid;
  width: 100%;
  height: 36px;
  box-sizing: border-box;
  place-items: center end;
  border: 1px solid #e0e6e1;
  border-radius: 6px;
  padding: 0 10px;
  background: #fbfcfb;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-align: right;
}

.team-workload-panel .plan-workload-grid.team-workload .plan-workload-detail-row {
  min-height: 0;
  border-bottom: 0;
}

.team-workload-panel .plan-workload-grid.team-workload .plan-workload-detail-row > .plan-workload-cell {
  min-height: 0;
  background: #ffffff;
}

.team-workload-panel .plan-workload-grid.team-workload .plan-workload-detail-spacer {
  background: #ffffff;
}

.team-workload-panel .plan-workload-grid.team-workload .plan-day-detail-cell {
  display: grid;
  min-height: 0;
  padding: 0 4px 8px;
  align-content: start;
  gap: 4px;
  background: #ffffff;
}

.team-workload-panel .plan-workload-grid.team-workload .plan-day-detail-cell .plan-day-tasks {
  display: grid;
  gap: 4px;
}

.team-workload-panel .plan-workload-grid.team-workload .plan-day-detail-cell .plan-day-tasks:empty {
  display: none;
}

.team-workload-panel .plan-workload-grid.team-workload .plan-workload-detail-row .plan-workload-total-cell {
  border-right: 0;
}

.team-workload-panel .plan-workload-grid.team-workload .plan-workload-summary-row .plan-week-total {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.team-workload-panel .plan-workload-grid.team-workload .plan-workload-summary-row .plan-week-total-value {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.team-workload-panel > .plan-workload-scroll {
  width: 100% !important;
  max-width: none !important;
}

.team-workload-panel > .plan-workload-scroll > .plan-workload-grid.team-workload {
  width: 100% !important;
  min-width: 0 !important;
}

.team-workload-panel .plan-workload-grid.team-workload .plan-workload-row,
.team-workload-panel .plan-workload-grid.team-workload .plan-workload-user-block,
.team-workload-panel .plan-workload-grid.team-workload .plan-workload-user-block > .plan-workload-row {
  width: 100% !important;
  min-width: 0 !important;
}

.team-workload-panel .plan-workload-grid.team-workload .plan-workload-row,
.team-workload-panel .plan-workload-grid.team-workload .plan-workload-user-block > .plan-workload-row {
  grid-template-columns: 270px repeat(var(--plan-day-count), minmax(168px, 1fr)) 96px !important;
}

.team-workload-panel .plan-workload-toolbar {
  grid-template-columns: minmax(260px, 340px) 180px auto;
  align-items: end;
}

.team-workload-panel .plan-workload-filter-control,
.team-workload-panel .plan-workload-role-filter {
  min-width: 0;
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
}

.team-workload-panel .plan-workload-filter-label,
.team-workload-panel .plan-workload-role-filter > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.2;
}

.team-workload-panel .plan-workload-people-filter > summary {
  min-height: 36px;
  padding: 0 10px;
}

.team-workload-panel .plan-workload-people-summary-text {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-workload-panel .plan-workload-people-filter > summary span,
.team-workload-panel .plan-workload-person-option-name,
.team-workload-panel .plan-workload-person-option-meta {
  font-weight: 400;
}

.team-workload-panel .plan-workload-people-menu {
  width: min(430px, calc(100vw - 40px));
}

.team-workload-panel .plan-workload-people-actions {
  align-items: flex-start;
}

.team-workload-panel .plan-workload-people-bulk-actions {
  flex-wrap: wrap;
  gap: 6px;
}

.team-workload-panel .plan-workload-role-filter select {
  width: 100%;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 10px;
  background: #ffffff;
  color: var(--text);
  font: inherit;
}

.topbar-view-actions {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.topbar-view-actions .button {
  min-height: 34px;
}

.topbar-view-actions .team-time-filter-group,
.topbar-view-actions .team-time-summary-strip,
.project-status-topbar-actions {
  flex-wrap: nowrap;
}

.topbar-view-actions .team-time-summary-strip {
  margin-left: 2px;
}

.project-create-modal {
  width: min(980px, calc(100vw - 56px));
}

.project-create-modal .modal-header {
  margin: 0;
  padding: 18px;
}

.project-create-modal > .form-grid {
  padding: 14px 18px 18px;
}

.project-create-form .project-form-full {
  grid-column: 1 / -1;
  min-width: 0;
}

.project-create-form .project-milestone-editor {
  margin: 4px 0 0;
}

.project-create-form .project-quality-editor {
  margin: 4px 0 0;
}

.project-create-form .project-milestone-editor-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.project-create-form .project-role-form-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.project-create-form .project-role-form-grid {
  align-items: start;
  margin-top: 4px;
}

.project-create-form .project-role-group {
  min-width: 0;
}

.project-create-form .project-role-options {
  max-height: 250px;
  overflow-y: auto;
  padding-right: 4px;
}

.project-create-form .project-role-group .check-row {
  min-width: 0;
}

.project-create-form .project-role-group .check-row > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-create-actions {
  margin-top: 4px;
}

@media (max-width: 820px) {
  .project-create-form .project-milestone-editor-grid,
  .project-create-form .project-role-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .project-create-form .project-milestone-editor-grid,
  .project-create-form .project-role-form-grid {
    grid-template-columns: minmax(0, 1fr);
  }

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

  .project-quality-wide {
    grid-column: auto;
  }
}

.project-import-modal {
  width: min(1080px, calc(100vw - 56px));
}

.project-import-modal .modal-header {
  margin: 0;
  padding: 18px;
}

.project-import-body {
  display: grid;
  gap: 12px;
  padding: 0 18px 14px;
}

.project-import-actions {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) auto auto;
  gap: 10px;
  align-items: end;
}

.project-import-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.project-import-summary strong {
  margin-right: auto;
}

.project-import-file-error,
.project-import-errors {
  color: var(--danger);
}

.project-import-file-error {
  padding: 10px 12px;
  border: 1px solid rgba(192, 57, 43, 0.28);
  border-radius: var(--radius-2);
  background: rgba(192, 57, 43, 0.06);
}

.project-import-preview-wrap {
  max-height: min(420px, 48vh);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-2);
}

.project-import-preview-table {
  min-width: 860px;
}

.plan-task-import-preview-table {
  min-width: 1180px;
}

.project-import-preview-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-soft);
}

.project-import-row-error {
  background: rgba(192, 57, 43, 0.04);
}

.project-import-errors {
  display: grid;
  gap: 3px;
  min-width: 220px;
  font-size: 12px;
}

.project-import-modal-actions {
  bottom: 0;
  margin: 0;
  padding: 14px 18px 18px;
}

@media (max-width: 900px) {
  .team-workload-panel .plan-workload-toolbar {
    grid-template-columns: 1fr;
  }

  .topbar-view-actions {
    justify-content: flex-start;
  }

  .project-status-topbar-actions,
  .project-import-actions {
    grid-template-columns: 1fr;
    flex-wrap: wrap;
  }
}

/* Current polish pass: clearer Projects Status controls and sticky context columns. */
.project-status-toolbar.project-status-filter-toolbar {
  display: block;
  padding: 10px 16px 6px;
  border-bottom: 0;
}

.project-status-toolbar.project-status-filter-toolbar .project-status-filter-group {
  width: fit-content;
  max-width: 100%;
  grid-template-columns: 220px 170px 220px 220px;
  justify-content: start;
  gap: 10px;
}

.project-status-export-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 8px;
  padding: 0 16px 12px;
  border-bottom: 1px solid var(--line);
}

.project-status-export-toolbar .project-status-export-group {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(280px, 360px) auto;
  gap: 8px;
  align-items: flex-end;
  padding: 0;
  border-left: 0;
}

.project-status-export-toolbar label {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin: 0;
  color: #667085;
  font-size: 11px;
  font-weight: 500;
  line-height: 14px;
  white-space: nowrap;
}

.project-status-export-toolbar select {
  min-height: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 4px 24px 4px 9px;
  background: #ffffff;
  color: var(--text);
  font-size: 12px;
}

.project-status-export-toolbar .button {
  min-height: 30px;
  height: 30px;
  padding: 4px 10px;
}

.project-status-grid-head > div:first-child,
.project-status-main-row > .project-status-expand-cell {
  position: sticky;
  left: 0;
  z-index: 8;
}

.project-status-grid-head > div:nth-child(2),
.project-status-main-row > .project-status-project-cell {
  position: sticky;
  left: 34px;
  z-index: 8;
  box-shadow: 1px 0 0 var(--line);
}

.project-status-grid-head > div:last-child,
.project-status-main-row > .project-status-actions-cell {
  position: sticky;
  right: 0;
  z-index: 9;
  box-shadow: -1px 0 0 var(--line);
}

.project-status-grid-head > div:first-child,
.project-status-grid-head > div:nth-child(2),
.project-status-grid-head > div:last-child {
  background: #f7f8fa;
}

.project-status-main-row > .project-status-expand-cell,
.project-status-main-row > .project-status-project-cell,
.project-status-main-row > .project-status-actions-cell {
  background: #ffffff;
}

.project-status-main-row.expanded > .project-status-expand-cell,
.project-status-main-row.expanded > .project-status-project-cell,
.project-status-main-row.expanded > .project-status-actions-cell {
  background: #fbfdfb;
}

.result-provisional-note {
  white-space: nowrap;
}

@media (max-width: 1120px) {
  .project-status-toolbar.project-status-filter-toolbar .project-status-filter-group {
    grid-template-columns: repeat(2, minmax(190px, 1fr));
    width: 100%;
  }

  .project-status-export-toolbar .project-status-export-group {
    grid-template-columns: minmax(240px, 1fr) auto;
    width: 100%;
    max-width: 560px;
  }

  .project-billing-form {
    grid-template-columns: repeat(4, minmax(140px, 1fr));
  }

  .project-billing-check {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(116px, 1fr));
  }

  .project-billing-comment {
    grid-column: span 2;
  }

  .project-billing-actions {
    grid-column: span 2;
    justify-content: flex-start;
  }
}

/* Team week filters: match the compact Results toolbar rhythm. */
.team-workload-panel .plan-workload-toolbar {
  display: grid;
  width: fit-content;
  max-width: 100%;
  grid-template-columns: 340px 180px auto;
  align-items: end;
  gap: 8px;
  padding: 8px 16px;
}

.team-workload-panel .plan-workload-filter-control,
.team-workload-panel .plan-workload-role-filter {
  min-width: 0;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  color: #667085;
  font-size: 11px;
  font-weight: 500;
  line-height: 14px;
  white-space: nowrap;
}

.team-workload-panel .plan-workload-filter-label,
.team-workload-panel .plan-workload-role-filter > span {
  color: #667085;
  font-size: 11px;
  font-weight: 500;
  line-height: 14px;
}

.team-workload-panel .plan-workload-people-filter > summary,
.team-workload-panel .plan-workload-role-filter select {
  min-height: 30px;
  height: 30px;
  border-radius: 5px;
  font-size: 12px;
}

.team-workload-panel .plan-workload-people-filter > summary {
  padding: 4px 9px;
}

.team-workload-panel .plan-workload-role-filter select {
  padding: 4px 24px 4px 9px;
}

.team-workload-panel .plan-workload-people-summary-text {
  color: var(--text);
  font-size: 12px;
  font-weight: 400;
}

.team-workload-panel .plan-workload-count {
  align-self: center;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .team-workload-panel .plan-workload-toolbar {
    width: 100%;
    grid-template-columns: 1fr;
  }
}

/* Wide professional data layout pass.
   Keep tables visually consistent and let them use the full working area. */
:root {
  --tv-page-gutter: 16px;
  --tv-table-shell-width: calc(100% - (var(--tv-page-gutter) * 2));
}

.panel.tight,
.panel.workload-panel,
.plan-main-panel,
.plan-work-panel,
.plan-lists-panel,
.team-workload-panel,
.team-time-tabs-panel,
.time-balance-panel {
  width: 100%;
  max-width: none;
}

.panel.tight > .section-header,
.plan-work-panel > .section-header,
.plan-lists-panel > .section-header,
.team-workload-panel > .section-header,
.team-time-tabs-panel .team-time-tabs,
.time-balance-panel > .time-balance-header {
  padding-left: var(--tv-page-gutter);
  padding-right: var(--tv-page-gutter);
}

.result-table-wrap,
.users-table-wrap,
.directories-table-wrap,
.team-chargeability-panel .team-chargeability-table,
.panel.tight > .table-wrap:not(.result-table-wrap):not(.users-table-wrap):not(.directories-table-wrap),
.details-panel-content > .table-wrap,
.time-matrix-panel > .workload-scroll,
.team-time-panel > .workload-scroll,
.team-workload-panel > .plan-workload-scroll,
.team-workload-panel > .plan-week-wrap,
.plan-work-panel .plan-task-sections,
.plan-unified-task-list {
  width: var(--tv-table-shell-width);
  max-width: var(--tv-table-shell-width);
  margin-left: var(--tv-page-gutter);
  margin-right: var(--tv-page-gutter);
  overflow-x: auto;
  overflow-y: visible;
}

.project-status-grid-wrap {
  width: 100%;
  max-width: 100%;
  padding-left: var(--tv-page-gutter);
  padding-right: var(--tv-page-gutter);
  overflow-x: auto;
}

.project-status-grid,
.workload-matrix,
.team-time-matrix,
.project-approval-matrix,
.plan-workload-grid,
.plan-unified-task-list,
.plan-task-list,
.team-chargeability-table {
  max-width: none;
}

.project-status-grid {
  width: 100%;
  min-width: 1680px;
}

.result-table,
.users-table,
.directories-table,
.team-chargeability-table,
.panel.tight > .table-wrap:not(.result-table-wrap):not(.users-table-wrap):not(.directories-table-wrap) table,
.details-panel-content > .table-wrap table {
  width: 100%;
  min-width: 1080px;
  table-layout: fixed;
}

.users-table {
  min-width: 1160px;
}

.directories-table {
  min-width: 860px;
}

.result-table {
  min-width: 1320px;
}

.team-chargeability-table {
  min-width: 920px;
}

.time-matrix-panel .workload-matrix,
.team-time-panel .workload-matrix,
.team-time-panel .team-time-matrix,
.team-time-panel .project-approval-matrix {
  width: 100%;
  min-width: max-content;
}

.team-workload-panel .plan-workload-grid,
.team-workload-panel .plan-workload-grid.team-workload {
  width: 100%;
  min-width: 1220px;
}

.team-workload-panel .plan-workload-row,
.team-workload-panel .plan-workload-grid.team-workload .plan-workload-row,
.team-workload-panel .plan-workload-grid.team-workload .plan-workload-user-block > .plan-workload-row {
  width: 100% !important;
}

.plan-work-panel .plan-task-sections,
.plan-unified-task-list {
  min-width: 0;
  padding-left: 0;
  padding-right: 0;
}

.plan-work-panel .plan-task-list-header,
.plan-work-panel .plan-task-row:not(.plan-task-edit-row),
.plan-unified-task-list .plan-task-list-header,
.plan-unified-task-list .plan-task-row:not(.plan-task-edit-row),
.plan-unified-task-list .plan-list-group-title,
.plan-unified-task-list .plan-list-add-task-row {
  width: 100%;
}

.project-status-toolbar.project-status-filter-toolbar,
.project-status-export-toolbar,
.result-toolbar,
.users-toolbar,
.directories-toolbar,
.team-workload-panel .plan-workload-toolbar {
  width: var(--tv-table-shell-width);
  max-width: var(--tv-table-shell-width);
  margin-left: var(--tv-page-gutter);
  margin-right: var(--tv-page-gutter);
  padding-left: 0;
  padding-right: 0;
}

/* Five filters on one line (Milestone added 2026-10-07): Search, Status, Milestone, Person,
   Completion balance. Decided by the width of the filter bar itself (the side menu and the
   scrollbar change it): narrower bars put each name above its field to stay on one line, and only
   below that do the filters wrap. The minimums keep "Not completed", "All milestones" and
   "All balances" readable. */
.project-status-toolbar.project-status-filter-toolbar {
  container: project-status-filters / inline-size;
}

.project-status-toolbar.project-status-filter-toolbar .project-status-filter-group {
  width: 100%;
  grid-template-columns: minmax(152px, 1fr) minmax(175px, 0.9fr) minmax(187px, 0.95fr) minmax(160px, 1fr) minmax(246px, 1.3fr);
}

@container project-status-filters (width < 960px) {
  .project-status-toolbar.project-status-filter-toolbar .project-status-filter-group {
    grid-template-columns: minmax(112px, 1fr) minmax(138px, 0.9fr) minmax(132px, 0.95fr) minmax(112px, 1fr) minmax(140px, 1.3fr);
  }

  .project-status-toolbar.project-status-filter-toolbar .project-status-filter-group > label {
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
  }
}

@container project-status-filters (width < 674px) {
  .project-status-toolbar.project-status-filter-toolbar .project-status-filter-group {
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  }
}

.project-status-export-toolbar .project-status-export-group {
  width: min(560px, 100%);
}

.result-toolbar {
  grid-template-columns: minmax(180px, 1.2fr) minmax(150px, 0.8fr) minmax(190px, 1fr) minmax(150px, 0.75fr);
}

.team-workload-panel .plan-workload-toolbar {
  grid-template-columns: minmax(260px, 360px) minmax(150px, 190px) auto;
}

.result-table th,
.result-table td,
.users-table th,
.users-table td,
.directories-table th,
.directories-table td,
.team-chargeability-table .team-chargeability-row > div {
  padding-left: 12px;
  padding-right: 12px;
}

/* Plan > Tasks: keep headers, list controls and task rows on the same axes. */
.plan-lists-panel .plan-unified-task-list {
  --tasks-grid-columns:
    22px
    minmax(280px, 1.45fr)
    minmax(82px, 0.38fr)
    minmax(82px, 0.38fr)
    minmax(160px, 0.72fr)
    minmax(82px, 0.38fr)
    minmax(82px, 0.38fr)
    minmax(82px, 0.38fr)
    minmax(82px, 0.38fr)
    minmax(96px, 0.44fr)
    76px;
  --tasks-grid-min-width: 1210px;
}

.plan-lists-panel .plan-unified-task-list .plan-task-list-header,
.plan-lists-panel .plan-unified-task-list .plan-task-row:not(.plan-task-edit-row),
.plan-lists-panel .plan-unified-task-list .plan-list-group-title,
.plan-lists-panel .plan-unified-task-list .plan-list-add-task-row {
  display: grid;
  grid-template-columns: var(--tasks-grid-columns) !important;
  column-gap: 8px;
  width: 100%;
  min-width: var(--tasks-grid-min-width);
  align-items: center;
}

.plan-lists-panel .plan-unified-task-list .plan-task-list-header-side.no-timer,
.plan-lists-panel .plan-unified-task-list .plan-task-row:not(.plan-task-edit-row) > .plan-task-side.no-timer {
  display: contents;
}

.plan-lists-panel .plan-unified-task-list .plan-task-list-header > *,
.plan-lists-panel .plan-unified-task-list .plan-task-list-header-side > *,
.plan-lists-panel .plan-unified-task-list .plan-task-row:not(.plan-task-edit-row) > *,
.plan-lists-panel .plan-unified-task-list .plan-task-side.no-timer > * {
  min-width: 0;
}

.plan-lists-panel .plan-unified-task-list .plan-resizable-header-cell,
.plan-lists-panel .plan-unified-task-list .plan-task-subtasks-cell,
.plan-lists-panel .plan-unified-task-list .plan-task-code-cell,
.plan-lists-panel .plan-unified-task-list .plan-task-meta-cell,
.plan-lists-panel .plan-unified-task-list .plan-task-estimate,
.plan-lists-panel .plan-unified-task-list .plan-task-assignee-cell,
.plan-lists-panel .plan-unified-task-list .plan-task-assigned-by-cell,
.plan-lists-panel .plan-unified-task-list .plan-task-priority-cell,
.plan-lists-panel .plan-unified-task-list .plan-task-date,
.plan-lists-panel .plan-unified-task-list .plan-task-actions {
  justify-self: stretch;
  text-align: left;
}

.plan-lists-panel .plan-unified-task-list .plan-task-main,
.plan-lists-panel .plan-unified-task-list .plan-task-title,
.plan-lists-panel .plan-unified-task-list .plan-task-context,
.plan-lists-panel .plan-unified-task-list .plan-subtask-summary,
.plan-lists-panel .plan-unified-task-list .plan-task-subtasks-cell,
.plan-lists-panel .plan-unified-task-list .plan-task-code-cell,
.plan-lists-panel .plan-unified-task-list .plan-task-meta-cell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plan-lists-panel .plan-unified-task-list .plan-task-estimate,
.plan-lists-panel .plan-unified-task-list .plan-task-estimate-empty {
  justify-items: start;
  justify-self: stretch;
}

.plan-lists-panel .plan-unified-task-list .plan-task-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.plan-lists-panel .plan-unified-task-list .clickup-list-title-left {
  grid-column: 1 / 11;
}

.plan-lists-panel .plan-unified-task-list .plan-list-more {
  grid-column: 11;
}

.plan-lists-panel .plan-unified-task-list .plan-list-group,
.plan-lists-panel .plan-unified-task-list .clickup-task-group-body,
.plan-lists-panel .plan-unified-task-list .plan-task-list {
  width: 100% !important;
  min-width: var(--tasks-grid-min-width);
  max-width: none !important;
}

.plan-lists-panel .plan-unified-task-list .plan-task-list-header,
.plan-lists-panel .plan-unified-task-list .plan-task-row:not(.plan-task-edit-row),
.plan-lists-panel .plan-unified-task-list .plan-list-group-title,
.plan-lists-panel .plan-unified-task-list .plan-list-add-task-row {
  box-sizing: border-box;
  justify-self: stretch;
}

/* Plan > My Work: use the full available width, not the old fixed pixel layout. */
.plan-work-panel .plan-task-sections {
  --my-work-grid-columns:
    22px
    minmax(300px, 2fr)
    minmax(82px, 0.42fr)
    minmax(82px, 0.42fr)
    minmax(82px, 0.42fr)
    minmax(82px, 0.42fr)
    minmax(82px, 0.42fr)
    minmax(170px, 0.95fr)
    minmax(82px, 0.42fr)
    minmax(82px, 0.42fr)
    minmax(96px, 0.48fr)
    76px;
  --plan-work-columns: var(--my-work-grid-columns) !important;
  --plan-work-min-width: 1310px !important;
}

.plan-work-panel .plan-task-list-header,
.plan-work-panel .plan-task-row:not(.plan-task-edit-row) {
  grid-template-columns: var(--my-work-grid-columns) !important;
  width: 100%;
  min-width: var(--plan-work-min-width);
}

.plan-work-panel .plan-task-list,
.plan-work-panel .plan-task-section {
  width: 100%;
  min-width: var(--plan-work-min-width);
}

/* Team Time: fill the working area on wide screens, scroll only when needed. */
.team-time-scroll-top {
  width: var(--tv-table-shell-width);
  max-width: var(--tv-table-shell-width);
  height: 18px;
  margin: 0 var(--tv-page-gutter);
  overflow-x: auto;
  overflow-y: hidden;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}

.team-time-scroll-spacer {
  height: 1px;
}

.team-time-panel > .workload-scroll,
.team-chargeability-panel .team-chargeability-table {
  width: var(--tv-table-shell-width) !important;
  max-width: var(--tv-table-shell-width) !important;
  margin-left: var(--tv-page-gutter) !important;
  margin-right: var(--tv-page-gutter) !important;
}

.team-people-panel .team-time-matrix,
.team-projects-panel .project-approval-matrix {
  width: 100% !important;
  max-width: none !important;
}

.team-people-panel .team-time-matrix {
  min-width: 1160px;
}

.team-people-panel .team-time-matrix .workload-matrix-row {
  grid-template-columns:
    minmax(620px, 1fr)
    repeat(var(--day-count), minmax(78px, 0.15fr))
    minmax(76px, 0.14fr) !important;
}

.team-projects-panel .project-approval-matrix {
  min-width: 1180px;
}

.team-projects-panel .project-approval-matrix .workload-matrix-row {
  grid-template-columns:
    minmax(560px, 1fr)
    repeat(var(--day-count), minmax(92px, 0.18fr))
    minmax(78px, 0.14fr) !important;
}

.team-chargeability-panel .team-chargeability-table {
  display: grid;
  min-width: 960px;
  max-height: calc(100vh - 282px);
  overflow: auto;
}

.team-chargeability-panel .team-chargeability-header {
  position: sticky;
  top: 0;
  z-index: 20;
  box-shadow: inset 0 -1px 0 var(--line);
}

.team-chargeability-panel .team-chargeability-row {
  width: 100%;
  grid-template-columns:
    minmax(300px, 1.4fr)
    minmax(132px, 0.58fr)
    minmax(122px, 0.52fr)
    minmax(122px, 0.52fr)
    minmax(122px, 0.52fr)
    minmax(132px, 0.58fr);
}

/* Projects Status: same wide data-table model as Team Time. */
@media (min-width: 761px) {
  .panel.tight.project-status-panel {
    overflow: visible;
  }

  .project-status-panel .project-status-list-header {
    position: sticky;
    top: var(--topbar-height);
    z-index: 24;
    background: #ffffff;
    box-shadow: 0 1px 0 var(--line);
  }
}

.project-status-panel .project-status-grid-wrap {
  width: var(--tv-table-shell-width) !important;
  max-width: var(--tv-table-shell-width) !important;
  max-height: calc(100vh - 282px);
  margin-left: var(--tv-page-gutter) !important;
  margin-right: var(--tv-page-gutter) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow: auto;
  scrollbar-gutter: stable;
}

.project-status-panel .project-status-grid-head {
  position: sticky;
  top: 0;
  z-index: 20;
  box-shadow: inset 0 -1px 0 var(--line);
}

.project-status-panel .project-status-grid {
  --project-status-wide-columns:
    34px
    minmax(220px, 0.46fr)
    minmax(150px, 0.32fr)
    minmax(112px, 0.26fr)
    minmax(116px, 0.28fr)
    minmax(96px, 0.22fr)
    minmax(118px, 0.26fr)
    minmax(132px, 0.28fr)
    minmax(116px, 0.25fr)
    repeat(4, minmax(92px, 0.22fr))
    minmax(124px, 0.28fr)
    74px;
  width: 100% !important;
  min-width: 1680px;
  max-width: none !important;
  overflow: visible;
}

.project-status-panel .project-status-grid-row {
  grid-template-columns: var(--project-status-wide-columns) !important;
}

.project-status-panel.roles-collapsed .project-status-grid {
  --project-status-wide-columns:
    34px
    minmax(220px, 0.46fr)
    minmax(150px, 0.32fr)
    minmax(112px, 0.26fr)
    minmax(116px, 0.28fr)
    minmax(96px, 0.22fr)
    minmax(118px, 0.26fr)
    minmax(132px, 0.28fr)
    minmax(116px, 0.25fr)
    minmax(124px, 0.28fr)
    74px;
  min-width: 1300px;
}

.project-status-panel.roles-collapsed .project-status-grid-head > div:nth-child(n + 10):nth-child(-n + 13),
.project-status-panel.roles-collapsed .project-status-main-row > .project-status-role-cell {
  display: none;
}

.project-status-panel.roles-collapsed .project-status-grid-detail {
  min-width: 1300px;
}

.project-status-panel .project-status-grid-detail {
  width: 100%;
  min-width: 1680px;
}

.project-status-panel .project-status-role-owner-list {
  width: 100%;
  justify-content: flex-start;
}

/* My Time: make the time-entry matrix fill the same full-width shell. */
.time-matrix-panel > .workload-scroll {
  width: var(--tv-table-shell-width) !important;
  max-width: var(--tv-table-shell-width) !important;
  margin-left: var(--tv-page-gutter) !important;
  margin-right: var(--tv-page-gutter) !important;
}

.time-matrix-panel .workload-matrix {
  width: 100% !important;
  min-width: 1180px;
  max-width: none !important;
}

.time-matrix-panel .workload-matrix .workload-matrix-row {
  grid-template-columns:
    minmax(500px, 1fr)
    repeat(var(--day-count), minmax(108px, 0.22fr))
    minmax(86px, 0.16fr) !important;
}

.time-matrix-panel .workload-matrix.has-timer .workload-matrix-row {
  grid-template-columns:
    minmax(460px, 1fr)
    minmax(94px, 0.18fr)
    repeat(var(--day-count), minmax(108px, 0.22fr))
    minmax(86px, 0.16fr) !important;
}

/* Team workload: 0.00 hours stays as a full pale-green capacity cell. */
.plan-workload-grid.no-person .plan-capacity-bar.empty,
.plan-workload-grid.team-workload .plan-capacity-bar.empty {
  border-color: var(--tv-charge-border) !important;
  background: var(--tv-charge-chip) !important;
  color: var(--tv-charge-text) !important;
}

.plan-workload-grid.no-person .plan-capacity-bar.empty .plan-capacity-fill,
.plan-workload-grid.team-workload .plan-capacity-bar.empty .plan-capacity-fill {
  display: none !important;
}

/* Team workload: keep the Total column readable when all seven days are visible. */
.team-workload-panel > .plan-workload-scroll {
  padding-right: 10px !important;
}

.team-workload-panel .plan-workload-grid.team-workload {
  min-width: max(100%, 1680px) !important;
}

.team-workload-panel .plan-workload-grid.team-workload .plan-workload-row,
.team-workload-panel .plan-workload-grid.team-workload .plan-workload-user-block > .plan-workload-row {
  grid-template-columns: 270px repeat(var(--plan-day-count), minmax(168px, 1fr)) 132px !important;
}

.team-workload-panel .plan-workload-total-cell {
  overflow: visible;
}

/* Plan > Tasks: lists behave like My Work sections under one stable header. */
.plan-lists-panel .plan-unified-task-list .plan-list-group-title {
  min-height: 34px;
  padding-top: 0;
  padding-bottom: 0;
  border-top: 0;
  border-bottom: 1px solid var(--line);
  background: #ffffff !important;
  color: var(--text);
}

.plan-lists-panel .plan-unified-task-list .clickup-list-title-left {
  grid-column: 1 / -1;
  min-height: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
}

.plan-lists-panel .plan-unified-task-list .plan-list-title-name {
  font-weight: 700;
}

.plan-lists-panel .plan-unified-task-list .plan-list-toggle-button {
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  font: inherit;
}

.plan-lists-panel .plan-unified-task-list .plan-list-toggle-button .plan-list-title-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plan-lists-panel .plan-unified-task-list .plan-list-edit-inline {
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
}

.plan-lists-panel .plan-unified-task-list .plan-list-title-edit-form {
  grid-column: 1 / 5;
  width: max-content;
  max-width: 100%;
  display: inline-grid;
  grid-template-columns: minmax(180px, 280px) auto auto auto;
  align-items: center;
  gap: 6px;
}

.plan-lists-panel .plan-unified-task-list .plan-list-title-edit-form input[name="name"] {
  width: 100%;
  min-height: 28px;
  height: 28px;
  font-weight: 400;
}

.plan-lists-panel .plan-unified-task-list .plan-list-title-edit-form .button {
  width: auto;
  min-width: 64px;
  min-height: 28px;
  padding: 5px 10px;
}

.plan-lists-panel .plan-task-inline-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.plan-lists-panel .plan-list-group-title.draggable,
.plan-lists-panel .plan-list-group-title.draggable .plan-list-toggle-button,
.plan-lists-panel .plan-task-row.draggable,
.plan-lists-panel .plan-task-row.draggable .plan-task-main {
  cursor: grab;
}

.plan-lists-panel .plan-list-group-title.dragging,
.plan-lists-panel .plan-task-row.dragging {
  opacity: 0.55;
}

.plan-lists-panel .plan-list-group-title.drag-over-before,
.plan-lists-panel .plan-task-row.drag-over-before {
  box-shadow: inset 0 2px 0 var(--brand);
}

.plan-lists-panel .plan-list-group-title.drag-over-after,
.plan-lists-panel .plan-task-row.drag-over-after {
  box-shadow: inset 0 -2px 0 var(--brand);
}

.plan-lists-panel .plan-task-row.draggable .plan-task-inline-actions,
.plan-lists-panel .plan-list-edit-inline {
  cursor: default;
}

.plan-lists-panel .plan-unified-task-list .clickup-list-title-left:hover {
  background: rgba(16, 24, 40, 0.03);
}

.plan-lists-panel .plan-unified-task-list .plan-list-more {
  align-self: center;
}

.plan-lists-panel .plan-unified-task-list > .plan-task-list-header {
  position: static;
  margin: 0;
  background: #f7f8fa;
  border-top: 0;
  border-bottom: 1px solid var(--line);
}

.plan-lists-panel .plan-unified-task-list .plan-list-group > .plan-task-list-header {
  display: none !important;
}

.plan-lists-panel .plan-unified-task-list .plan-list-group {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.plan-lists-panel .plan-unified-task-shell {
  padding: 0 16px 18px;
  overflow-x: auto;
  scrollbar-gutter: stable;
}

.plan-lists-panel .plan-unified-task-shell > .plan-task-list-header,
.plan-lists-panel .plan-unified-task-body {
  min-width: var(--tasks-grid-min-width);
}

.plan-lists-panel .plan-unified-task-body {
  display: grid;
  gap: 0;
  padding: 0 !important;
  max-height: max(68vh, calc(100vh - 340px));
  overflow-x: visible;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

/* Plan > Tasks list sections should match the compact My Work section rhythm. */
.plan-lists-panel .plan-unified-task-list .plan-list-group + .plan-list-group {
  margin-top: 8px;
}

/* My Time and Team Time editing on behalf: keep add controls as quiet, description-like rows. */
.time-matrix-panel .workload-add-row,
.time-matrix-panel .workload-add-type-row,
.team-people-panel .workload-add-row,
.team-people-panel .workload-add-type-row {
  min-height: 32px;
}

.time-matrix-panel .workload-add-row .workload-project-cell,
.team-people-panel .workload-add-row .workload-project-cell {
  padding: 4px 7px 4px 52px;
}

.time-matrix-panel .workload-add-type-row .workload-project-cell,
.team-people-panel .workload-add-type-row .workload-project-cell {
  padding: 4px 7px 4px 58px;
}

.time-matrix-panel .workload-inline-add-control,
.team-people-panel .workload-inline-add-control {
  box-sizing: border-box;
  width: 100%;
  min-height: 24px;
  height: 24px;
  border: 1px solid transparent;
  border-radius: var(--radius-1);
  background: rgba(255, 255, 255, 0.82);
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
  box-shadow: none;
}

.time-matrix-panel .workload-inline-add-control:hover,
.time-matrix-panel .workload-inline-add-control:focus-within,
.time-matrix-panel button.workload-inline-add-control:focus-visible,
.team-people-panel .workload-inline-add-control:hover,
.team-people-panel .workload-inline-add-control:focus-within,
.team-people-panel button.workload-inline-add-control:focus-visible {
  border-color: var(--line-strong);
  background: #ffffff;
  color: var(--text);
}

.time-matrix-panel .workload-inline-add-control > svg,
.team-people-panel .workload-inline-add-control > svg {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}

.time-matrix-panel .workload-code-add-control,
.team-people-panel .workload-code-add-control {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) 14px;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
}

.time-matrix-panel .workload-code-picker,
.team-people-panel .workload-code-picker {
  width: 100%;
  min-width: 0;
}

.time-matrix-panel .workload-code-picker.disabled,
.team-people-panel .workload-code-picker.disabled {
  pointer-events: none;
}

.time-matrix-panel .workload-code-add-control,
.team-people-panel .workload-code-add-control {
  cursor: pointer;
}

.time-matrix-panel .workload-code-menu,
.team-people-panel .workload-code-menu {
  position: fixed;
  inset: auto;
  margin: 0;
  /* As wide as the longest name (toggleWorkloadCodePicker sets the limits). */
  width: max-content;
  max-height: 220px;
  overflow-y: auto;
  padding: 3px 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-1);
  background: #ffffff;
  box-shadow: var(--shadow-menu);
}

.time-matrix-panel .workload-code-option,
.team-people-panel .workload-code-option {
  display: block;
  width: 100%;
  min-height: 20px;
  padding: 2px 10px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 12px;
  line-height: 16px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

/* Katarzyna, 2026-10-17: «Chargeable» and «Non-chargeable» each under a heading, a line between. */
.time-matrix-panel .workload-code-group,
.team-people-panel .workload-code-group {
  padding: 4px 10px 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 14px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.time-matrix-panel .workload-code-option + .workload-code-group,
.team-people-panel .workload-code-option + .workload-code-group {
  margin-top: 3px;
  padding-top: 6px;
  border-top: 1px solid var(--line-strong);
}

.time-matrix-panel .workload-code-option:hover,
.time-matrix-panel .workload-code-option:focus-visible,
.team-people-panel .workload-code-option:hover,
.team-people-panel .workload-code-option:focus-visible {
  background: var(--surface-2);
  outline: 0;
}

.time-matrix-panel .workload-add-type-button,
.team-people-panel .workload-add-type-button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 0 8px;
}

.time-matrix-panel .workload-totals-row > div {
  border-top: 2px solid var(--line-strong);
}

.time-matrix-panel .workload-totals-label {
  justify-content: flex-end;
  min-height: 38px;
  padding: 4px 12px;
  background: var(--surface-2);
  font-weight: 700;
}

.time-matrix-panel .workload-totals-row .workload-timer-cell,
.time-matrix-panel .workload-totals-row .workload-day-total,
.time-matrix-panel .workload-totals-row .workload-week-total {
  background: var(--surface-2);
  color: var(--text);
}

.time-matrix-panel .workload-totals-row .matrix-cell-value {
  font-weight: 700;
}

.time-matrix-panel .workload-inline-add-control.disabled,
.time-matrix-panel .workload-inline-add-control:disabled,
.team-people-panel .workload-inline-add-control.disabled,
.team-people-panel .workload-inline-add-control:disabled {
  opacity: 0.55;
}

.plan-lists-panel .plan-unified-task-list .plan-list-group-title {
  min-height: 34px;
  padding-top: 0;
  padding-bottom: 0;
  border-bottom: 0;
  background: #ffffff;
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
}

.plan-lists-panel .plan-unified-task-list .clickup-list-title-left {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 2px;
}

.plan-lists-panel .plan-unified-task-list .plan-list-toggle-button {
  height: auto;
  min-height: 26px;
  font-size: 13px;
  font-weight: 600;
  line-height: normal;
}

.plan-lists-panel .plan-unified-task-list .plan-list-title-name {
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
}

.plan-lists-panel .plan-unified-task-list .plan-list-toggle-button .badge.gray {
  min-width: 0;
  min-height: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
}

.plan-lists-panel .plan-unified-task-list .plan-list-edit-inline {
  align-self: center;
  width: 20px;
  min-width: 20px;
  height: 20px;
  min-height: 20px;
  padding: 0;
  border-color: transparent;
  background: transparent;
  opacity: 0;
  color: var(--muted);
  transition: opacity 120ms ease, color 120ms ease;
}

.plan-lists-panel .plan-unified-task-list .plan-list-edit-inline svg {
  width: 14px;
  height: 14px;
}

.plan-lists-panel .plan-unified-task-list .clickup-list-title-left:hover .plan-list-edit-inline,
.plan-lists-panel .plan-unified-task-list .plan-list-edit-inline:focus-visible {
  opacity: 1;
}

.plan-lists-panel .plan-unified-task-list .plan-list-edit-inline:hover,
.plan-lists-panel .plan-unified-task-list .plan-list-edit-inline:focus-visible {
  color: var(--text);
  background: transparent;
  border-color: transparent;
}

.plan-lists-panel .plan-unified-task-list .plan-task-row:not(.plan-task-edit-row) {
  min-height: 40px;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 13px;
}

.plan-lists-panel .plan-unified-task-list .plan-list-add-task-row,
.plan-lists-panel .plan-unified-task-list .plan-completed-toggle-row {
  min-height: 40px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}

.plan-lists-panel .plan-unified-task-list .plan-task-list {
  border-top: 0;
}

/* Plan > My Calendar: month view of the signed-in person's due dates. */
.plan-calendar-panel {
  overflow-x: auto;
}

.plan-calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  border-bottom: 1px solid var(--line);
}

.plan-calendar-controls {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.plan-calendar-month-label {
  min-width: 116px;
  text-align: center;
}

.plan-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  min-width: 760px;
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line);
}

.plan-calendar-weekday {
  padding: 8px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-align: right;
}

.plan-calendar-day {
  min-height: 126px;
  padding: 7px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.plan-calendar-day.outside-month {
  background: var(--surface-2);
}

.plan-calendar-day.today {
  background: #f4f8ff;
}

.plan-calendar-day.today .plan-calendar-day-number {
  color: var(--text);
}

.plan-calendar-day-number {
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-align: right;
}

.plan-calendar-tasks {
  display: grid;
  gap: 4px;
}

.plan-calendar-task {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  gap: 4px;
  padding: 3px 4px;
  border: 0;
  border-radius: 4px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  line-height: 1.3;
  text-align: left;
}

.plan-calendar-task:hover,
.plan-calendar-task:focus-visible {
  background: var(--blue-soft);
}

.plan-calendar-task .plan-priority-flag-only {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
}

.plan-calendar-task .plan-priority-flag-only svg {
  width: 13px;
  height: 13px;
}

.plan-calendar-task span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plan-calendar-task.complete span:last-child {
  opacity: 0.55;
  text-decoration: line-through;
}

@media (max-width: 720px) {
  .plan-calendar-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .plan-calendar-controls {
    justify-content: flex-start;
  }
}



/* The duplicate "My Work" heading above the To Do tabs was removed (Katarzyna, 2026-09-15), so
   the tabs are now the first element in the panel and need the top padding the heading gave. */
.plan-work-panel > .plan-tabs {
  padding-top: 14px;
}


/* Katarzyna, 2026-09-15: the two add controls must stand above the columns they add to -
   "Add project/code" above the project codes, "Add type of work" above the type-of-work column.
   The add-type row reuses the entry row's own grid and a spacer the width of the delete button,
   so the button starts exactly where the type-of-work input starts, whatever the column width. */
.time-matrix-panel .workload-add-row .workload-project-cell,
.team-people-panel .workload-add-row .workload-project-cell {
  padding: 4px 7px;
}

.time-matrix-panel .workload-code-add-control,
.team-people-panel .workload-code-add-control {
  width: auto;
  grid-template-columns: 14px max-content 14px;
  justify-content: start;
}

.time-matrix-panel .workload-add-type-row .workload-project-cell,
.team-people-panel .workload-add-type-row .workload-project-cell {
  padding: 4px 7px;
}

/* The two spacers borrow the delete button's and the code select's own styles, so they are exactly
   as wide as the real ones and the button below lines up whatever those widths turn out to be. */
.workload-add-type-spacer {
  visibility: hidden;
  pointer-events: none;
}



/* The task detail modal keeps Save at the top right, and deleting is the bin alone. */
.task-detail-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

/* "Show all" under a project role list, and the mark on a person whose position is not the usual
   one for that role (Katarzyna, 2026-09-15: the position guides the list, it does not forbid). */
.project-role-show-all {
  margin: 6px 0 0;
  align-self: flex-start;
}

.check-row-exception .avatar {
  border: 1px dashed #98a2b3;
}
/* A folded repeating series: one row with a "N repeats" toggle, and the occurrences indented once
   opened (Katarzyna, 2026-09-15). */
/* The repeat count is a plain grey line under the title - the same format as the schedule line it
   replaced - not a wide grey button (Katarzyna, 2026-09-15: «nereikia tokio ilgo pilko mygtuko,
   geriau tegul buna tokio formato kaip dabar buvo eilute, kuria nubraukiau»). */
.plan-series-toggle {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 3px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.3;
  cursor: pointer;
}

.plan-series-toggle:hover {
  color: var(--text);
  text-decoration: underline;
}

.plan-series-toggle svg {
  width: 12px;
  height: 12px;
}

.plan-task-row.plan-task-in-series .plan-task-main {
  padding-left: 18px;
}
/* The running timer card can be dragged anywhere by its handle (Katarzyna, 2026-09-15). */
.floating-timer {
  position: relative;
}

.floating-timer-handle {
  position: absolute;
  top: 6px;
  left: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #98a2b3;
  cursor: grab;
  touch-action: none;
}

.floating-timer-handle:hover {
  color: var(--text);
  background: rgba(16, 24, 40, 0.06);
}

.floating-timer-handle svg {
  width: 14px;
  height: 14px;
}

.floating-timer-stack.dragging .floating-timer-handle {
  cursor: grabbing;
}

.floating-timer-stack.dragging {
  user-select: none;
}

.floating-timer-main {
  padding-left: 18px;
}
/* 2026-10-06 (Katarzyna): Projects status columns are sorted by clicking their title. */
.project-status-grid-head .project-status-sort {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  white-space: nowrap;
}

.project-status-grid-head .project-status-sort span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.project-status-grid-head .project-status-sort svg {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  opacity: 0.35;
}

.project-status-grid-head .project-status-sort:hover svg,
.project-status-grid-head .project-status-sort.active svg {
  opacity: 1;
}

.project-status-grid-head .project-status-sort.active {
  color: var(--text);
}

/* 2026-10-06 (Katarzyna): time can be typed in hours or in minutes. */
.time-unit-switch {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #ffffff;
}

.time-unit-switch .time-unit-option {
  min-width: 34px;
  height: 28px;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.time-unit-switch .time-unit-option + .time-unit-option {
  border-left: 1px solid var(--line);
}

.time-unit-switch .time-unit-option.active {
  background: var(--surface-2);
  color: var(--text);
}

.time-input-with-unit {
  display: flex;
  align-items: center;
  gap: 6px;
}

.time-input-with-unit input {
  flex: 1 1 auto;
  min-width: 0;
}