:root {
  color-scheme: light;
  --bg: #f5faff;
  --surface: #ffffff;
  --surface-muted: #eaf4ff;
  --ink: #102033;
  --muted: #60758d;
  --line: #cfe0f2;
  --accent: #1479c9;
  --accent-dark: #0b5fa5;
  --accent-soft: #dceeff;
  --warning: #2469a8;
  --warning-soft: #edf6ff;
  --danger: #a63d3d;
  --danger-soft: #fdeaea;
  --success: #166f9e;
  --success-soft: #dff4ff;
  --shadow: 0 18px 60px rgba(20, 121, 201, 0.12);
  font-family:
    "IBM Plex Sans", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

body[data-theme="matrix"] {
  color-scheme: dark;
  --bg: #17060b;
  --surface: #0f1217;
  --surface-muted: #171c24;
  --ink: #f8f5f6;
  --muted: #aebdcb;
  --line: #2b3340;
  --accent: #ff3155;
  --accent-dark: #ff5b73;
  --accent-soft: #321019;
  --warning: #ff3155;
  --warning-soft: #331018;
  --danger: #ff3155;
  --danger-soft: #43131c;
  --success: #4fd49d;
  --success-soft: #10271e;
  --shadow: 0 18px 60px rgba(0, 0, 0, 0.38);
}

body[data-theme="bitrix"] {
  color-scheme: light;
  --bg: #eef3f7;
  --surface: #ffffff;
  --surface-muted: #e8f7ff;
  --ink: #172b4d;
  --muted: #6f7f95;
  --line: #d5e4ef;
  --accent: #2fc6f6;
  --accent-dark: #0a7eb8;
  --accent-soft: #d9f5ff;
  --warning: #ff9f1c;
  --warning-soft: #fff3df;
  --danger: #f15b5b;
  --danger-soft: #ffe8e8;
  --success: #31b86a;
  --success-soft: #e2f8ed;
  --shadow: 0 18px 60px rgba(35, 155, 210, 0.14);
}

body[data-theme="dmsales"] {
  color-scheme: light;
  --bg: #fbfbfd;
  --surface: #ffffff;
  --surface-muted: #f7f3fb;
  --ink: #15151a;
  --muted: #606876;
  --line: #e4e7ec;
  --accent: #d0278d;
  --accent-dark: #9324c2;
  --accent-soft: #f7e8f4;
  --warning: #9324c2;
  --warning-soft: #f3e8fb;
  --danger: #d0278d;
  --danger-soft: #fde8f4;
  --success: #00a9e7;
  --success-soft: #e6f7fd;
  --shadow: 0 18px 60px rgba(147, 36, 194, 0.13);
}

body[data-theme="milestone"] {
  color-scheme: light;
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --surface-muted: #FAF8F5;
  --ink: #1C1C1E;
  --muted: #5A5A5A;
  --line: #EDEDED;
  --accent: #F4A26B;
  --accent-dark: #E8735A;
  --accent-soft: #FFF0E6;
  --warning: #E8735A;
  --warning-soft: #FFF0E6;
  --danger: #E8735A;
  --danger-soft: #FFF0E6;
  --success: #12A173;
  --success-soft: #E6F7F0;
  --shadow: 0 1px 3px rgba(0,0,0,0.02);
}

/* ── Sidebar ── */
body[data-theme="milestone"] .sidebar {
  background: #FAF8F5;
  border-right: 1px solid #EDEDED;
}

body[data-theme="milestone"] .brand-mark {
  background: linear-gradient(135deg, #F4A26B, #E8735A);
  border-radius: 10px;
}

body[data-theme="milestone"] .nav-tab {
  color: #1C1C1E;
  font-weight: 500;
  border-radius: 8px;
}

body[data-theme="milestone"] .nav-tab.active {
  background: rgba(244, 162, 107, 0.15);
  color: #1C1C1E;
  font-weight: 700;
  position: relative;
}

body[data-theme="milestone"] .quick-stats div {
  background: #FAF8F5;
  border-color: #EDEDED;
}

/* ── Login Screen ── */
body[data-theme="milestone"] .login-screen {
  background:
    radial-gradient(circle at 80% 20%, rgba(242, 196, 168, 0.25) 0%, transparent 60%),
    #FFFFFF;
}

body[data-theme="milestone"] .login-card {
  border: 1px solid #EDEDED;
  box-shadow: 0 8px 32px rgba(244, 162, 107, 0.1);
}

/* ── Top Bar ── */
body[data-theme="milestone"] .session-pill {
  background: #FAF8F5;
  border-color: #EDEDED;
}

body[data-theme="milestone"] .secondary-button {
  border: 1px solid #EDEDED;
  background: #FFFFFF;
  border-radius: 8px;
  font-weight: 600;
}

body[data-theme="milestone"] .primary-button {
  background: #F4A26B;
  color: #FFFFFF;
  border-radius: 8px;
  font-weight: 700;
}

body[data-theme="milestone"] .primary-button:hover,
body[data-theme="milestone"] .primary-button:focus-visible {
  background: #E8735A;
}

/* ── KPI / Metric Cards ── */
body[data-theme="milestone"] .metric-card {
  background: #FFFFFF;
  border: 1px solid #EDEDED;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}

body[data-theme="milestone"] .metric-card strong {
  font-size: 30px;
  font-weight: 700;
}

/* ── Goal Cards ── */
body[data-theme="milestone"] .goal-card {
  border-radius: 12px;
  border: 1px solid #EDEDED;
  box-shadow: 0 1px 3px rgba(0,0,0,0.02);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

body[data-theme="milestone"] .goal-card:hover {
  box-shadow: 0 4px 16px rgba(244, 162, 107, 0.12);
  transform: translateY(-1px);
}

body[data-theme="milestone"] .goal-card h4 {
  font-size: 17px;
  font-weight: 700;
  color: #1C1C1E;
}

/* ── Badges ── */
body[data-theme="milestone"] .badge.high {
  background: #E8735A;
  color: #FFFFFF;
  font-weight: 700;
  border-radius: 4px;
  text-transform: uppercase;
  font-size: 12px;
}

body[data-theme="milestone"] .badge.medium {
  background: #FFF0E6;
  color: #F4A26B;
}

body[data-theme="milestone"] .badge.low,
body[data-theme="milestone"] .badge.done {
  background: #E6F7F0;
  color: #12A173;
}

body[data-theme="milestone"] .badge.late {
  background: #FFF0E6;
  color: #E8735A;
}

body[data-theme="milestone"] .badge.date-badge {
  background: rgba(242, 196, 168, 0.25);
  color: #1C1C1E;
}

body[data-theme="milestone"] .badge {
  border-radius: 4px;
}

/* ── Progress Bar ── */
body[data-theme="milestone"] .progress-track {
  background: #FAF8F5;
  height: 8px;
  border-radius: 999px;
}

body[data-theme="milestone"] .progress-fill {
  background: #F4A26B;
  border-radius: 999px;
}

/* ── Panels ── */
body[data-theme="milestone"] .panel {
  border: 1px solid #EDEDED;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}

/* ── Delegation Details ── */
body[data-theme="milestone"] .delegation-details {
  background: #FAF8F5;
  border-color: #EDEDED;
}

/* ── Ring Card ── */
body[data-theme="milestone"] .ring-card {
  background: #FAF8F5;
  border-color: #EDEDED;
}

body[data-theme="milestone"] .percent-ring {
  --ring-color: #F4A26B;
}

/* ── Toolbar / Filters ── */
body[data-theme="milestone"] .toolbar {
  gap: 12px;
}

body[data-theme="milestone"] select {
  border: 1px solid #EDEDED;
  border-radius: 8px;
  background: #FFFFFF;
}

body[data-theme="milestone"] input {
  border: 1px solid #EDEDED;
  border-radius: 8px;
}

/* ── Dialog ── */
body[data-theme="milestone"] .goal-dialog,
body[data-theme="milestone"] .person-dialog {
  border-radius: 12px;
  border: 1px solid #EDEDED;
}

/* ── Eyebrow ── */
body[data-theme="milestone"] .eyebrow {
  color: #F4A26B;
}

/* ── Calendar ── */
body[data-theme="milestone"] .calendar-board-card {
  border-radius: 12px;
}

body[data-theme="milestone"] .calendar-cell.today {
  border-color: #F4A26B;
}

/* ── Small Button ── */
body[data-theme="milestone"] .small-button {
  border: 1px solid #EDEDED;
  border-radius: 8px;
  font-weight: 600;
}

body[data-theme="milestone"] .small-button:hover {
  background: #FAF8F5;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
}

input[type="checkbox"] {
  accent-color: var(--accent);
}

.login-screen {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 24px;
  background:
    linear-gradient(135deg, rgba(220, 238, 255, 0.9), rgba(255, 255, 255, 0.95)),
    var(--bg);
}

body[data-theme="matrix"] .login-screen {
  background:
    radial-gradient(circle at top left, rgba(255, 49, 85, 0.18), transparent 32rem),
    linear-gradient(135deg, #17060b, #0b0d12 70%);
}

body[data-theme="bitrix"] .login-screen {
  background:
    radial-gradient(circle at top left, rgba(47, 198, 246, 0.28), transparent 34rem),
    linear-gradient(135deg, #eef8ff, #ffffff 72%);
}

body[data-theme="dmsales"] .login-screen {
  background:
    linear-gradient(135deg, rgba(208, 39, 141, 0.06), rgba(0, 169, 231, 0.08)),
    #ffffff;
}

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

.login-card {
  display: grid;
  width: min(420px, 100%);
  gap: 16px;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

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

.login-error {
  min-height: 20px;
  margin: 0;
  color: var(--danger);
  font-weight: 700;
}

.login-hint {
  display: grid;
  gap: 4px;
  padding: 12px;
  border-radius: 8px;
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 13px;
}

body[data-theme="matrix"] .login-hint {
  background: var(--surface-muted);
}

.login-hint strong {
  color: var(--ink);
}

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

button {
  cursor: pointer;
}

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

.app-shell[hidden] {
  display: none;
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 28px 20px;
  border-right: 1px solid var(--line);
  background: #ffffff;
}

body[data-theme="matrix"] .sidebar {
  background: #10050a;
}

body[data-theme="bitrix"] .sidebar {
  background: #153b66;
  color: #ffffff;
}

body[data-theme="bitrix"] .sidebar .brand p,
body[data-theme="bitrix"] .quick-stats small {
  color: rgba(255, 255, 255, 0.72);
}

body[data-theme="bitrix"] .nav-tab {
  color: rgba(255, 255, 255, 0.82);
}

body[data-theme="bitrix"] .nav-tab:hover,
body[data-theme="bitrix"] .nav-tab:focus-visible {
  border-color: rgba(255, 255, 255, 0.24);
  color: #ffffff;
}

body[data-theme="bitrix"] .nav-tab.active {
  background: rgba(47, 198, 246, 0.22);
  color: #ffffff;
}

body[data-theme="bitrix"] .quick-stats div {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
}

body[data-theme="dmsales"] .brand-mark {
  background: linear-gradient(90deg, #00a9e7 0 28%, #9324c2 28% 64%, #d0278d 64% 100%);
}

.brand {
  display: flex;
  gap: 12px;
  align-items: center;
}

.brand-mark {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 8px;
  background: var(--accent);
  color: white;
  font-weight: 800;
}

.brand h1,
.brand p,
.topbar h2,
.topbar p,
.panel h3,
.panel h4 {
  margin: 0;
}

.brand h1 {
  font-size: 18px;
}

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

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

.nav-tab {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  text-align: left;
}

.nav-tab:hover,
.nav-tab:focus-visible {
  border-color: var(--line);
  color: var(--ink);
  outline: none;
}

.nav-tab.active {
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-weight: 700;
}

.quick-stats {
  display: grid;
  gap: 12px;
  margin-top: auto;
}

.quick-stats div,
.metric-card,
.panel,
.goal-card,
.person-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.quick-stats div {
  padding: 14px;
}

.quick-stats span {
  display: block;
  font-size: 28px;
  font-weight: 800;
}

.quick-stats small {
  color: var(--muted);
}

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

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

.eyebrow {
  margin: 0 0 6px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.topbar h2 {
  font-size: 30px;
  line-height: 1.15;
}

.topbar-actions,
.dialog-actions,
.person-form-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.session-pill {
  display: grid;
  min-height: 40px;
  min-width: 150px;
  justify-content: center;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fcff;
  text-align: left;
}

body[data-theme="matrix"] .session-pill {
  background: var(--surface-muted);
}

.session-pill strong,
.session-pill span {
  overflow: hidden;
  max-width: 220px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.session-pill strong {
  font-size: 13px;
}

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

.primary-button,
.secondary-button,
.danger-button,
.icon-button {
  min-height: 40px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-weight: 700;
}

.primary-button {
  padding: 0 16px;
  background: var(--accent);
  color: white;
}

.primary-button:hover,
.primary-button:focus-visible {
  background: var(--accent-dark);
}

.secondary-button {
  padding: 0 14px;
  border-color: var(--line);
  background: var(--surface);
  color: var(--ink);
}

.secondary-button:hover,
.secondary-button:focus-visible {
  background: var(--surface-muted);
}

.danger-button {
  padding: 0 14px;
  background: var(--danger-soft);
  color: var(--danger);
}

.danger-button:hover,
.danger-button:focus-visible {
  border-color: rgba(179, 65, 56, 0.35);
}

body[data-theme="matrix"] .primary-button {
  background: var(--accent);
  color: #ffffff;
}

body[data-theme="matrix"] .primary-button:hover,
body[data-theme="matrix"] .primary-button:focus-visible {
  background: #ff4968;
}

body[data-theme="dmsales"] .primary-button {
  background: linear-gradient(90deg, #d0278d, #9324c2);
  color: #ffffff;
}

body[data-theme="dmsales"] .primary-button:hover,
body[data-theme="dmsales"] .primary-button:focus-visible {
  background: linear-gradient(90deg, #bd1f80, #7e1cad);
}

body[data-theme="dmsales"] .nav-tab.active {
  background: var(--accent-soft);
  color: var(--accent-dark);
}

body[data-theme="matrix"] .secondary-button,
body[data-theme="matrix"] .small-button,
body[data-theme="matrix"] .icon-button {
  border-color: var(--line);
  background: var(--surface-muted);
  color: var(--ink);
}

body[data-theme="matrix"] .secondary-button:hover,
body[data-theme="matrix"] .secondary-button:focus-visible,
body[data-theme="matrix"] .small-button:hover,
body[data-theme="matrix"] .small-button:focus-visible {
  background: #202634;
}

.icon-button {
  width: 40px;
  padding: 0;
  background: transparent;
  color: var(--muted);
  font-size: 24px;
}

.icon-button:hover,
.icon-button:focus-visible {
  background: var(--surface-muted);
  color: var(--ink);
}

.view {
  display: none;
}

.view.active {
  display: block;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.metric-card {
  padding: 18px;
}

.metric-label {
  display: block;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 13px;
}

.metric-card strong {
  font-size: 30px;
}

.split-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.8fr);
  gap: 18px;
}

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

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

.panel-heading.compact {
  margin-bottom: 10px;
}

.panel h3,
.panel h4 {
  font-size: 17px;
}

select,
input,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
}

body[data-theme="matrix"] select,
body[data-theme="matrix"] input,
body[data-theme="matrix"] textarea {
  background: #0b0f14;
}

select,
input {
  height: 42px;
  padding: 0 12px;
}

textarea {
  padding: 10px 12px;
  resize: vertical;
}

label span {
  display: block;
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.goal-list,
.goal-board,
.people-load,
.person-grid {
  display: grid;
  gap: 12px;
}

.goal-board {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.goal-card {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.goal-card-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.goal-card h4 {
  margin: 0 0 6px;
  font-size: 17px;
}

.goal-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.meta-row,
.subtask-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
}

.badge.high {
  background: #d9ecff;
  color: #075a9c;
}

body[data-theme="matrix"] .badge.high {
  background: #2d1018;
  color: #ff7b91;
}

.badge.medium {
  background: var(--warning-soft);
  color: var(--warning);
}

.badge.low,
.badge.done {
  background: var(--success-soft);
  color: var(--success);
}

.badge.date-badge {
  background: #eef7ff;
  color: var(--accent-dark);
}

body[data-theme="matrix"] .badge.date-badge {
  background: #171f2b;
  color: #d9e7f7;
}

.badge.late {
  background: var(--danger-soft);
  color: var(--danger);
}

.progress-block {
  display: grid;
  gap: 8px;
}

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

.progress-track {
  overflow: hidden;
  height: 9px;
  border-radius: 999px;
  background: var(--surface-muted);
}

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

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

.ring-card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-muted);
}

.percent-ring {
  --ring-value: 0;
  --ring-color: var(--accent);
  display: grid;
  flex: 0 0 auto;
  width: 66px;
  height: 66px;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--surface) 58%, transparent 59%),
    conic-gradient(var(--ring-color) calc(var(--ring-value) * 1%), rgba(143, 163, 184, 0.22) 0);
}

.percent-ring strong {
  color: var(--ink);
  font-size: 15px;
}

.ring-card div {
  min-width: 0;
}

.ring-card div > strong,
.ring-card div > span {
  display: block;
}

.ring-card div > strong {
  margin-bottom: 4px;
  font-size: 13px;
}

.ring-card div > span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.delegation-details {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fcff;
}

body[data-theme="matrix"] .delegation-details {
  background: var(--surface-muted);
}

.delegation-details h5 {
  margin: 0 0 10px;
  color: var(--ink);
  font-size: 14px;
}

.delegation-details dl {
  display: grid;
  grid-template-columns: minmax(120px, 0.34fr) minmax(0, 1fr);
  gap: 8px 12px;
  margin: 0;
}

.delegation-details dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.delegation-details dd {
  min-width: 0;
  margin: 0;
  line-height: 1.45;
  white-space: pre-line;
}

.goal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.small-button {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 700;
}

.small-button:hover,
.small-button:focus-visible {
  background: var(--surface-muted);
}

.subtask-list {
  display: grid;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.subtask-list li,
.subtask-editor-row,
.person-load-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.subtask-list li {
  align-items: flex-start;
}

.subtask-list input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}

.subtask-body {
  display: grid;
  flex: 1;
  gap: 6px;
}

.subtask-title {
  color: var(--ink);
  line-height: 1.35;
}

.subtask-dates {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.subtask-list input:checked + .subtask-body .subtask-title {
  color: var(--muted);
  text-decoration: line-through;
}

.completion-note {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.completion-note strong {
  color: var(--ink);
}

body[data-theme="matrix"] .load-count {
  background: #321019;
  color: #ff7188;
}

.person-load-row {
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.person-load-row:last-child {
  border-bottom: 0;
}

.person-load-row strong {
  display: block;
}

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

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

.load-count {
  min-width: 42px;
  padding: 7px 10px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  text-align: center;
  font-weight: 800;
}

.toolbar {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(180px, 240px);
  gap: 12px;
  margin-bottom: 16px;
}

.search-field {
  display: block;
}

.calendar-toolbar {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.calendar-toolbar h3 {
  margin: 0;
  font-size: 24px;
}

.calendar-nav-button {
  padding: 0;
  font-size: 24px;
  line-height: 1;
}

.calendar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.calendar-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
}

.legend-dot.start {
  background: #0b5fa5;
}

.legend-dot.range {
  background: #8fcfff;
}

.legend-dot.end {
  background: #43a6df;
}

.legend-dot.late {
  background: #d92d20;
}

.legend-dot.has-task {
  background: var(--accent);
}

.legend-dot.highlight {
  background: #d0278d;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(104px, 1fr));
  gap: 8px;
  overflow-x: auto;
  margin-bottom: 16px;
}

.calendar-weekday {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
}

.calendar-day {
  min-height: 124px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease, background 0.16s ease;
}

.calendar-day.other-month {
  background: #f7fbff;
  color: #95a8bd;
}

body[data-theme="matrix"] .calendar-day.other-month {
  background: #10141b;
  color: #657181;
}

.calendar-day.today {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(20, 121, 201, 0.18);
}

.calendar-day.has-goal {
  border-color: rgba(20, 121, 201, 0.42);
  background:
    linear-gradient(180deg, rgba(20, 121, 201, 0.06), rgba(20, 121, 201, 0.02)),
    var(--surface);
}

.calendar-day.has-late-goal {
  border-color: rgba(217, 45, 32, 0.42);
  background:
    linear-gradient(180deg, rgba(217, 45, 32, 0.08), rgba(217, 45, 32, 0.02)),
    var(--surface);
}

.calendar-day.search-match {
  border-color: rgba(208, 39, 141, 0.7);
  background:
    linear-gradient(135deg, rgba(208, 39, 141, 0.12), rgba(20, 121, 201, 0.08)),
    var(--surface);
  box-shadow: inset 0 0 0 1px rgba(208, 39, 141, 0.24);
}

.calendar-day.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(20, 121, 201, 0.18);
}

.calendar-day:hover {
  transform: translateY(-1px);
}

.calendar-day:focus-visible {
  outline: 3px solid rgba(20, 121, 201, 0.32);
  outline-offset: 2px;
}

.calendar-day-number {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  font-weight: 800;
}

.calendar-day-number strong {
  min-width: 24px;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 12px;
  text-align: center;
}

.calendar-day-goals {
  display: grid;
  gap: 5px;
}

.calendar-goal {
  overflow: hidden;
  width: 100%;
  min-height: 25px;
  padding: 0 8px;
  border: 0;
  border-radius: 999px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-goal.start {
  background: #d9ecff;
  color: #075a9c;
}

body[data-theme="matrix"] .calendar-goal.start {
  background: #2d1018;
  color: #ff7b91;
}

.calendar-goal.range {
  background: #edf7ff;
  color: #26638f;
}

body[data-theme="matrix"] .calendar-goal.range {
  background: #171f2b;
  color: #d9e7f7;
}

.calendar-goal.end {
  background: #c9eaff;
  color: #075a9c;
}

body[data-theme="matrix"] .calendar-goal.end {
  background: #331018;
  color: #ff7188;
}

.calendar-goal.late {
  background: #fee4e2;
  color: #b42318;
}

body[data-theme="matrix"] .calendar-goal.late {
  background: #43131c;
  color: #ff9aa8;
}

.calendar-goal.highlighted {
  background: linear-gradient(90deg, #d0278d, #9324c2);
  color: #ffffff;
  box-shadow: 0 0 0 2px rgba(208, 39, 141, 0.16);
}

.calendar-goal.late.highlighted {
  background: linear-gradient(90deg, #d92d20, #d0278d);
  color: #ffffff;
}

.calendar-goal:hover,
.calendar-goal:focus-visible {
  outline: 2px solid rgba(20, 121, 201, 0.35);
  outline-offset: 1px;
}

.calendar-more {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.calendar-summary-panel {
  margin-top: 16px;
}

.calendar-day-panel {
  margin-top: 16px;
}

.calendar-day-task-list {
  display: grid;
  gap: 10px;
}

.calendar-day-task-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fcff;
}

.calendar-day-task-card.late {
  border-color: rgba(217, 45, 32, 0.42);
  background: #fff7f7;
}

.calendar-day-task-card.highlighted,
.calendar-summary-card.highlighted {
  border-color: rgba(208, 39, 141, 0.5);
  box-shadow: inset 4px 0 0 #d0278d;
}

.calendar-day-task-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.calendar-day-task-header h4,
.calendar-day-task-header p,
.calendar-day-empty-subtasks {
  margin: 0;
}

.calendar-day-task-header h4 {
  margin-bottom: 5px;
}

.calendar-day-task-header p,
.calendar-day-empty-subtasks {
  color: var(--muted);
}

.calendar-day-task-header strong {
  color: var(--accent-dark);
}

.calendar-day-subtasks {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.calendar-day-subtasks li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  background: var(--surface-muted);
}

.calendar-day-subtasks li.done span {
  color: var(--muted);
  text-decoration: line-through;
}

.calendar-day-subtasks small {
  color: var(--muted);
  white-space: nowrap;
}

.calendar-day-task-actions {
  display: flex;
  justify-content: flex-end;
}

.calendar-summary-search {
  margin-bottom: 14px;
  max-width: 520px;
}

.calendar-goal-list {
  display: grid;
  gap: 10px;
}

.calendar-summary-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fcff;
}

.calendar-summary-card h4,
.calendar-summary-card p {
  margin: 0;
}

.calendar-summary-card h4 {
  margin-bottom: 5px;
  font-size: 16px;
}

.calendar-summary-card p {
  color: var(--muted);
}

.calendar-summary-card.late {
  border-color: rgba(217, 45, 32, 0.42);
  background: #fff7f7;
}

body[data-theme="matrix"] .calendar-summary-card.late {
  background: #2a0c14;
}

.calendar-summary-progress {
  display: flex;
  align-items: center;
  gap: 10px;
}

.calendar-summary-progress strong {
  color: var(--accent-dark);
}

#calendarView {
  --calendar-bg: #f8fafc;
  --calendar-surface: #ffffff;
  --calendar-line: #e5e7eb;
  --calendar-ink: #111827;
  --calendar-muted: #6b7280;
  --calendar-accent: #14b8a6;
  --calendar-accent-dark: #0f766e;
  --calendar-accent-soft: #ccfbf1;
  --calendar-danger: #dc2626;
  --calendar-danger-soft: #fee2e2;
  --calendar-info: #2563eb;
  --calendar-info-soft: #dbeafe;
  --calendar-highlight: #7c3aed;
  --calendar-highlight-soft: #ede9fe;
  color: var(--calendar-ink);
}

#calendarView .calendar-hero,
#calendarView .calendar-board-card,
#calendarView .calendar-day-panel,
#calendarView .calendar-summary-panel {
  border: 1px solid var(--calendar-line);
  border-radius: 8px;
  background: var(--calendar-surface);
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.06);
}

#calendarView .calendar-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
  padding: 18px;
}

#calendarView .calendar-hero h3 {
  margin: 0;
  font-size: 24px;
  line-height: 1.15;
}

#calendarView .calendar-hero p:not(.eyebrow) {
  max-width: 620px;
  margin: 8px 0 0;
  color: var(--calendar-muted);
  font-size: 14px;
  line-height: 1.45;
}

#calendarView .eyebrow {
  color: var(--calendar-accent-dark);
}

#calendarView .calendar-toolbar {
  display: grid;
  grid-template-columns: 40px minmax(150px, max-content) 40px auto;
  align-items: center;
  gap: 8px;
  margin: 0;
}

#calendarView .calendar-toolbar strong {
  min-width: 160px;
  color: var(--calendar-ink);
  font-size: 16px;
  text-align: center;
}

#calendarView .calendar-nav-button {
  width: 40px;
  min-height: 40px;
  border-color: var(--calendar-line);
  color: var(--calendar-ink);
  font-size: 22px;
}

#calendarView .today-button {
  border-color: transparent;
  background: var(--calendar-accent);
  color: #ffffff;
}

#calendarView .calendar-legend {
  gap: 8px;
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 700;
}

#calendarView .calendar-legend span {
  padding: 7px 10px;
  border: 1px solid var(--calendar-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--calendar-muted);
}

#calendarView .legend-dot {
  width: 9px;
  height: 9px;
}

#calendarView .legend-dot.start,
#calendarView .legend-dot.end {
  background: var(--calendar-info);
}

#calendarView .legend-dot.range,
#calendarView .legend-dot.has-task {
  background: var(--calendar-accent);
}

#calendarView .legend-dot.late {
  background: var(--calendar-danger);
}

#calendarView .legend-dot.highlight {
  background: var(--calendar-highlight);
}

#calendarView .calendar-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 390px);
  align-items: start;
  gap: 16px;
}

#calendarView .calendar-board-card {
  overflow: hidden;
  min-width: 0;
  padding: 14px;
}

#calendarView .calendar-grid {
  grid-template-columns: repeat(7, minmax(104px, 1fr));
  gap: 1px;
  overflow-x: auto;
  margin: 0;
  border: 1px solid var(--calendar-line);
  border-radius: 8px;
  background: var(--calendar-line);
}

#calendarView .calendar-weekday {
  min-height: 34px;
  padding: 10px 8px;
  background: #f8fafc;
  color: var(--calendar-muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
}

#calendarView .calendar-day {
  min-height: 132px;
  padding: 10px;
  border: 0;
  border-radius: 0;
  background: #ffffff;
  color: var(--calendar-ink);
  box-shadow: none;
}

#calendarView .calendar-day.other-month {
  background: #f9fafb;
  color: #9ca3af;
}

#calendarView .calendar-day.has-goal {
  background:
    linear-gradient(180deg, rgba(20, 184, 166, 0.08), rgba(255, 255, 255, 0) 58%),
    #ffffff;
}

#calendarView .calendar-day.has-late-goal {
  background:
    linear-gradient(180deg, rgba(220, 38, 38, 0.1), rgba(255, 255, 255, 0) 62%),
    #fffafa;
}

#calendarView .calendar-day.search-match {
  background:
    linear-gradient(180deg, rgba(124, 58, 237, 0.13), rgba(255, 255, 255, 0) 70%),
    #ffffff;
  box-shadow: inset 0 0 0 2px rgba(124, 58, 237, 0.28);
}

#calendarView .calendar-day.today {
  box-shadow: inset 0 0 0 2px rgba(20, 184, 166, 0.45);
}

#calendarView .calendar-day.selected {
  position: relative;
  z-index: 1;
  box-shadow: inset 0 0 0 2px var(--calendar-accent), 0 0 0 3px rgba(20, 184, 166, 0.16);
}

#calendarView .calendar-day:hover {
  transform: none;
  background-color: #f8fafc;
}

#calendarView .calendar-day-number {
  margin-bottom: 10px;
  color: var(--calendar-ink);
  font-size: 14px;
  font-weight: 800;
}

#calendarView .calendar-day-number strong {
  min-width: 24px;
  padding: 3px 7px;
  background: var(--calendar-accent-soft);
  color: var(--calendar-accent-dark);
  font-size: 11px;
}

#calendarView .calendar-day.has-late-goal .calendar-day-number strong {
  background: var(--calendar-danger-soft);
  color: var(--calendar-danger);
}

#calendarView .calendar-day-goals {
  gap: 6px;
}

#calendarView .calendar-goal {
  min-height: 24px;
  padding: 0 9px;
  font-size: 12px;
  font-weight: 700;
}

#calendarView .calendar-goal.start,
#calendarView .calendar-goal.end {
  background: var(--calendar-info-soft);
  color: #1d4ed8;
}

#calendarView .calendar-goal.range {
  background: var(--calendar-accent-soft);
  color: var(--calendar-accent-dark);
}

#calendarView .calendar-goal.late {
  background: var(--calendar-danger-soft);
  color: var(--calendar-danger);
}

#calendarView .calendar-goal.highlighted {
  background: var(--calendar-highlight);
  color: #ffffff;
  box-shadow: none;
}

#calendarView .calendar-goal.late.highlighted {
  background: linear-gradient(90deg, var(--calendar-danger), var(--calendar-highlight));
}

#calendarView .calendar-more {
  padding-left: 8px;
  color: var(--calendar-muted);
  font-size: 12px;
  font-weight: 700;
}

#calendarView .calendar-day-panel,
#calendarView .calendar-summary-panel {
  margin-top: 0;
  padding: 16px;
}

#calendarView .calendar-summary-panel {
  margin-top: 16px;
}

#calendarView .panel-heading {
  align-items: flex-start;
  margin-bottom: 14px;
}

#calendarView .panel-heading h3 {
  font-size: 18px;
}

#calendarView .calendar-day-task-list,
#calendarView .calendar-goal-list {
  gap: 12px;
}

#calendarView .calendar-day-task-card,
#calendarView .calendar-summary-card {
  border-color: var(--calendar-line);
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
}

#calendarView .calendar-day-task-card.late,
#calendarView .calendar-summary-card.late {
  border-color: rgba(220, 38, 38, 0.26);
  background: #fffafa;
}

#calendarView .calendar-day-task-card.highlighted,
#calendarView .calendar-summary-card.highlighted {
  border-color: rgba(124, 58, 237, 0.26);
  box-shadow: inset 4px 0 0 var(--calendar-highlight), 0 8px 22px rgba(15, 23, 42, 0.05);
}

#calendarView .calendar-day-task-header h4,
#calendarView .calendar-summary-card h4 {
  color: var(--calendar-ink);
  font-size: 15px;
  line-height: 1.3;
}

#calendarView .calendar-day-task-header p,
#calendarView .calendar-summary-card p,
#calendarView .calendar-day-empty-subtasks {
  color: var(--calendar-muted);
  font-size: 13px;
  line-height: 1.4;
}

#calendarView .calendar-day-task-header strong,
#calendarView .calendar-summary-progress strong {
  color: var(--calendar-accent-dark);
}

#calendarView .calendar-day-subtasks li {
  background: #f8fafc;
}

#calendarView .calendar-summary-search {
  max-width: 420px;
  margin-bottom: 14px;
}

#calendarView .calendar-summary-search input {
  min-height: 42px;
  background: #ffffff;
}

.admin-metric-grid {
  margin-bottom: 14px;
}

.admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.admin-table,
.admin-alert-list,
.account-list,
.history-list {
  display: grid;
  gap: 10px;
}

.admin-table-row,
.admin-alert-card,
.account-row,
.history-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fcff;
}

.admin-table-row strong,
.admin-alert-card strong,
.account-row strong,
.history-row strong {
  display: block;
  margin-bottom: 5px;
}

.admin-table-row span,
.admin-alert-card span,
.account-row span,
.history-row span {
  color: var(--muted);
  font-size: 13px;
}

.admin-row-actions,
.admin-alert-side {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.admin-alert-card.late {
  border-color: #f1c8c8;
  background: #fff8f8;
}

.access-panel {
  margin-top: 18px;
}

.account-form-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(160px, 1fr) minmax(160px, 1fr) auto auto;
  align-items: end;
  gap: 10px;
  margin-bottom: 14px;
}

.theme-settings {
  display: grid;
  grid-template-columns: minmax(220px, 360px) minmax(220px, 1fr);
  align-items: end;
  gap: 14px;
  margin-bottom: 24px;
}

.theme-preview {
  display: grid;
  min-height: 72px;
  grid-template-columns: 52px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 49, 85, 0.18), transparent),
    #101318;
  color: #ffffff;
}

.theme-preview span {
  display: block;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: #ff3155;
}

.theme-preview strong {
  font-size: 18px;
}

.theme-preview small {
  padding: 7px 10px;
  border: 1px solid #ff3155;
  border-radius: 8px;
  color: #ff7188;
  font-weight: 800;
}

.custom-theme-panel {
  display: grid;
  gap: 12px;
  margin: -6px 0 24px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fcff;
}

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

.custom-theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 10px;
}

.custom-theme-grid input[type="color"] {
  height: 46px;
  padding: 4px;
  cursor: pointer;
}

body[data-theme="matrix"] .custom-theme-panel {
  background: var(--surface-muted);
}

body[data-theme="dmsales"] .theme-preview {
  background:
    linear-gradient(90deg, rgba(0, 169, 231, 0.14), rgba(208, 39, 141, 0.16)),
    #ffffff;
  color: #15151a;
}

body[data-theme="dmsales"] .theme-preview span {
  background: linear-gradient(90deg, #00a9e7 0 30%, #9324c2 30% 65%, #d0278d 65% 100%);
}

body[data-theme="dmsales"] .theme-preview small {
  border-color: #d0278d;
  color: #d0278d;
}

body[data-theme="custom"] .theme-preview {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 14%, transparent), color-mix(in srgb, var(--success) 12%, transparent)),
    var(--surface);
  color: var(--ink);
}

body[data-theme="custom"] .theme-preview span {
  background: var(--accent);
}

body[data-theme="custom"] .theme-preview small {
  border-color: var(--accent);
  color: var(--accent);
}

.sysop-layout-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.layout-manager {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fcff;
}

body[data-theme="matrix"] .layout-manager,
body[data-theme="matrix"] .admin-table-row,
body[data-theme="matrix"] .admin-alert-card,
body[data-theme="matrix"] .account-row,
body[data-theme="matrix"] .history-row,
body[data-theme="matrix"] .calendar-summary-card,
body[data-theme="matrix"] .user-metrics article,
body[data-theme="matrix"] .person-details-metrics article,
body[data-theme="matrix"] .person-goal-row {
  background: var(--surface-muted);
}

body[data-theme="bitrix"] .admin-table-row,
body[data-theme="bitrix"] .admin-alert-card,
body[data-theme="bitrix"] .account-row,
body[data-theme="bitrix"] .history-row,
body[data-theme="bitrix"] .calendar-summary-card,
body[data-theme="bitrix"] .user-metrics article,
body[data-theme="bitrix"] .person-details-metrics article,
body[data-theme="bitrix"] .person-goal-row,
body[data-theme="bitrix"] .layout-manager {
  background: #f8fcff;
}

body[data-theme="matrix"] .admin-alert-card.late {
  border-color: var(--accent);
  background: #2a0c14;
}

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

.layout-item {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.layout-item.dragging {
  opacity: 0.55;
}

.layout-index {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 8px;
  background: #e8f4ff;
  color: var(--accent-dark);
  font-weight: 800;
}

body[data-theme="matrix"] .layout-index {
  background: #321019;
  color: #ff7188;
}

.layout-item strong {
  display: block;
  margin-bottom: 4px;
}

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

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

.user-panel-header {
  display: grid;
  grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
  align-items: end;
  gap: 16px;
  margin-bottom: 16px;
}

.user-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  gap: 10px;
}

.user-metrics article {
  min-height: 78px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fcff;
}

.user-metrics span {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.user-metrics strong {
  font-size: 24px;
}

.person-form-row {
  align-items: end;
  max-width: 620px;
  margin-bottom: 18px;
}

.person-form-row label {
  flex: 1;
}

.person-grid {
  grid-template-columns: repeat(3, minmax(180px, 1fr));
}

.person-card {
  padding: 16px;
}

.person-card h3 {
  margin: 0 0 10px;
  font-size: 18px;
}

.person-card dl {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 7px 12px;
  margin: 0;
  color: var(--muted);
}

.person-card dd {
  margin: 0;
  color: var(--ink);
  font-weight: 800;
}

.goal-dialog,
.person-dialog {
  width: min(860px, calc(100vw - 28px));
  max-height: calc(100vh - 28px);
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow);
}

.goal-dialog::backdrop,
.person-dialog::backdrop {
  background: rgba(31, 42, 44, 0.45);
}

.person-details-panel {
  display: grid;
  gap: 16px;
  padding: 22px;
}

.person-details-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 10px;
}

.person-details-metrics article,
.person-goal-row {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fcff;
}

.person-details-metrics article {
  padding: 14px;
}

.person-details-metrics span {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.person-details-metrics strong {
  font-size: 24px;
}

.person-goal-list {
  display: grid;
  gap: 10px;
}

.person-goal-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
}

.person-goal-row h4,
.person-goal-row p {
  margin: 0;
}

.person-goal-row h4 {
  margin-bottom: 6px;
  font-size: 16px;
}

.person-goal-row p {
  margin-bottom: 10px;
  color: var(--muted);
  line-height: 1.4;
}

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

.goal-form {
  display: grid;
  gap: 16px;
  padding: 22px;
}

.dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.dialog-header h3 {
  margin: 0;
  font-size: 24px;
}

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

.full-field {
  display: block;
}

.delegation-editor,
.subtask-editor {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fcff;
}

body[data-theme="matrix"] .delegation-editor,
body[data-theme="matrix"] .subtask-editor {
  background: var(--surface-muted);
}

#subtaskEditorList {
  display: grid;
  gap: 8px;
}

.subtask-editor-row {
  display: grid;
  grid-template-columns: 18px minmax(180px, 1fr) minmax(132px, 0.5fr) minmax(132px, 0.5fr) minmax(104px, 0.38fr) 40px;
  align-items: start;
}

.subtask-editor-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
}

.subtask-editor-note {
  grid-column: 2 / 7;
}

.dialog-actions {
  justify-content: space-between;
  gap: 16px;
}

.dialog-actions > div {
  display: flex;
  gap: 10px;
}

.empty-state {
  padding: 26px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.65);
  color: var(--muted);
  text-align: center;
}

@media (max-width: 1080px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .nav-tabs {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  }

  .nav-tab {
    text-align: center;
  }

  .quick-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 0;
  }

  .metric-grid,
  .split-layout,
  .goal-board,
  .person-grid,
  .person-details-metrics,
  .sysop-layout-grid,
  .user-panel-header {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .calendar-grid {
    grid-template-columns: repeat(7, minmax(92px, 1fr));
  }

  #calendarView .calendar-workspace {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .content,
  .sidebar {
    padding: 18px;
  }

  .topbar,
  .goal-card-header,
  .dialog-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .topbar-actions,
  .dialog-actions > div {
    width: 100%;
  }

  .topbar-actions button,
  .dialog-actions button,
  .person-form-row button {
    flex: 1;
  }

  .metric-grid,
  .split-layout,
  .goal-board,
  .goal-rings,
  .person-grid,
  .toolbar,
  .form-grid,
  .delegation-details dl,
  .person-details-metrics,
  .theme-settings,
  .custom-theme-grid,
  .sysop-layout-grid,
  .user-panel-header,
  .user-metrics {
    grid-template-columns: 1fr;
  }

  .admin-table-row,
  .admin-alert-card,
  .account-row,
  .history-row,
  .person-goal-row,
  .layout-item {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-row-actions,
  .admin-alert-side {
    justify-content: flex-start;
  }

  .layout-item {
    grid-template-columns: 1fr;
  }

  .subtask-editor-row {
    grid-template-columns: 22px minmax(0, 1fr) 40px;
  }

  .subtask-editor-row .subtask-start-input,
  .subtask-editor-row .subtask-due-input,
  .subtask-editor-row .subtask-due-time-input,
  .subtask-editor-note {
    grid-column: 2 / 4;
  }

  .layout-actions {
    justify-content: flex-start;
  }

  .person-load-actions,
  .person-goal-actions {
    justify-content: flex-start;
  }

  #calendarView .calendar-hero {
    align-items: stretch;
    flex-direction: column;
  }

  #calendarView .calendar-toolbar {
    grid-template-columns: 40px minmax(0, 1fr) 40px;
  }

  #calendarView .calendar-toolbar #todayCalendarButton {
    grid-column: 1 / -1;
  }

  #calendarView .calendar-grid {
    grid-template-columns: repeat(7, minmax(84px, 1fr));
  }

  #calendarView .calendar-summary-card,
  #calendarView .calendar-day-task-header,
  #calendarView .calendar-day-subtasks li {
    align-items: stretch;
    flex-direction: column;
  }

  #calendarView .calendar-day-subtasks small {
    white-space: normal;
  }

  .account-form-row {
    grid-template-columns: 1fr;
  }

  .person-form-row {
    align-items: stretch;
    flex-direction: column;
  }
}

/* Fresh SaaS redesign applied across every tab. */
:root {
  --bg: #f8fafc;
  --surface: #ffffff;
  --surface-muted: #f1f5f9;
  --ink: #111827;
  --muted: #64748b;
  --line: #e5e7eb;
  --accent: #14b8a6;
  --accent-dark: #0f766e;
  --accent-soft: #ccfbf1;
  --warning: #f59e0b;
  --warning-soft: #fef3c7;
  --danger: #dc2626;
  --danger-soft: #fee2e2;
  --success: #16a34a;
  --success-soft: #dcfce7;
  --info: #2563eb;
  --info-soft: #dbeafe;
  --shadow: 0 18px 50px rgba(15, 23, 42, 0.08);
  --shadow-soft: 0 10px 28px rgba(15, 23, 42, 0.06);
  --radius: 8px;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
}

.app-shell {
  grid-template-columns: 260px minmax(0, 1fr);
}

.sidebar {
  position: sticky;
  top: 0;
  min-height: 100vh;
  gap: 24px;
  padding: 24px 18px;
  border-right: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.96);
}

body[data-theme="bitrix"] .sidebar,
body[data-theme="matrix"] .sidebar,
body[data-theme="dmsales"] .sidebar {
  background: var(--surface);
  color: var(--ink);
}

body[data-theme="bitrix"] .sidebar .brand p,
body[data-theme="bitrix"] .quick-stats small,
body[data-theme="bitrix"] .nav-tab {
  color: var(--muted);
}

.brand-mark {
  width: 42px;
  height: 42px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  box-shadow: 0 10px 22px rgba(20, 184, 166, 0.2);
}

.brand h1 {
  font-size: 18px;
  letter-spacing: 0;
}

.brand p {
  max-width: 170px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.nav-tabs {
  gap: 6px;
}

.nav-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 12px;
  border: 0;
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 14px;
  font-weight: 650;
}

.nav-tab::before {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 7px;
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.nav-tab[data-view="dashboard"]::before {
  content: "P";
}

.nav-tab[data-view="goals"]::before {
  content: "C";
}

.nav-tab[data-view="calendar"]::before {
  content: "K";
}

.nav-tab[data-view="admin"]::before {
  content: "A";
}

.nav-tab[data-view="sysop"]::before {
  content: "S";
}

.nav-tab[data-view="archive"]::before {
  content: "H";
}

.nav-tab[data-view="user"]::before {
  content: "U";
}

.nav-tab[data-view="people"]::before {
  content: "O";
}

.nav-tab:hover,
.nav-tab:focus-visible {
  background: var(--surface-muted);
  color: var(--ink);
}

.nav-tab.active,
body[data-theme="bitrix"] .nav-tab.active {
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-weight: 800;
}

.nav-tab.active::before {
  background: var(--accent);
  color: #ffffff;
}

.quick-stats {
  gap: 10px;
}

.quick-stats div {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--surface), var(--surface-muted));
  box-shadow: none;
}

.quick-stats span {
  font-size: 24px;
}

.content {
  min-height: 100vh;
  padding: 28px 32px 48px;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  align-items: flex-start;
  margin: -28px -32px 24px;
  padding: 24px 32px 18px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.72);
  background: rgba(248, 250, 252, 0.94);
}

body[data-theme="matrix"] .topbar {
  background: rgba(23, 6, 11, 0.94);
}

.topbar h2 {
  font-size: 28px;
  letter-spacing: 0;
}

.eyebrow {
  color: var(--accent-dark);
  font-size: 11px;
  letter-spacing: 0;
}

.topbar-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.session-pill {
  min-width: 142px;
  min-height: 44px;
  justify-content: start;
  border-color: var(--line);
  background: var(--surface);
}

.primary-button,
.secondary-button,
.danger-button,
.icon-button,
.small-button {
  border-radius: var(--radius);
  transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.primary-button {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: 0 10px 22px rgba(20, 184, 166, 0.16);
}

.primary-button:hover,
.primary-button:focus-visible {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  transform: translateY(-1px);
}

.secondary-button,
.small-button {
  border-color: var(--line);
  background: var(--surface);
  color: var(--ink);
}

.secondary-button:hover,
.secondary-button:focus-visible,
.small-button:hover,
.small-button:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  background: var(--accent-soft);
  color: var(--accent-dark);
}

input,
select,
textarea {
  border-color: var(--line);
  background: var(--surface);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
  outline: 3px solid color-mix(in srgb, var(--accent) 18%, transparent);
}

.metric-grid {
  gap: 16px;
  margin-bottom: 20px;
}

.quick-stats div,
.metric-card,
.panel,
.goal-card,
.person-card,
.calendar-board-card,
.calendar-day-panel,
.calendar-summary-panel,
.admin-table-row,
.admin-alert-card,
.account-row,
.history-row,
.layout-manager,
.layout-item,
.user-metrics article,
.person-details-metrics article,
.person-goal-row,
.delegation-editor,
.subtask-editor,
.calendar-day-task-card,
.calendar-summary-card,
.ring-card {
  border-color: var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.metric-card,
.panel,
.goal-card,
.person-card {
  box-shadow: var(--shadow-soft);
}

.metric-card {
  position: relative;
  overflow: hidden;
  min-height: 116px;
  padding: 18px 18px 16px;
}

.metric-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 30%, #ffffff));
}

.metric-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.metric-card strong {
  color: var(--ink);
  font-size: 34px;
  letter-spacing: 0;
}

.split-layout {
  grid-template-columns: minmax(0, 1.35fr) minmax(340px, 0.78fr);
  gap: 18px;
}

.panel {
  padding: 20px;
}

.panel-heading {
  align-items: flex-start;
  margin-bottom: 16px;
}

.panel h3,
.panel h4 {
  color: var(--ink);
  font-size: 18px;
}

.toolbar,
.person-form-row,
.account-form-row,
.theme-settings,
.user-panel-header {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.toolbar {
  grid-template-columns: minmax(260px, 1fr) minmax(190px, 240px);
  align-items: end;
  margin-bottom: 18px;
}

.goal-board {
  grid-template-columns: repeat(2, minmax(320px, 1fr));
  gap: 16px;
}

.goal-list {
  gap: 14px;
}

.goal-card {
  position: relative;
  gap: 14px;
  padding: 18px;
}

.goal-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  border-radius: var(--radius) 0 0 var(--radius);
  background: var(--accent);
  opacity: 0.7;
}

.goal-card-header {
  align-items: flex-start;
}

.goal-card h4 {
  font-size: 18px;
  line-height: 1.25;
}

.goal-card p {
  color: var(--muted);
  font-size: 14px;
}

.badge {
  min-height: 26px;
  padding: 0 10px;
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.badge.high {
  background: var(--info-soft);
  color: var(--info);
}

.badge.medium {
  background: var(--warning-soft);
  color: #b45309;
}

.badge.low,
.badge.done {
  background: var(--success-soft);
  color: var(--success);
}

.badge.date-badge {
  background: var(--surface-muted);
  color: var(--accent-dark);
}

.badge.late {
  background: var(--danger-soft);
  color: var(--danger);
}

.progress-track {
  height: 8px;
  background: var(--surface-muted);
}

.progress-fill {
  background: linear-gradient(90deg, var(--accent), var(--accent-dark));
}

.goal-rings {
  gap: 12px;
}

.ring-card {
  background: var(--surface-muted);
}

.percent-ring {
  width: 58px;
  height: 58px;
}

.delegation-details {
  border-color: var(--line);
  background: var(--surface-muted);
}

.subtask-list li {
  padding: 9px 0;
  border-top: 1px solid var(--line);
}

.subtask-list li:first-child {
  border-top: 0;
}

.person-load-row {
  padding: 14px 0;
}

.person-load-row strong,
.admin-table-row strong,
.admin-alert-card strong,
.account-row strong,
.history-row strong {
  color: var(--ink);
  font-size: 15px;
}

.load-count {
  background: var(--accent-soft);
  color: var(--accent-dark);
}

#dashboardView .split-layout {
  align-items: start;
}

#dashboardView .goal-card {
  box-shadow: none;
}

#dashboardView .goal-card .delegation-details,
#dashboardView .goal-card .subtask-list {
  display: none;
}

#goalsView .goal-card {
  min-height: 100%;
}

#calendarView {
  --calendar-bg: var(--bg);
  --calendar-surface: var(--surface);
  --calendar-line: var(--line);
  --calendar-ink: var(--ink);
  --calendar-muted: var(--muted);
  --calendar-accent: var(--accent);
  --calendar-accent-dark: var(--accent-dark);
  --calendar-accent-soft: var(--accent-soft);
  --calendar-danger: var(--danger);
  --calendar-danger-soft: var(--danger-soft);
  --calendar-info: var(--info);
  --calendar-info-soft: var(--info-soft);
  --calendar-highlight: #7c3aed;
  --calendar-highlight-soft: #ede9fe;
}

#calendarView .calendar-hero,
#calendarView .calendar-board-card,
#calendarView .calendar-day-panel,
#calendarView .calendar-summary-panel {
  border-color: var(--line);
  box-shadow: var(--shadow-soft);
}

#calendarView .calendar-hero {
  padding: 20px;
}

#calendarView .calendar-legend span {
  background: var(--surface);
}

#calendarView .calendar-grid {
  border-color: var(--line);
  background: var(--line);
}

#calendarView .calendar-day {
  min-height: 126px;
  border-radius: 0;
  background: var(--surface);
}

#calendarView .calendar-day.has-goal {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 9%, #ffffff), var(--surface));
}

#calendarView .calendar-day.has-late-goal {
  background: linear-gradient(180deg, color-mix(in srgb, var(--danger) 10%, #ffffff), var(--surface));
}

#calendarView .calendar-summary-card,
#calendarView .calendar-day-task-card {
  background: var(--surface);
}

.admin-actions {
  margin-bottom: 18px;
}

.admin-table-row,
.admin-alert-card,
.account-row,
.history-row {
  background: var(--surface);
  box-shadow: none;
}

.admin-alert-card.late {
  border-color: color-mix(in srgb, var(--danger) 30%, var(--line));
  background: color-mix(in srgb, var(--danger) 6%, var(--surface));
}

.access-panel {
  margin-top: 18px;
}

.theme-settings {
  margin-bottom: 18px;
  box-shadow: none;
}

.theme-preview,
.custom-theme-panel,
.layout-manager {
  border-color: var(--line);
  background: var(--surface-muted);
}

.layout-item {
  grid-template-columns: 8px 38px minmax(0, 1fr) auto;
  background: var(--surface);
}

.layout-item::before {
  content: "";
  width: 6px;
  height: 28px;
  border-radius: 999px;
  background: linear-gradient(var(--line), var(--accent));
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
}

.layout-index {
  margin-left: 0;
  background: var(--surface-muted);
  color: var(--accent-dark);
}

.archive-panel .history-list {
  position: relative;
}

.history-row {
  position: relative;
  align-items: flex-start;
}

.history-row::before {
  content: "";
  width: 8px;
  height: 8px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--accent);
}

.user-panel-header {
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  align-items: end;
  margin-bottom: 18px;
  box-shadow: var(--shadow-soft);
}

.user-metrics article {
  background: var(--surface-muted);
}

#userGoalList {
  gap: 14px;
}

.person-form-row {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(260px, 420px) auto;
  align-items: end;
  margin-bottom: 18px;
}

.person-grid {
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap: 16px;
}

.person-card {
  position: relative;
  overflow: hidden;
}

.person-card::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), transparent);
}

.person-card dl {
  margin-bottom: 14px;
}

.person-card dt {
  color: var(--muted);
}

.person-card dd {
  color: var(--ink);
}

.goal-dialog,
.person-dialog {
  border-radius: var(--radius);
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.25);
}

.goal-form,
.person-details-panel {
  padding: 24px;
}

.dialog-header {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.delegation-editor,
.subtask-editor {
  background: var(--surface-muted);
}

.empty-state {
  border-color: var(--line);
  background: var(--surface-muted);
}

body[data-theme="matrix"] .metric-card,
body[data-theme="matrix"] .panel,
body[data-theme="matrix"] .goal-card,
body[data-theme="matrix"] .person-card,
body[data-theme="matrix"] .admin-table-row,
body[data-theme="matrix"] .admin-alert-card,
body[data-theme="matrix"] .account-row,
body[data-theme="matrix"] .history-row,
body[data-theme="matrix"] .layout-manager,
body[data-theme="matrix"] .layout-item,
body[data-theme="matrix"] .calendar-day-task-card,
body[data-theme="matrix"] .calendar-summary-card,
body[data-theme="matrix"] .user-metrics article,
body[data-theme="matrix"] .person-details-metrics article,
body[data-theme="matrix"] .person-goal-row,
body[data-theme="matrix"] .ring-card {
  background: var(--surface);
}

@media (max-width: 1180px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar,
  .topbar {
    position: static;
  }

  .sidebar {
    min-height: auto;
  }

  .split-layout,
  #calendarView .calendar-workspace,
  .user-panel-header,
  .sysop-layout-grid {
    grid-template-columns: 1fr;
  }

  .goal-board,
  .person-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .content {
    padding: 18px;
  }

  .topbar {
    margin: -18px -18px 18px;
    padding: 18px;
  }

  .metric-grid,
  .admin-metric-grid,
  .user-metrics,
  .person-details-metrics {
    grid-template-columns: 1fr;
  }

  .toolbar,
  .person-form-row,
  .account-form-row,
  .theme-settings {
    grid-template-columns: 1fr;
  }

  .goal-rings {
    grid-template-columns: 1fr;
  }

  .layout-item {
    grid-template-columns: 1fr;
  }

  .layout-item::before {
    display: none;
  }
}

/* Keep user colors as accents, but make structural borders calm. */
body {
  --ui-line: color-mix(in srgb, var(--muted) 18%, var(--surface));
}

.sidebar,
.topbar,
.quick-stats div,
.metric-card,
.panel,
.goal-card,
.person-card,
.calendar-board-card,
.calendar-day-panel,
.calendar-summary-panel,
.admin-table-row,
.admin-alert-card,
.account-row,
.history-row,
.layout-manager,
.layout-item,
.user-metrics article,
.person-details-metrics article,
.person-goal-row,
.delegation-editor,
.subtask-editor,
.calendar-day-task-card,
.calendar-summary-card,
.ring-card,
.toolbar,
.person-form-row,
.account-form-row,
.theme-settings,
.theme-preview,
.custom-theme-panel,
input,
select,
textarea,
.secondary-button,
.small-button {
  border-color: var(--ui-line);
}

#calendarView {
  --calendar-line: var(--ui-line);
}

#calendarView .calendar-grid {
  border-color: var(--ui-line);
  background: var(--ui-line);
}

/* Executive / S-Class visual direction: graphite, ivory and restrained champagne accents. */
body[data-theme="executive"] {
  color-scheme: light;
  --bg: #f4f2ee;
  --surface: #fffdf8;
  --surface-muted: #f1eee7;
  --ink: #111111;
  --muted: #706b63;
  --line: #e3ddd1;
  --accent: #b89b5e;
  --accent-dark: #75603a;
  --accent-soft: #efe7d5;
  --warning: #9a6a1b;
  --warning-soft: #f4ead7;
  --danger: #9f1d1d;
  --danger-soft: #f6e4e1;
  --success: #2f6f4f;
  --success-soft: #e2eee6;
  --info: #374151;
  --info-soft: #e8eaed;
  --shadow: 0 24px 70px rgba(18, 18, 18, 0.1);
  --shadow-soft: 0 14px 34px rgba(18, 18, 18, 0.07);
  --ui-line: #e7e2d8;
}

body[data-theme="executive"] .login-screen {
  background:
    radial-gradient(circle at 20% 15%, rgba(184, 155, 94, 0.24), transparent 28rem),
    linear-gradient(135deg, #0b0d10 0%, #1a1d22 42%, #f4f2ee 42%);
}

body[data-theme="executive"] .login-card {
  border-color: rgba(184, 155, 94, 0.24);
  background: rgba(255, 253, 248, 0.96);
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.26);
}

body[data-theme="executive"] .app-shell {
  background:
    radial-gradient(circle at 86% 4%, rgba(184, 155, 94, 0.1), transparent 30rem),
    var(--bg);
}

body[data-theme="executive"] .sidebar {
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, #12151a 0%, #090b0e 100%);
  color: #f8f7f3;
}

body[data-theme="executive"] .brand-mark {
  background: linear-gradient(135deg, #d9c28a, #8a6b33);
  color: #111111;
  box-shadow: 0 14px 28px rgba(184, 155, 94, 0.22);
}

body[data-theme="executive"] .sidebar .brand h1 {
  color: #ffffff;
}

body[data-theme="executive"] .sidebar .brand p,
body[data-theme="executive"] .quick-stats small {
  color: rgba(255, 255, 255, 0.58);
}

body[data-theme="executive"] .nav-tab {
  color: rgba(255, 255, 255, 0.66);
}

body[data-theme="executive"] .nav-tab::before {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.64);
}

body[data-theme="executive"] .nav-tab:hover,
body[data-theme="executive"] .nav-tab:focus-visible {
  background: rgba(255, 255, 255, 0.07);
  color: #ffffff;
}

body[data-theme="executive"] .nav-tab.active {
  background: linear-gradient(90deg, rgba(184, 155, 94, 0.2), rgba(255, 255, 255, 0.06));
  color: #ffffff;
  box-shadow: inset 3px 0 0 #b89b5e;
}

body[data-theme="executive"] .nav-tab.active::before {
  background: #b89b5e;
  color: #111111;
}

body[data-theme="executive"] .quick-stats div {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
}

body[data-theme="executive"] .quick-stats span {
  color: #ffffff;
}

body[data-theme="executive"] .topbar {
  border-bottom-color: rgba(17, 17, 17, 0.08);
  background: rgba(244, 242, 238, 0.94);
}

body[data-theme="executive"] .eyebrow {
  color: var(--accent-dark);
}

body[data-theme="executive"] .metric-card,
body[data-theme="executive"] .panel,
body[data-theme="executive"] .goal-card,
body[data-theme="executive"] .person-card,
body[data-theme="executive"] .toolbar,
body[data-theme="executive"] .person-form-row,
body[data-theme="executive"] .account-form-row,
body[data-theme="executive"] .theme-settings,
body[data-theme="executive"] .user-panel-header,
body[data-theme="executive"] .calendar-hero,
body[data-theme="executive"] .calendar-board-card,
body[data-theme="executive"] .calendar-day-panel,
body[data-theme="executive"] .calendar-summary-panel {
  border-color: var(--ui-line);
  background: linear-gradient(180deg, #fffefa, #fffdf8);
  box-shadow: var(--shadow-soft);
}

body[data-theme="executive"] .metric-card::before {
  height: 2px;
  background: linear-gradient(90deg, #b89b5e, rgba(184, 155, 94, 0));
}

body[data-theme="executive"] .goal-card::before {
  width: 3px;
  background: linear-gradient(180deg, #d5bd83, #8a6b33);
  opacity: 1;
}

body[data-theme="executive"] .primary-button {
  border-color: #111111;
  background: #111111;
  color: #ffffff;
  box-shadow: 0 14px 28px rgba(17, 17, 17, 0.14);
}

body[data-theme="executive"] .primary-button:hover,
body[data-theme="executive"] .primary-button:focus-visible {
  border-color: #2a2a2a;
  background: #2a2a2a;
}

body[data-theme="executive"] .secondary-button,
body[data-theme="executive"] .small-button {
  border-color: var(--ui-line);
  background: rgba(255, 253, 248, 0.88);
  color: #111111;
}

body[data-theme="executive"] .secondary-button:hover,
body[data-theme="executive"] .secondary-button:focus-visible,
body[data-theme="executive"] .small-button:hover,
body[data-theme="executive"] .small-button:focus-visible {
  border-color: rgba(184, 155, 94, 0.5);
  background: var(--accent-soft);
  color: #111111;
}

body[data-theme="executive"] .session-pill {
  border-color: rgba(184, 155, 94, 0.28);
  background: rgba(255, 253, 248, 0.9);
}

body[data-theme="executive"] .badge {
  background: #f0eee8;
  color: #5f5a52;
}

body[data-theme="executive"] .badge.high {
  background: #edeef0;
  color: #23272f;
}

body[data-theme="executive"] .badge.medium {
  background: #f3ead6;
  color: #7a5720;
}

body[data-theme="executive"] .badge.low,
body[data-theme="executive"] .badge.done {
  background: #e2eee6;
  color: #2f6f4f;
}

body[data-theme="executive"] .badge.date-badge {
  background: #f6f1e6;
  color: #75603a;
}

body[data-theme="executive"] .badge.late {
  background: #f6e4e1;
  color: #9f1d1d;
}

body[data-theme="executive"] .progress-track {
  background: #ece7dc;
}

body[data-theme="executive"] .progress-fill {
  background: linear-gradient(90deg, #111111, #b89b5e);
}

body[data-theme="executive"] .ring-card,
body[data-theme="executive"] .delegation-details,
body[data-theme="executive"] .subtask-editor,
body[data-theme="executive"] .delegation-editor,
body[data-theme="executive"] .user-metrics article,
body[data-theme="executive"] .layout-manager,
body[data-theme="executive"] .custom-theme-panel,
body[data-theme="executive"] .admin-table-row,
body[data-theme="executive"] .account-row,
body[data-theme="executive"] .history-row,
body[data-theme="executive"] .person-goal-row {
  border-color: var(--ui-line);
  background: #fbf8f1;
}

body[data-theme="executive"] .admin-alert-card.late,
body[data-theme="executive"] .calendar-summary-card.late,
body[data-theme="executive"] .calendar-day-task-card.late {
  border-color: rgba(159, 29, 29, 0.2);
  background: #fbf0ed;
}

body[data-theme="executive"] input,
body[data-theme="executive"] select,
body[data-theme="executive"] textarea {
  border-color: var(--ui-line);
  background: #fffefa;
}

body[data-theme="executive"] input:focus,
body[data-theme="executive"] select:focus,
body[data-theme="executive"] textarea:focus {
  border-color: rgba(184, 155, 94, 0.7);
  outline-color: rgba(184, 155, 94, 0.18);
}

body[data-theme="executive"] #calendarView {
  --calendar-bg: var(--bg);
  --calendar-surface: #fffdf8;
  --calendar-line: var(--ui-line);
  --calendar-ink: var(--ink);
  --calendar-muted: var(--muted);
  --calendar-accent: #b89b5e;
  --calendar-accent-dark: #75603a;
  --calendar-accent-soft: #efe7d5;
  --calendar-danger: #9f1d1d;
  --calendar-danger-soft: #f6e4e1;
  --calendar-info: #374151;
  --calendar-info-soft: #e8eaed;
  --calendar-highlight: #111111;
  --calendar-highlight-soft: #ebe7dd;
}

body[data-theme="executive"] #calendarView .calendar-day.has-goal {
  background: linear-gradient(180deg, #fffaf0, #fffdf8);
}

body[data-theme="executive"] #calendarView .calendar-day.selected {
  box-shadow: inset 0 0 0 2px #b89b5e, 0 0 0 3px rgba(184, 155, 94, 0.14);
}

body[data-theme="executive"] #calendarView .calendar-goal.range {
  background: #f3ead6;
  color: #6f552b;
}

body[data-theme="executive"] #calendarView .calendar-goal.start,
body[data-theme="executive"] #calendarView .calendar-goal.end {
  background: #e8eaed;
  color: #23272f;
}

body[data-theme="executive"] #calendarView .calendar-goal.highlighted {
  background: linear-gradient(90deg, #111111, #75603a);
  color: #ffffff;
}

body[data-theme="executive"] .theme-preview {
  background:
    linear-gradient(135deg, rgba(184, 155, 94, 0.2), transparent),
    #111318;
  color: #fffdf8;
}

body[data-theme="executive"] .theme-preview span {
  background: linear-gradient(135deg, #d9c28a, #8a6b33);
}

body[data-theme="executive"] .theme-preview small {
  border-color: #b89b5e;
  color: #d9c28a;
}

/* Control Room UI: compact, readable project-dashboard style inspired by the reference screens. */
body[data-theme="control"] {
  color-scheme: light;
  --bg: #eef1f5;
  --surface: #ffffff;
  --surface-muted: #f5f7fa;
  --ink: #1f2933;
  --muted: #6b7684;
  --line: #dfe5ec;
  --accent: #4b8df7;
  --accent-dark: #2563d9;
  --accent-soft: #e8f1ff;
  --warning: #f5b23f;
  --warning-soft: #fff4da;
  --danger: #ef5350;
  --danger-soft: #ffe7e6;
  --success: #45b97c;
  --success-soft: #e4f7ee;
  --info: #4b8df7;
  --info-soft: #e8f1ff;
  --shadow: 0 24px 60px rgba(23, 32, 42, 0.12);
  --shadow-soft: 0 12px 28px rgba(23, 32, 42, 0.08);
  --ui-line: #dde3ea;
  background:
    radial-gradient(circle at 72% 0%, rgba(75, 141, 247, 0.08), transparent 28rem),
    var(--bg);
}

body[data-theme="control"] .login-screen {
  background:
    linear-gradient(135deg, rgba(47, 52, 59, 0.92), rgba(47, 52, 59, 0.72)),
    var(--bg);
}

body[data-theme="control"] .login-card {
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.28);
}

body[data-theme="control"] .app-shell {
  grid-template-columns: 230px minmax(0, 1fr);
}

body[data-theme="control"] .sidebar {
  padding: 22px 14px;
  border-right: 0;
  background: linear-gradient(180deg, #323840 0%, #252a31 100%);
  color: #eef3f8;
  box-shadow: 8px 0 24px rgba(27, 33, 41, 0.16);
}

body[data-theme="control"] .brand {
  padding: 0 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

body[data-theme="control"] .brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 7px;
  background: linear-gradient(135deg, #5fa8ff, #3d74d8);
  box-shadow: none;
}

body[data-theme="control"] .sidebar .brand h1 {
  color: #ffffff;
  font-size: 15px;
}

body[data-theme="control"] .sidebar .brand p,
body[data-theme="control"] .quick-stats small {
  color: rgba(238, 243, 248, 0.64);
}

body[data-theme="control"] .nav-tabs {
  gap: 3px;
}

body[data-theme="control"] .nav-tab {
  min-height: 38px;
  padding: 8px 10px;
  color: rgba(238, 243, 248, 0.74);
  font-size: 13px;
  font-weight: 650;
}

body[data-theme="control"] .nav-tab::before {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(238, 243, 248, 0.68);
}

body[data-theme="control"] .nav-tab:hover,
body[data-theme="control"] .nav-tab:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

body[data-theme="control"] .nav-tab.active {
  background: #3b424b;
  color: #ffffff;
  box-shadow: inset 3px 0 0 #5fa8ff;
}

body[data-theme="control"] .nav-tab.active::before {
  background: #4b8df7;
  color: #ffffff;
}

body[data-theme="control"] .quick-stats div {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.06);
}

body[data-theme="control"] .quick-stats span {
  color: #ffffff;
  font-size: 22px;
}

body[data-theme="control"] .content {
  padding: 22px 26px 42px;
}

body[data-theme="control"] .topbar {
  margin: -22px -26px 22px;
  padding: 16px 26px;
  border-bottom: 1px solid var(--line);
  background: rgba(247, 249, 252, 0.96);
  box-shadow: 0 8px 20px rgba(23, 32, 42, 0.04);
}

body[data-theme="control"] .topbar h2 {
  font-size: 24px;
}

body[data-theme="control"] .eyebrow {
  color: #3d74d8;
  font-size: 10px;
}

body[data-theme="control"] .session-pill,
body[data-theme="control"] .secondary-button,
body[data-theme="control"] .small-button {
  border-color: var(--line);
  background: #ffffff;
  color: #1f2933;
}

body[data-theme="control"] .primary-button {
  border-color: #4b8df7;
  background: #4b8df7;
  color: #ffffff;
  box-shadow: 0 10px 20px rgba(75, 141, 247, 0.18);
}

body[data-theme="control"] .primary-button:hover,
body[data-theme="control"] .primary-button:focus-visible {
  border-color: #2563d9;
  background: #2563d9;
}

body[data-theme="control"] .secondary-button:hover,
body[data-theme="control"] .secondary-button:focus-visible,
body[data-theme="control"] .small-button:hover,
body[data-theme="control"] .small-button:focus-visible {
  border-color: #a8c5f7;
  background: #edf4ff;
  color: #1e5fc7;
}

body[data-theme="control"] .metric-grid {
  grid-template-columns: repeat(4, minmax(170px, 1fr));
}

body[data-theme="control"] .metric-card {
  min-height: 110px;
  padding: 18px 18px 16px;
  border: 0;
  color: #ffffff;
  box-shadow: 0 16px 34px rgba(23, 32, 42, 0.16);
}

body[data-theme="control"] .metric-card::before {
  display: none;
}

body[data-theme="control"] .metric-card .metric-label,
body[data-theme="control"] .metric-card strong {
  color: #ffffff;
}

body[data-theme="control"] .metric-card .metric-label {
  opacity: 0.84;
}

body[data-theme="control"] .metric-card:nth-child(1) {
  background: linear-gradient(135deg, #ef5350, #e53935);
}

body[data-theme="control"] .metric-card:nth-child(2) {
  background: linear-gradient(135deg, #f6c046, #f4a62a);
}

body[data-theme="control"] .metric-card:nth-child(3) {
  background: linear-gradient(135deg, #4fc58f, #2da66f);
}

body[data-theme="control"] .metric-card:nth-child(4) {
  background: linear-gradient(135deg, #5fa8ff, #3d74d8);
}

body[data-theme="control"] .panel,
body[data-theme="control"] .goal-card,
body[data-theme="control"] .person-card,
body[data-theme="control"] .toolbar,
body[data-theme="control"] .person-form-row,
body[data-theme="control"] .account-form-row,
body[data-theme="control"] .theme-settings,
body[data-theme="control"] .user-panel-header,
body[data-theme="control"] .calendar-hero,
body[data-theme="control"] .calendar-board-card,
body[data-theme="control"] .calendar-day-panel,
body[data-theme="control"] .calendar-summary-panel {
  border-color: var(--ui-line);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow-soft);
}

body[data-theme="control"] .panel {
  padding: 16px;
}

body[data-theme="control"] .panel-heading {
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

body[data-theme="control"] .panel h3,
body[data-theme="control"] .panel h4 {
  font-size: 16px;
}

body[data-theme="control"] .split-layout {
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.72fr);
}

body[data-theme="control"] .goal-board {
  grid-template-columns: 1fr;
  gap: 10px;
}

body[data-theme="control"] .goal-card {
  gap: 10px;
  padding: 14px;
  box-shadow: 0 8px 20px rgba(23, 32, 42, 0.06);
}

body[data-theme="control"] .goal-card::before {
  width: 0;
}

body[data-theme="control"] .goal-card-header {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

body[data-theme="control"] .goal-card h4 {
  font-size: 16px;
}

body[data-theme="control"] .goal-card p {
  font-size: 13px;
}

body[data-theme="control"] .meta-row {
  gap: 6px;
}

body[data-theme="control"] .badge {
  min-height: 22px;
  padding: 0 8px;
  border-radius: 5px;
  background: #eef2f6;
  color: #4b5563;
  font-size: 11px;
}

body[data-theme="control"] .badge.high {
  background: #e8f1ff;
  color: #2563d9;
}

body[data-theme="control"] .badge.medium {
  background: #fff4da;
  color: #9a6a1b;
}

body[data-theme="control"] .badge.done,
body[data-theme="control"] .badge.low {
  background: #e4f7ee;
  color: #2f855a;
}

body[data-theme="control"] .badge.late {
  background: #ffe7e6;
  color: #d92d20;
}

body[data-theme="control"] .badge.date-badge {
  background: #edf4ff;
  color: #1e5fc7;
}

body[data-theme="control"] .progress-track {
  height: 7px;
  background: #e7ebf0;
}

body[data-theme="control"] .progress-fill {
  background: linear-gradient(90deg, #4b8df7, #2da66f);
}

body[data-theme="control"] .goal-rings {
  grid-template-columns: repeat(2, minmax(0, 210px));
}

body[data-theme="control"] .ring-card,
body[data-theme="control"] .delegation-details,
body[data-theme="control"] .subtask-editor,
body[data-theme="control"] .delegation-editor,
body[data-theme="control"] .user-metrics article,
body[data-theme="control"] .layout-manager,
body[data-theme="control"] .custom-theme-panel,
body[data-theme="control"] .account-row,
body[data-theme="control"] .history-row,
body[data-theme="control"] .person-goal-row {
  border-color: var(--ui-line);
  background: #f8fafc;
}

body[data-theme="control"] .ring-card {
  padding: 9px;
}

body[data-theme="control"] .percent-ring {
  width: 50px;
  height: 50px;
}

body[data-theme="control"] .delegation-details {
  padding: 10px;
}

body[data-theme="control"] .delegation-details dl {
  grid-template-columns: minmax(120px, 0.28fr) minmax(0, 1fr);
}

body[data-theme="control"] .subtask-list {
  overflow: hidden;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

body[data-theme="control"] .subtask-list li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 8px;
  padding: 8px 10px;
  border-top: 1px solid var(--line);
}

body[data-theme="control"] .subtask-list li:nth-child(even) {
  background: #f8fafc;
}

body[data-theme="control"] .subtask-list li:first-child {
  border-top: 0;
}

body[data-theme="control"] .admin-table-row,
body[data-theme="control"] .admin-alert-card,
body[data-theme="control"] .person-load-row {
  padding: 11px 0;
}

body[data-theme="control"] .admin-table-row,
body[data-theme="control"] .admin-alert-card {
  border-color: var(--line);
  background: #ffffff;
}

body[data-theme="control"] .admin-alert-card.late,
body[data-theme="control"] .calendar-summary-card.late,
body[data-theme="control"] .calendar-day-task-card.late {
  border-color: #ffc6c3;
  background: #fff6f5;
}

body[data-theme="control"] input,
body[data-theme="control"] select,
body[data-theme="control"] textarea {
  border-color: var(--line);
  background: #ffffff;
}

body[data-theme="control"] input:focus,
body[data-theme="control"] select:focus,
body[data-theme="control"] textarea:focus {
  border-color: #7fb0ff;
  outline-color: rgba(75, 141, 247, 0.16);
}

body[data-theme="control"] #calendarView {
  --calendar-bg: var(--bg);
  --calendar-surface: #ffffff;
  --calendar-line: var(--line);
  --calendar-ink: var(--ink);
  --calendar-muted: var(--muted);
  --calendar-accent: #4b8df7;
  --calendar-accent-dark: #2563d9;
  --calendar-accent-soft: #e8f1ff;
  --calendar-danger: #ef5350;
  --calendar-danger-soft: #ffe7e6;
  --calendar-info: #4b8df7;
  --calendar-info-soft: #e8f1ff;
  --calendar-highlight: #2f343b;
  --calendar-highlight-soft: #e6e9ed;
}

body[data-theme="control"] #calendarView .calendar-hero {
  padding: 16px;
}

body[data-theme="control"] #calendarView .calendar-board-card {
  padding: 10px;
}

body[data-theme="control"] #calendarView .calendar-day {
  min-height: 118px;
  background: #ffffff;
}

body[data-theme="control"] #calendarView .calendar-weekday {
  background: #f2f5f8;
}

body[data-theme="control"] #calendarView .calendar-day.has-goal {
  background: linear-gradient(180deg, #f8fbff, #ffffff);
}

body[data-theme="control"] #calendarView .calendar-day.has-late-goal {
  background: linear-gradient(180deg, #fff4f3, #ffffff);
}

body[data-theme="control"] #calendarView .calendar-day.selected {
  box-shadow: inset 0 0 0 2px #4b8df7, 0 0 0 3px rgba(75, 141, 247, 0.12);
}

body[data-theme="control"] #calendarView .calendar-goal {
  border-radius: 5px;
  font-size: 11px;
}

body[data-theme="control"] #calendarView .calendar-goal.range {
  background: #f3f5f8;
  color: #384251;
}

body[data-theme="control"] #calendarView .calendar-goal.start,
body[data-theme="control"] #calendarView .calendar-goal.end {
  background: #e8f1ff;
  color: #2563d9;
}

body[data-theme="control"] #calendarView .calendar-goal.late {
  background: #ffe7e6;
  color: #d92d20;
}

body[data-theme="control"] #calendarView .calendar-goal.highlighted {
  background: #2f343b;
  color: #ffffff;
}

body[data-theme="control"] .calendar-day-task-card,
body[data-theme="control"] .calendar-summary-card {
  background: #ffffff;
}

body[data-theme="control"] .calendar-day-subtasks li {
  background: #f8fafc;
}

body[data-theme="control"] .person-card {
  box-shadow: 0 8px 20px rgba(23, 32, 42, 0.06);
}

body[data-theme="control"] .person-card::after {
  background: linear-gradient(90deg, #4b8df7, transparent);
}

body[data-theme="control"] .theme-preview {
  background:
    linear-gradient(90deg, rgba(75, 141, 247, 0.18), rgba(69, 185, 124, 0.14)),
    #2f343b;
  color: #ffffff;
}

body[data-theme="control"] .theme-preview span {
  background: linear-gradient(135deg, #4b8df7, #45b97c);
}

body[data-theme="control"] .theme-preview small {
  border-color: #5fa8ff;
  color: #d9e9ff;
}

@media (max-width: 1180px) {
  body[data-theme="control"] .app-shell {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  body[data-theme="control"] .content {
    padding: 16px;
  }

  body[data-theme="control"] .topbar {
    margin: -16px -16px 16px;
    padding: 16px;
  }

  body[data-theme="control"] .goal-rings {
    grid-template-columns: 1fr;
  }
}

/* Control Room base applied to every color variant. */
body[data-theme] {
  --cr-app-bg: var(--bg);
  --cr-content-bg: var(--surface);
  --cr-sidebar-bg: linear-gradient(180deg, #323840 0%, #252a31 100%);
  --cr-sidebar-border: rgba(255, 255, 255, 0.08);
  --cr-sidebar-text: rgba(238, 243, 248, 0.74);
  --cr-sidebar-text-strong: #ffffff;
  --cr-sidebar-muted: rgba(238, 243, 248, 0.62);
  --cr-sidebar-hover: rgba(255, 255, 255, 0.08);
  --cr-sidebar-active: #3b424b;
  --cr-sidebar-accent: var(--accent);
  --cr-topbar-bg: rgba(247, 249, 252, 0.96);
  --cr-panel-bg: rgba(255, 255, 255, 0.96);
  --cr-subtle-bg: #f8fafc;
  --cr-kpi-1: linear-gradient(135deg, #ef5350, #e53935);
  --cr-kpi-2: linear-gradient(135deg, #f6c046, #f4a62a);
  --cr-kpi-3: linear-gradient(135deg, #4fc58f, #2da66f);
  --cr-kpi-4: linear-gradient(135deg, #5fa8ff, #3d74d8);
  --cr-focus: rgba(75, 141, 247, 0.16);
  --cr-button-hover: #edf4ff;
  --ui-line: color-mix(in srgb, var(--line) 82%, var(--surface));
  background: var(--cr-app-bg);
  font-size: 14px;
}

body[data-theme="control"] {
  --cr-app-bg:
    radial-gradient(circle at 72% 0%, rgba(75, 141, 247, 0.08), transparent 28rem),
    var(--bg);
  --cr-sidebar-bg: linear-gradient(180deg, #323840 0%, #252a31 100%);
  --cr-sidebar-accent: #5fa8ff;
}

body[data-theme="light"] {
  --cr-app-bg:
    radial-gradient(circle at 72% 0%, rgba(20, 121, 201, 0.1), transparent 28rem),
    var(--bg);
  --cr-sidebar-bg: linear-gradient(180deg, #1f5f8f 0%, #123a5d 100%);
  --cr-sidebar-active: rgba(255, 255, 255, 0.13);
  --cr-sidebar-accent: #8fcfff;
  --cr-kpi-1: linear-gradient(135deg, #43a6df, #1479c9);
  --cr-kpi-2: linear-gradient(135deg, #80c7ff, #2f87d7);
  --cr-kpi-3: linear-gradient(135deg, #4fb3d7, #166f9e);
  --cr-kpi-4: linear-gradient(135deg, #2469a8, #0b5fa5);
}

body[data-theme="executive"] {
  --cr-app-bg: #f4f2ee;
  --cr-sidebar-bg: linear-gradient(180deg, #12151a 0%, #090b0e 100%);
  --cr-sidebar-active: rgba(184, 155, 94, 0.18);
  --cr-sidebar-accent: #b89b5e;
  --cr-topbar-bg: rgba(244, 242, 238, 0.96);
  --cr-panel-bg: rgba(255, 253, 248, 0.96);
  --cr-subtle-bg: #fbf8f1;
  --cr-kpi-1: linear-gradient(135deg, #343840, #111111);
  --cr-kpi-2: linear-gradient(135deg, #d5bd83, #9a793b);
  --cr-kpi-3: linear-gradient(135deg, #6f9f7f, #2f6f4f);
  --cr-kpi-4: linear-gradient(135deg, #6f7480, #374151);
  --cr-button-hover: #efe7d5;
}

body[data-theme="matrix"] {
  --cr-app-bg:
    radial-gradient(circle at 76% 0%, rgba(255, 49, 85, 0.12), transparent 28rem),
    var(--bg);
  --cr-sidebar-bg: linear-gradient(180deg, #141820 0%, #080a0f 100%);
  --cr-sidebar-active: rgba(255, 49, 85, 0.16);
  --cr-sidebar-accent: #ff3155;
  --cr-topbar-bg: rgba(15, 18, 23, 0.96);
  --cr-panel-bg: rgba(15, 18, 23, 0.96);
  --cr-subtle-bg: #171c24;
  --cr-kpi-1: linear-gradient(135deg, #ff3155, #b31935);
  --cr-kpi-2: linear-gradient(135deg, #ff7b91, #ff3155);
  --cr-kpi-3: linear-gradient(135deg, #4fd49d, #1f9e6b);
  --cr-kpi-4: linear-gradient(135deg, #657181, #2b3340);
  --cr-button-hover: #202634;
}

body[data-theme="bitrix"] {
  --cr-app-bg:
    radial-gradient(circle at 72% 0%, rgba(47, 198, 246, 0.16), transparent 28rem),
    var(--bg);
  --cr-sidebar-bg: linear-gradient(180deg, #153b66 0%, #0e2949 100%);
  --cr-sidebar-active: rgba(47, 198, 246, 0.18);
  --cr-sidebar-accent: #2fc6f6;
  --cr-kpi-1: linear-gradient(135deg, #f15b5b, #d93636);
  --cr-kpi-2: linear-gradient(135deg, #ffb84d, #ff9f1c);
  --cr-kpi-3: linear-gradient(135deg, #45d486, #31b86a);
  --cr-kpi-4: linear-gradient(135deg, #2fc6f6, #0a7eb8);
}

body[data-theme="dmsales"] {
  --cr-app-bg:
    radial-gradient(circle at 76% 0%, rgba(208, 39, 141, 0.1), transparent 28rem),
    var(--bg);
  --cr-sidebar-bg: linear-gradient(180deg, #252631 0%, #171821 100%);
  --cr-sidebar-active: rgba(208, 39, 141, 0.18);
  --cr-sidebar-accent: #d0278d;
  --cr-kpi-1: linear-gradient(135deg, #d0278d, #a51b72);
  --cr-kpi-2: linear-gradient(135deg, #9324c2, #6f1c93);
  --cr-kpi-3: linear-gradient(135deg, #00a9e7, #007db0);
  --cr-kpi-4: linear-gradient(135deg, #606876, #15151a);
}

body[data-theme="custom"] {
  --cr-app-bg: var(--bg);
  --cr-sidebar-bg:
    linear-gradient(180deg, color-mix(in srgb, var(--ink) 92%, var(--accent)) 0%, var(--ink) 100%);
  --cr-sidebar-active: color-mix(in srgb, var(--accent) 24%, transparent);
  --cr-sidebar-accent: var(--accent);
  --cr-kpi-1: linear-gradient(135deg, var(--danger), color-mix(in srgb, var(--danger) 70%, #000000));
  --cr-kpi-2: linear-gradient(135deg, var(--warning), color-mix(in srgb, var(--warning) 70%, #000000));
  --cr-kpi-3: linear-gradient(135deg, var(--success), color-mix(in srgb, var(--success) 70%, #000000));
  --cr-kpi-4: linear-gradient(135deg, var(--accent), var(--accent-dark));
}

body[data-theme] .app-shell {
  grid-template-columns: 230px minmax(0, 1fr);
  background: var(--cr-app-bg);
}

body[data-theme] .sidebar {
  position: sticky;
  top: 0;
  min-height: 100vh;
  gap: 18px;
  padding: 22px 14px;
  border-right: 0;
  background: var(--cr-sidebar-bg);
  color: var(--cr-sidebar-text-strong);
  box-shadow: 8px 0 24px rgba(27, 33, 41, 0.16);
}

body[data-theme] .brand {
  padding: 0 8px 12px;
  border-bottom: 1px solid var(--cr-sidebar-border);
}

body[data-theme] .brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--cr-sidebar-accent), color-mix(in srgb, var(--cr-sidebar-accent) 72%, #000000));
  color: #ffffff;
  box-shadow: none;
}

body[data-theme="executive"] .brand-mark {
  color: #111111;
}

body[data-theme] .sidebar .brand h1 {
  color: var(--cr-sidebar-text-strong);
  font-size: 15px;
}

body[data-theme] .sidebar .brand p,
body[data-theme] .quick-stats small {
  color: var(--cr-sidebar-muted);
  font-size: 12px;
}

body[data-theme] .nav-tabs {
  gap: 3px;
}

body[data-theme] .nav-tab {
  min-height: 38px;
  padding: 8px 10px;
  color: var(--cr-sidebar-text);
  font-size: 13px;
  font-weight: 650;
}

body[data-theme] .nav-tab::before {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--cr-sidebar-text);
}

body[data-theme] .nav-tab:hover,
body[data-theme] .nav-tab:focus-visible {
  background: var(--cr-sidebar-hover);
  color: var(--cr-sidebar-text-strong);
}

body[data-theme] .nav-tab.active {
  background: var(--cr-sidebar-active);
  color: var(--cr-sidebar-text-strong);
  box-shadow: inset 3px 0 0 var(--cr-sidebar-accent);
}

body[data-theme] .nav-tab.active::before {
  background: var(--cr-sidebar-accent);
  color: #ffffff;
}

body[data-theme="executive"] .nav-tab.active::before {
  color: #111111;
}

body[data-theme] .quick-stats div {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.06);
}

body[data-theme] .quick-stats span {
  color: #ffffff;
  font-size: 22px;
}

body[data-theme] .content {
  padding: 22px 26px 42px;
}

body[data-theme] .topbar {
  margin: -22px -26px 22px;
  padding: 16px 26px;
  border-bottom: 1px solid var(--ui-line);
  background: var(--cr-topbar-bg);
  box-shadow: 0 8px 20px rgba(23, 32, 42, 0.04);
}

body[data-theme] .topbar h2 {
  font-size: 24px;
}

body[data-theme] .eyebrow {
  color: var(--accent-dark);
  font-size: 10px;
}

body[data-theme] .primary-button,
body[data-theme] .secondary-button,
body[data-theme] .small-button,
body[data-theme] .session-pill {
  min-height: 36px;
  border-radius: 7px;
  font-size: 13px;
}

body[data-theme] .secondary-button,
body[data-theme] .small-button,
body[data-theme] .session-pill {
  border-color: var(--ui-line);
  background: var(--surface);
  color: var(--ink);
}

body[data-theme] .primary-button {
  border-color: var(--accent);
  background: var(--accent);
  color: #ffffff;
  box-shadow: 0 10px 20px color-mix(in srgb, var(--accent) 24%, transparent);
}

body[data-theme] .secondary-button:hover,
body[data-theme] .secondary-button:focus-visible,
body[data-theme] .small-button:hover,
body[data-theme] .small-button:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--ui-line));
  background: var(--cr-button-hover);
  color: var(--accent-dark);
}

body[data-theme] input,
body[data-theme] select,
body[data-theme] textarea {
  border-color: var(--ui-line);
  border-radius: 7px;
  background: var(--surface);
  font-size: 13px;
}

body[data-theme] input,
body[data-theme] select {
  height: 38px;
}

body[data-theme] input:focus,
body[data-theme] select:focus,
body[data-theme] textarea:focus {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--ui-line));
  outline-color: var(--cr-focus);
}

body[data-theme] label span {
  font-size: 10px;
}

body[data-theme] .metric-grid {
  grid-template-columns: repeat(4, minmax(170px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

body[data-theme] .metric-card {
  min-height: 106px;
  padding: 16px 18px;
  border: 0;
  color: #ffffff;
  box-shadow: 0 16px 34px rgba(23, 32, 42, 0.16);
}

body[data-theme] .metric-card::before {
  display: none;
}

body[data-theme] .metric-card .metric-label,
body[data-theme] .metric-card strong {
  color: #ffffff;
}

body[data-theme] .metric-card .metric-label {
  opacity: 0.86;
}

body[data-theme] .metric-card strong {
  font-size: 30px;
}

body[data-theme] .metric-card:nth-child(1) {
  background: var(--cr-kpi-1);
}

body[data-theme] .metric-card:nth-child(2) {
  background: var(--cr-kpi-2);
}

body[data-theme] .metric-card:nth-child(3) {
  background: var(--cr-kpi-3);
}

body[data-theme] .metric-card:nth-child(4) {
  background: var(--cr-kpi-4);
}

body[data-theme] .panel,
body[data-theme] .goal-card,
body[data-theme] .person-card,
body[data-theme] .toolbar,
body[data-theme] .person-form-row,
body[data-theme] .account-form-row,
body[data-theme] .theme-settings,
body[data-theme] .user-panel-header,
body[data-theme] .calendar-hero,
body[data-theme] .calendar-board-card,
body[data-theme] .calendar-day-panel,
body[data-theme] .calendar-summary-panel {
  border-color: var(--ui-line);
  background: var(--cr-panel-bg);
  box-shadow: var(--shadow-soft);
}

body[data-theme] .panel {
  padding: 16px;
}

body[data-theme] .panel-heading {
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ui-line);
}

body[data-theme] .panel h3,
body[data-theme] .panel h4 {
  font-size: 16px;
}

body[data-theme] .split-layout {
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.72fr);
  gap: 16px;
}

body[data-theme] .goal-board {
  grid-template-columns: 1fr;
  gap: 10px;
}

body[data-theme] .goal-card {
  gap: 10px;
  padding: 14px;
  box-shadow: 0 8px 20px rgba(23, 32, 42, 0.06);
}

body[data-theme] .goal-card::before {
  display: none;
}

body[data-theme] .goal-card-header {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ui-line);
}

body[data-theme] .goal-card h4 {
  font-size: 16px;
}

body[data-theme] .goal-card p {
  font-size: 13px;
}

body[data-theme] .meta-row {
  gap: 6px;
}

body[data-theme] .badge {
  min-height: 22px;
  padding: 0 8px;
  border-radius: 5px;
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 11px;
}

body[data-theme] .badge.high {
  background: var(--info-soft);
  color: var(--info);
}

body[data-theme] .badge.medium {
  background: var(--warning-soft);
  color: var(--warning);
}

body[data-theme] .badge.done,
body[data-theme] .badge.low {
  background: var(--success-soft);
  color: var(--success);
}

body[data-theme] .badge.late {
  background: var(--danger-soft);
  color: var(--danger);
}

body[data-theme] .badge.date-badge {
  background: var(--accent-soft);
  color: var(--accent-dark);
}

body[data-theme] .progress-track {
  height: 7px;
  background: color-mix(in srgb, var(--line) 70%, var(--surface));
}

body[data-theme] .progress-fill {
  background: linear-gradient(90deg, var(--accent), var(--success));
}

body[data-theme] .goal-rings {
  grid-template-columns: repeat(2, minmax(0, 210px));
}

body[data-theme] .ring-card,
body[data-theme] .delegation-details,
body[data-theme] .subtask-editor,
body[data-theme] .delegation-editor,
body[data-theme] .user-metrics article,
body[data-theme] .layout-manager,
body[data-theme] .custom-theme-panel,
body[data-theme] .account-row,
body[data-theme] .history-row,
body[data-theme] .person-goal-row {
  border-color: var(--ui-line);
  background: var(--cr-subtle-bg);
}

body[data-theme] .ring-card {
  padding: 9px;
}

body[data-theme] .percent-ring {
  width: 50px;
  height: 50px;
}

body[data-theme] .delegation-details {
  padding: 10px;
}

body[data-theme] .delegation-details dl {
  grid-template-columns: minmax(120px, 0.28fr) minmax(0, 1fr);
}

body[data-theme] .subtask-list {
  overflow: hidden;
  gap: 0;
  border: 1px solid var(--ui-line);
  border-radius: 8px;
  background: var(--surface);
}

body[data-theme] .subtask-list li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 8px;
  padding: 8px 10px;
  border-top: 1px solid var(--ui-line);
}

body[data-theme] .subtask-list li:nth-child(even) {
  background: var(--cr-subtle-bg);
}

body[data-theme] .subtask-list li:first-child {
  border-top: 0;
}

body[data-theme] .admin-table-row,
body[data-theme] .admin-alert-card,
body[data-theme] .person-load-row {
  padding: 11px 0;
}

body[data-theme] .admin-table-row,
body[data-theme] .admin-alert-card {
  border-color: var(--ui-line);
  background: var(--surface);
}

body[data-theme] .admin-alert-card.late,
body[data-theme] .calendar-summary-card.late,
body[data-theme] .calendar-day-task-card.late {
  border-color: color-mix(in srgb, var(--danger) 24%, var(--ui-line));
  background: var(--danger-soft);
}

body[data-theme] #calendarView {
  --calendar-bg: var(--bg);
  --calendar-surface: var(--surface);
  --calendar-line: var(--ui-line);
  --calendar-ink: var(--ink);
  --calendar-muted: var(--muted);
  --calendar-accent: var(--accent);
  --calendar-accent-dark: var(--accent-dark);
  --calendar-accent-soft: var(--accent-soft);
  --calendar-danger: var(--danger);
  --calendar-danger-soft: var(--danger-soft);
  --calendar-info: var(--info);
  --calendar-info-soft: var(--info-soft);
}

body[data-theme] #calendarView .calendar-hero {
  padding: 16px;
}

body[data-theme] #calendarView .calendar-board-card {
  padding: 10px;
}

body[data-theme] #calendarView .calendar-day {
  min-height: 118px;
  background: var(--surface);
}

body[data-theme] #calendarView .calendar-weekday {
  background: var(--cr-subtle-bg);
}

body[data-theme] #calendarView .calendar-day.has-goal {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 6%, var(--surface)), var(--surface));
}

body[data-theme] #calendarView .calendar-day.has-late-goal {
  background: linear-gradient(180deg, color-mix(in srgb, var(--danger) 8%, var(--surface)), var(--surface));
}

body[data-theme] #calendarView .calendar-day.selected {
  box-shadow: inset 0 0 0 2px var(--accent), 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}

body[data-theme] #calendarView .calendar-goal {
  border-radius: 5px;
  font-size: 11px;
}

body[data-theme] #calendarView .calendar-goal.range {
  background: var(--surface-muted);
  color: var(--ink);
}

body[data-theme] #calendarView .calendar-goal.start,
body[data-theme] #calendarView .calendar-goal.end {
  background: var(--accent-soft);
  color: var(--accent-dark);
}

body[data-theme] #calendarView .calendar-goal.late {
  background: var(--danger-soft);
  color: var(--danger);
}

body[data-theme] #calendarView .calendar-goal.highlighted {
  background: var(--ink);
  color: var(--surface);
}

body[data-theme] .calendar-day-task-card,
body[data-theme] .calendar-summary-card {
  background: var(--surface);
}

body[data-theme] .calendar-day-subtasks li {
  background: var(--cr-subtle-bg);
}

body[data-theme] .person-card {
  box-shadow: 0 8px 20px rgba(23, 32, 42, 0.06);
}

body[data-theme] .person-card::after {
  background: linear-gradient(90deg, var(--accent), transparent);
}

body[data-theme] .theme-preview {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--success) 16%, transparent)),
    var(--ink);
  color: var(--surface);
}

body[data-theme] .theme-preview span {
  background: linear-gradient(135deg, var(--accent), var(--success));
}

body[data-theme] .theme-preview small {
  border-color: var(--accent);
  color: color-mix(in srgb, var(--accent) 44%, #ffffff);
}

@media (max-width: 1180px) {
  body[data-theme] .app-shell {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  body[data-theme] .content {
    padding: 16px;
  }

  body[data-theme] .topbar {
    margin: -16px -16px 16px;
    padding: 16px;
  }

  body[data-theme] .goal-rings {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════
   MILESTONE THEME — Overrides Control Room base
   Design spec: design crm.md
   ═══════════════════════════════════════════════ */

/* -- App shell & layout -- */
body[data-theme="milestone"] {
  --cr-app-bg: #FFFFFF;
  --cr-content-bg: #FFFFFF;
  --cr-sidebar-bg: #FAF8F5;
  --cr-sidebar-border: #EDEDED;
  --cr-sidebar-text: #5A5A5A;
  --cr-sidebar-text-strong: #1C1C1E;
  --cr-sidebar-muted: #5A5A5A;
  --cr-sidebar-hover: rgba(244, 162, 107, 0.08);
  --cr-sidebar-active: rgba(244, 162, 107, 0.15);
  --cr-sidebar-accent: #F4A26B;
  --cr-topbar-bg: #FFFFFF;
  --cr-panel-bg: #FFFFFF;
  --cr-subtle-bg: #FAF8F5;
  --cr-kpi-1: #FFFFFF;
  --cr-kpi-2: #FFFFFF;
  --cr-kpi-3: #FFFFFF;
  --cr-kpi-4: #FFFFFF;
  --cr-focus: rgba(244, 162, 107, 0.2);
  --cr-button-hover: #FFF5EE;
  --ui-line: #EDEDED;
  --shadow-soft: 0 1px 3px rgba(0,0,0,0.02);
  --info: #F4A26B;
  --info-soft: #FFF0E6;
}

/* -- Sidebar -- */
body[data-theme="milestone"] .sidebar {
  background: #FFFFFF;
  border-right: 1px solid #EDEDED;
  box-shadow: none;
  color: #1C1C1E;
  display: flex;
  flex-direction: column;
}

body[data-theme="milestone"] .brand {
  border-bottom-color: #EDEDED;
}

body[data-theme="milestone"] .brand-mark {
  background: linear-gradient(135deg, #F4A26B, #E8735A);
  color: #ffffff;
}

body[data-theme="milestone"] .sidebar .brand h1 {
  color: #1C1C1E;
}

body[data-theme="milestone"] .sidebar .brand p,
body[data-theme="milestone"] .quick-stats small {
  color: #5A5A5A;
}

body[data-theme="milestone"] .nav-tab {
  color: #1C1C1E;
  font-weight: 500;
}

body[data-theme="milestone"] .nav-tab::before {
  background: rgba(244, 162, 107, 0.12);
  color: #F4A26B;
}

body[data-theme="milestone"] .nav-tab:hover,
body[data-theme="milestone"] .nav-tab:focus-visible {
  background: rgba(244, 162, 107, 0.08);
  color: #1C1C1E;
}

body[data-theme="milestone"] .nav-tab.active {
  background: rgba(244, 162, 107, 0.15);
  color: #1C1C1E;
  font-weight: 700;
  box-shadow: inset 3px 0 0 #F4A26B;
}

body[data-theme="milestone"] .nav-tab.active::before {
  background: #F4A26B;
  color: #FFFFFF;
}

body[data-theme="milestone"] .quick-stats div {
  background: #FFFFFF;
  border-color: #EDEDED;
}

body[data-theme="milestone"] .quick-stats span {
  color: #1C1C1E;
}

/* -- Top Bar -- */
body[data-theme="milestone"] .topbar {
  background: #FFFFFF;
  border-bottom-color: #EDEDED;
  box-shadow: none;
}

body[data-theme="milestone"] .eyebrow {
  color: #F4A26B;
}

/* -- KPI Metric Cards (white, not colored) -- */
body[data-theme="milestone"] .metric-card {
  background: #FFFFFF;
  border: 1px solid #EDEDED;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.02);
  color: #1C1C1E;
}

body[data-theme="milestone"] .metric-card .metric-label {
  color: #5A5A5A;
  opacity: 1;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

body[data-theme="milestone"] .metric-card strong {
  color: #1C1C1E;
  font-size: 30px;
  font-weight: 700;
}

body[data-theme="milestone"] .metric-card:nth-child(1),
body[data-theme="milestone"] .metric-card:nth-child(2),
body[data-theme="milestone"] .metric-card:nth-child(3),
body[data-theme="milestone"] .metric-card:nth-child(4) {
  background: #FFFFFF;
}

/* KPI colored numbers per spec */
body[data-theme="milestone"] .metric-card:nth-child(1) .metric-label { color: #5A5A5A; }
body[data-theme="milestone"] .metric-card:nth-child(1) strong { color: #1C1C1E; }

body[data-theme="milestone"] .metric-card:nth-child(2) .metric-label { color: #5A5A5A; }
body[data-theme="milestone"] .metric-card:nth-child(2) strong { color: #E8735A; }

body[data-theme="milestone"] .metric-card:nth-child(3) .metric-label { color: #5A5A5A; }
body[data-theme="milestone"] .metric-card:nth-child(3) strong { color: #F4A26B; }

body[data-theme="milestone"] .metric-card:nth-child(4) .metric-label { color: #5A5A5A; }
body[data-theme="milestone"] .metric-card:nth-child(4) strong { color: #12A173; }

/* -- Buttons -- */
body[data-theme="milestone"] .primary-button {
  background: #F4A26B;
  color: #FFFFFF;
  border-color: #F4A26B;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(244, 162, 107, 0.2);
}

body[data-theme="milestone"] .primary-button:hover,
body[data-theme="milestone"] .primary-button:focus-visible {
  background: #E8735A;
  border-color: #E8735A;
}

body[data-theme="milestone"] .secondary-button,
body[data-theme="milestone"] .small-button {
  border: 1px solid #EDEDED;
  background: #FFFFFF;
  color: #1C1C1E;
  font-weight: 600;
}

body[data-theme="milestone"] .secondary-button:hover,
body[data-theme="milestone"] .secondary-button:focus-visible,
body[data-theme="milestone"] .small-button:hover,
body[data-theme="milestone"] .small-button:focus-visible {
  border-color: #F4A26B;
  background: #FFF5EE;
  color: #E8735A;
}

body[data-theme="milestone"] .session-pill {
  background: #FAF8F5;
  border-color: #EDEDED;
}

/* -- Panels & Cards -- */
body[data-theme="milestone"] .panel,
body[data-theme="milestone"] .goal-card,
body[data-theme="milestone"] .person-card,
body[data-theme="milestone"] .toolbar,
body[data-theme="milestone"] .person-form-row,
body[data-theme="milestone"] .account-form-row,
body[data-theme="milestone"] .theme-settings,
body[data-theme="milestone"] .user-panel-header,
body[data-theme="milestone"] .calendar-hero,
body[data-theme="milestone"] .calendar-board-card,
body[data-theme="milestone"] .calendar-day-panel,
body[data-theme="milestone"] .calendar-summary-panel {
  border-color: #EDEDED;
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}

body[data-theme="milestone"] .panel-heading {
  border-bottom-color: #EDEDED;
}

/* -- Goal Cards -- */
body[data-theme="milestone"] .goal-card {
  border-radius: 12px;
  border: 1px solid #EDEDED;
  box-shadow: 0 1px 3px rgba(0,0,0,0.02);
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}

body[data-theme="milestone"] .goal-card:hover {
  box-shadow: 0 6px 20px rgba(244, 162, 107, 0.12);
  transform: translateY(-1px);
}

body[data-theme="milestone"] .goal-card h4 {
  font-size: 17px;
  font-weight: 700;
  color: #1C1C1E;
}

body[data-theme="milestone"] .goal-card-header {
  border-bottom-color: #EDEDED;
}

/* -- Badges per design crm.md -- */
body[data-theme="milestone"] .badge {
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  background: #FAF8F5;
  color: #5A5A5A;
}

body[data-theme="milestone"] .badge.high {
  background: #E8735A;
  color: #FFFFFF;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 4px 12px;
}

body[data-theme="milestone"] .badge.medium {
  background: #FFF0E6;
  color: #F4A26B;
}

body[data-theme="milestone"] .badge.low,
body[data-theme="milestone"] .badge.done {
  background: #E6F7F0;
  color: #12A173;
}

body[data-theme="milestone"] .badge.late {
  background: #FFF0E6;
  color: #E8735A;
}

body[data-theme="milestone"] .badge.date-badge {
  background: rgba(242, 196, 168, 0.25);
  color: #1C1C1E;
}

/* -- Progress Bar -- */
body[data-theme="milestone"] .progress-track {
  background: #FAF8F5;
  height: 8px;
}

body[data-theme="milestone"] .progress-fill {
  background: #F4A26B;
}

/* -- Ring cards & details -- */
body[data-theme="milestone"] .ring-card,
body[data-theme="milestone"] .delegation-details,
body[data-theme="milestone"] .subtask-editor,
body[data-theme="milestone"] .delegation-editor,
body[data-theme="milestone"] .user-metrics article,
body[data-theme="milestone"] .layout-manager,
body[data-theme="milestone"] .custom-theme-panel,
body[data-theme="milestone"] .account-row,
body[data-theme="milestone"] .history-row,
body[data-theme="milestone"] .person-goal-row {
  border-color: #EDEDED;
  background: #FAF8F5;
}

body[data-theme="milestone"] .percent-ring {
  --ring-color: #F4A26B;
}

/* -- Subtask list -- */
body[data-theme="milestone"] .subtask-list {
  border-color: #EDEDED;
}

body[data-theme="milestone"] .subtask-list li:nth-child(even) {
  background: #FAF8F5;
}

/* -- Person card -- */
body[data-theme="milestone"] .person-card::after {
  background: linear-gradient(90deg, #F4A26B, transparent);
}

/* -- Calendar -- */
body[data-theme="milestone"] .calendar-cell.today {
  border-color: #F4A26B;
}

body[data-theme="milestone"] #calendarView .calendar-day {
  background: #FFFFFF;
}

body[data-theme="milestone"] #calendarView .calendar-weekday {
  background: #FAF8F5;
}

body[data-theme="milestone"] #calendarView .calendar-day.has-goal {
  background: linear-gradient(180deg, rgba(244, 162, 107, 0.06), #FFFFFF);
}

body[data-theme="milestone"] #calendarView .calendar-day.has-late-goal {
  background: linear-gradient(180deg, rgba(232, 115, 90, 0.08), #FFFFFF);
}

/* -- Theme preview -- */
body[data-theme="milestone"] .theme-preview {
  background: linear-gradient(90deg, rgba(244, 162, 107, 0.15), rgba(18, 161, 115, 0.1)), #1C1C1E;
}

body[data-theme="milestone"] .theme-preview span {
  background: linear-gradient(135deg, #F4A26B, #12A173);
}

/* -- Login -- */
body[data-theme="milestone"] .login-screen {
  background:
    radial-gradient(circle at 80% 20%, rgba(242, 196, 168, 0.25) 0%, transparent 60%),
    #FFFFFF;
}

body[data-theme="milestone"] .login-card {
  border: 1px solid #EDEDED;
  box-shadow: 0 8px 32px rgba(244, 162, 107, 0.1);
}

/* -- Inputs -- */
body[data-theme="milestone"] input:focus,
body[data-theme="milestone"] select:focus,
body[data-theme="milestone"] textarea:focus {
  border-color: rgba(244, 162, 107, 0.6);
  outline-color: rgba(244, 162, 107, 0.2);
}

/* ── Nav Section Labels ── */
body[data-theme="milestone"] .nav-section-label {
  display: block;
  padding: 16px 10px 6px;
  color: #999;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body[data-theme="milestone"] .nav-section-label:first-child {
  padding-top: 0;
}

/* ── Nav Tabs (clean, no icons) ── */
body[data-theme="milestone"] .nav-tab {
  display: flex;
  align-items: center;
  color: #1C1C1E;
  font-weight: 500;
  font-size: 14px;
  padding: 10px 12px;
  border-radius: 8px;
  position: relative;
}

body[data-theme="milestone"] .nav-tab::before {
  display: none;
}

body[data-theme="milestone"] .nav-tab.active {
  color: #F4A26B;
  font-weight: 700;
  background: rgba(244, 162, 107, 0.08);
  box-shadow: inset 3px 0 0 #F4A26B;
}

/* ── Nav Badge ── */
body[data-theme="milestone"] .nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  margin-left: auto;
  border-radius: 12px;
  background: #F4A26B;
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 700;
}

.nav-section-label {
  display: none;
}
.nav-icon {
  display: none;
}
.nav-badge {
  display: none;
}

body[data-theme="milestone"] .nav-section-label {
  display: block;
}
body[data-theme="milestone"] .nav-icon {
  display: inline-flex;
}
body[data-theme="milestone"] .nav-badge {
  display: inline-flex;
}

/* ── Metric Subtitle ── */
.metric-subtitle {
  display: none;
}

body[data-theme="milestone"] .metric-subtitle {
  display: block;
  color: #999;
  font-size: 12px;
  margin-top: 4px;
  font-weight: 400;
}

body[data-theme="milestone"] .metric-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ── Filter Pills ── */
.filter-pills {
  display: none;
}

body[data-theme="milestone"] .filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

body[data-theme="milestone"] .filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 18px;
  border: 1px solid #EDEDED;
  border-radius: 20px;
  background: #FFFFFF;
  color: #5A5A5A;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

body[data-theme="milestone"] .filter-pill:hover {
  border-color: #F4A26B;
  color: #F4A26B;
}

body[data-theme="milestone"] .filter-pill.active {
  background: #F4A26B;
  color: #FFFFFF;
  border-color: #F4A26B;
}

body[data-theme="milestone"] .filter-pill-icon {
  margin-left: auto;
}

/* ── Sidebar pure white, flex column for settings button ── */
body[data-theme="milestone"] .sidebar {
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  height: 100vh;
  min-height: 100vh;
  padding: 22px 14px;
  gap: 12px;
  box-shadow: none;
  border-right: 1px solid #EDEDED;
}

/* ── Badge WYSOKI as text-only per screenshot ── */
body[data-theme="milestone"] .badge.high {
  background: transparent;
  color: #E8735A;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 13px;
  padding: 0;
}

/* ── Cleaner topbar ── */
body[data-theme="milestone"] .topbar {
  border-bottom: none;
  padding-bottom: 8px;
}

body[data-theme="milestone"] .eyebrow {
  background: rgba(244, 162, 107, 0.12);
  color: #E8735A;
  display: inline-block;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
}

/* ── Brand Logo Image ── */
.brand-logo {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  object-fit: contain;
  flex-shrink: 0;
}

body[data-theme="milestone"] .brand-logo {
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(244, 162, 107, 0.15);
}

/* ═══════════════════════════════════════
   VIEW TRANSITION ANIMATIONS
   ═══════════════════════════════════════ */

@keyframes viewSlideIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes viewChildFadeIn {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Main view entrance */
.view.active.view-enter {
  animation: viewSlideIn 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) both;
}

/* Staggered children — metric cards */
.view.active.view-enter .metric-card {
  opacity: 0;
  animation: viewChildFadeIn 0.3s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.view.active.view-enter .metric-card:nth-child(1) { animation-delay: 0.06s; }
.view.active.view-enter .metric-card:nth-child(2) { animation-delay: 0.12s; }
.view.active.view-enter .metric-card:nth-child(3) { animation-delay: 0.18s; }
.view.active.view-enter .metric-card:nth-child(4) { animation-delay: 0.24s; }

/* Staggered children — panels */
.view.active.view-enter .panel {
  opacity: 0;
  animation: viewChildFadeIn 0.35s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  animation-delay: 0.15s;
}

.view.active.view-enter .split-layout .panel:nth-child(2) {
  animation-delay: 0.22s;
}

/* Staggered children — goal cards */
.view.active.view-enter .goal-card {
  opacity: 0;
  animation: viewChildFadeIn 0.3s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.view.active.view-enter .goal-card:nth-child(1) { animation-delay: 0.08s; }
.view.active.view-enter .goal-card:nth-child(2) { animation-delay: 0.14s; }
.view.active.view-enter .goal-card:nth-child(3) { animation-delay: 0.20s; }
.view.active.view-enter .goal-card:nth-child(4) { animation-delay: 0.26s; }
.view.active.view-enter .goal-card:nth-child(5) { animation-delay: 0.32s; }
.view.active.view-enter .goal-card:nth-child(n+6) { animation-delay: 0.36s; }

/* Staggered children — toolbar & filter pills & admin actions */
.view.active.view-enter .toolbar,
.view.active.view-enter .filter-pills,
.view.active.view-enter .admin-actions {
  opacity: 0;
  animation: viewChildFadeIn 0.3s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  animation-delay: 0.05s;
}

/* Calendar hero */
.view.active.view-enter .calendar-hero {
  opacity: 0;
  animation: viewChildFadeIn 0.35s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  animation-delay: 0.08s;
}

.view.active.view-enter .calendar-board-card {
  opacity: 0;
  animation: viewChildFadeIn 0.4s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  animation-delay: 0.18s;
}

/* Topbar title animation */
.view.active.view-enter ~ .topbar,
.view-enter .topbar {
  animation: viewChildFadeIn 0.3s ease both;
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .view.active.view-enter,
  .view.active.view-enter .metric-card,
  .view.active.view-enter .panel,
  .view.active.view-enter .goal-card,
  .view.active.view-enter .toolbar,
  .view.active.view-enter .filter-pills,
  .view.active.view-enter .calendar-hero,
  .view.active.view-enter .calendar-board-card {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ═══════════════════════════════════════
   SETTINGS DRAWER
   ═══════════════════════════════════════ */

.sidebar-spacer {
  flex: 1;
}

/* Settings button at bottom of sidebar */
.sidebar-settings-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line, #EDEDED);
  border-radius: 8px;
  background: transparent;
  color: var(--muted, #5A5A5A);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.sidebar-settings-btn svg {
  flex-shrink: 0;
  opacity: 0.6;
}

.sidebar-settings-btn:hover {
  background: rgba(244, 162, 107, 0.08);
  color: var(--ink, #1C1C1E);
  border-color: rgba(244, 162, 107, 0.3);
}

/* Overlay */
.settings-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  z-index: 999;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.settings-overlay.visible {
  opacity: 1;
}

/* Drawer */
.settings-drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 320px;
  height: 100vh;
  background: #FFFFFF;
  border-right: 1px solid #EDEDED;
  box-shadow: 8px 0 32px rgba(0, 0, 0, 0.08);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
  overflow-y: auto;
}

.settings-drawer.open {
  transform: translateX(0);
}

.settings-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 16px;
  border-bottom: 1px solid #EDEDED;
}

.settings-drawer-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #1C1C1E;
}

.settings-close-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #EDEDED;
  border-radius: 8px;
  background: #FFFFFF;
  color: #5A5A5A;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.settings-close-btn:hover {
  background: #FAF8F5;
  color: #1C1C1E;
}

.settings-drawer-body {
  padding: 20px;
  flex: 1;
}

.settings-section {
  margin-bottom: 28px;
}

.settings-section h4 {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 700;
  color: #1C1C1E;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.settings-hint {
  margin: 0 0 12px;
  font-size: 12px;
  color: #999;
}

/* Module reorder list */
.module-reorder-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.module-reorder-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #EDEDED;
  border-radius: 8px;
  background: #FFFFFF;
  font-size: 14px;
  font-weight: 500;
  color: #1C1C1E;
  transition: background 0.15s ease;
}

.module-reorder-item:hover {
  background: #FFF9F5;
}

.module-reorder-item .module-label {
  flex: 1;
}

.module-arrows {
  display: flex;
  gap: 4px;
}

.arrow-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #EDEDED;
  border-radius: 6px;
  background: #FFFFFF;
  color: #5A5A5A;
  font-size: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
}

.arrow-btn:hover:not(:disabled) {
  background: #F4A26B;
  color: #FFFFFF;
  border-color: #F4A26B;
}

.arrow-btn:disabled {
  opacity: 0.25;
  cursor: default;
}

.settings-select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #EDEDED;
  border-radius: 8px;
  background: #FFFFFF;
  font-size: 14px;
  color: #1C1C1E;
  cursor: pointer;
}

.settings-drawer-footer {
  padding: 16px 20px;
  border-top: 1px solid #EDEDED;
  position: sticky;
  bottom: 0;
  background: #FFFFFF;
}

.settings-save-btn {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 8px;
  background: #F4A26B;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease;
}

.settings-save-btn:hover {
  background: #E8735A;
}

/* ═══════════════════════════════════════
   KNOWLEDGE BASE MODULE
═══════════════════════════════════════ */

.knowledge-upload-form { padding: 0 4px; }

.knowledge-upload-dropzone {
  border: 2px dashed #EDEDED;
  border-radius: 12px;
  padding: 32px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  background: #FAFAFA;
  margin-bottom: 16px;
}

.knowledge-upload-dropzone.drag-over { border-color: #F4A26B; background: #FFF9F5; }
.knowledge-upload-dropzone.has-file  { border-color: #F4A26B; border-style: solid; background: #FFF9F5; }

.dropzone-inner {
  display: flex; flex-direction: column; align-items: center;
  gap: 8px; color: #8A8A8E;
}
.dropzone-inner svg { color: #CBCBCB; }
.dropzone-hint { font-size: 12px; color: #CBCBCB; }

.upload-link { color: #F4A26B; cursor: pointer; text-decoration: underline; font-weight: 600; }

.knowledge-meta-form { margin-bottom: 12px; }

.knowledge-action-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding-top: 8px;
}

.upload-status   { font-size: 13px; color: #5A5A5A; flex: 1; }
.upload-status.success { color: #4CAF50; }
.upload-status.error   { color: #E8735A; }
.upload-status.info    { color: #F4A26B; font-weight: 600; }
.upload-status.loading { color: #5A8DEE; }

.ai-key-status { font-size: 13px; color: #8A8A8E; flex: 1; }

.ai-settings-body {
  padding: 16px 0 0; border-top: 1px solid #EDEDED; margin-top: 8px;
}

.knowledge-doc-list { display: flex; flex-direction: column; gap: 8px; }

.knowledge-doc-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border: 1px solid #EDEDED; border-radius: 10px;
  background: #FAFAFA; transition: background 0.15s ease; gap: 12px;
}
.knowledge-doc-item:hover { background: #FFF9F5; border-color: rgba(244,162,107,0.3); }

.doc-info { display: flex; align-items: flex-start; gap: 12px; flex: 1; min-width: 0; }
.doc-icon  { font-size: 20px; line-height: 1; flex-shrink: 0; }
.doc-info > div { min-width: 0; }
.doc-info strong { display: block; font-size: 14px; font-weight: 600; color: #1C1C1E; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-meta { display: block; font-size: 12px; color: #8A8A8E; margin-top: 2px; }

.doc-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.doc-tag  { display: inline-block; padding: 2px 8px; background: rgba(244,162,107,0.12); color: #E8735A; border-radius: 20px; font-size: 11px; font-weight: 600; }
.category-badge { background: #E8735A; color: #FFF; font-weight: 700; }

.small-btn { padding: 6px 12px; font-size: 12px; white-space: nowrap; }

/* ═══════════════════════════════════════
   PROBLEMS MODULE
═══════════════════════════════════════ */

.problem-form { padding: 4px; }
.problems-filter-row { display: flex; align-items: center; gap: 8px; }
.problems-list { display: flex; flex-direction: column; gap: 12px; }

.problem-card {
  border: 1px solid #EDEDED; border-radius: 12px; padding: 18px 20px;
  background: #FFFFFF; transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.problem-card:hover { border-color: rgba(244,162,107,0.3); box-shadow: 0 4px 16px rgba(0,0,0,0.06); }

.problem-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.problem-card-title  { display: flex; align-items: center; gap: 10px; }

.problem-status-badge { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; }
.problem-card-title strong { font-size: 15px; color: #1C1C1E; }
.problem-goal-ref { font-size: 12px; color: #8A8A8E; white-space: nowrap; flex-shrink: 0; }
.problem-desc { font-size: 14px; color: #4A4A4E; line-height: 1.6; margin: 0 0 14px; }

.ai-suggestion-box {
  background: linear-gradient(135deg, #FFF5EE, #FFF9F5);
  border: 1px solid rgba(244,162,107,0.3);
  border-radius: 10px; padding: 14px 16px; margin-bottom: 14px;
}
.ai-suggestion-header {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  color: #E8735A; margin-bottom: 10px;
}
.ai-suggestion-body { font-size: 14px; color: #2C2C2E; line-height: 1.7; }

.problem-card-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 12px; border-top: 1px solid #F5F5F5; }
.problem-date { font-size: 12px; color: #AEAEB2; }
.problem-actions { display: flex; gap: 8px; align-items: center; }

.solve-btn {
  background: linear-gradient(135deg, #F4A26B, #E8735A);
  border: none; font-size: 13px; padding: 8px 16px;
}
.solve-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #E8735A, #D4563C);
  transform: translateY(-1px); box-shadow: 0 4px 12px rgba(232,115,90,0.3);
}
.solve-btn:disabled { opacity: 0.6; cursor: wait; }
.empty-state.error { color: #E8735A; }

/* ═══════════════════════════════════════
   MOBILE NAVIGATION (hamburger / off-canvas)
   ═══════════════════════════════════════ */
.mobile-nav-toggle { display: none; }
.topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sidebar-overlay { display: none; }

@media (max-width: 1080px) {
  /* show the hamburger button */
  .mobile-nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex: 0 0 auto; padding: 0;
    border: 1px solid var(--line); border-radius: 12px;
    background: var(--surface); color: inherit; cursor: pointer;
  }
  .mobile-nav-toggle:active { transform: scale(0.95); }

  /* sidebar becomes an off-canvas drawer */
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: min(84vw, 300px);
    z-index: 1300;
    transform: translateX(-100%);
    transition: transform .28s ease;
    border-right: 1px solid var(--line); border-bottom: 0;
    overflow-y: auto;
    gap: 18px;
    box-shadow: 2px 0 30px rgba(0,0,0,.22);
  }
  .app-shell.nav-open .sidebar { transform: translateX(0); }

  /* clean vertical menu inside the drawer */
  .nav-tabs { display: grid; grid-template-columns: 1fr; }
  .nav-tab { text-align: left; }

  /* dimmed overlay behind the drawer */
  .sidebar-overlay {
    display: block; position: fixed; inset: 0; z-index: 1250;
    background: rgba(0,0,0,.45);
    opacity: 0; pointer-events: none; transition: opacity .25s ease;
  }
  .app-shell.nav-open .sidebar-overlay { opacity: 1; pointer-events: auto; }

  /* lock background scroll while the drawer is open */
  body.nav-locked { overflow: hidden; }
}

/* ═══════════════════════════════════════
   MOBILE RESPONSIVENESS FIXES
   NOTE: high-specificity theme rules (`body[data-theme] .metric-grid`, etc.)
   force desktop grids regardless of viewport, so these use !important to win.
   ═══════════════════════════════════════ */
@media (max-width: 760px) {
  /* metric grids (theme rules force repeat(4, minmax(170px,…)) ≈ 680px) */
  .metric-grid,
  .admin-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* problem cards: let header + actions wrap instead of overflowing */
  .problem-card-header { flex-wrap: wrap; }
  .problem-goal-ref { max-width: 100%; }
  .problem-actions { flex-wrap: wrap; }
  .problem-actions > button { flex: 1 1 auto; }
  .problem-followup { flex-wrap: wrap; }
  .problem-followup .followup-input { flex: 1 1 100%; }

  /* calendar: fit the 7-day week to the screen instead of 92px fixed cells */
  .calendar-grid,
  #calendarView .calendar-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    min-width: 0 !important;
  }
  .calendar-day, .calendar-weekday { padding: 5px 2px !important; }
  .calendar-day-number { font-size: 12px !important; }
  .calendar-day-goals { font-size: 10px; }

  /* backstop: nothing should push the page sideways */
  .content { overflow-x: hidden; }
  .view img, .view pre, .view table, .view canvas { max-width: 100%; }
  .session-pill { max-width: 100%; }
}

@media (max-width: 480px) {
  /* phones: one metric per row */
  .metric-grid,
  .admin-metric-grid {
    grid-template-columns: 1fr !important;
  }
}


/* ── Off-canvas sidebar: AUTHORITATIVE override ───────────────────────────
   Theme rules (body[data-theme] .sidebar, body[data-theme="milestone"] .sidebar)
   force position:sticky + min-height:100vh with higher specificity, which kept
   the drawer in the grid flow and pushed all content below the fold. !important
   + last-in-file wins decisively. ──────────────────────────────────────── */
@media (max-width: 1080px) {
  .app-shell { grid-template-columns: 1fr !important; }
  .sidebar {
    position: fixed !important;
    top: 0 !important; left: 0 !important; bottom: 0 !important;
    width: min(86vw, 300px) !important;
    min-height: 0 !important;
    transform: translateX(-100%) !important;
    transition: transform .28s ease !important;
    z-index: 1300 !important;
    overflow-y: auto !important;
    box-shadow: 2px 0 30px rgba(0,0,0,.22) !important;
  }
  .app-shell.nav-open .sidebar { transform: translateX(0) !important; }
}


/* ── Mobile: un-stick the topbar ──────────────────────────────────────────
   The topbar is position:sticky with a semi-transparent bg (rgba(...,.94))
   and desktop-tuned negative margins (margin:-28px -32px). On phones the
   content scrolled UNDER the translucent sticky bar → "double/ghost" look. ── */
@media (max-width: 1080px) {
  .topbar {
    position: static !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
    background: transparent !important;
    border-bottom: 0 !important;
  }
}


/* ── Mobile: collapse EVERY multi-column grid to one column ────────────────
   Theme rules (body[data-theme] .split-layout / .goal-board / .user-* …) force
   2-col layouts with higher specificity than the responsive breakpoints, so the
   panels rendered side-by-side and OVERLAPPED on phones ("double" look). ──── */
@media (max-width: 760px) {
  .split-layout,
  .goal-board,
  .person-grid,
  .sysop-layout-grid,
  .user-panel-header,
  .user-metrics,
  .person-details-metrics,
  .theme-settings,
  .custom-theme-grid,
  .form-grid,
  .goal-rings,
  .delegation-details dl {
    grid-template-columns: 1fr !important;
  }
}


/* Smooth fade/slide-in for every view on switch (no pop) */
.view.active { animation: kbViewEnter 0.34s ease both; }
@keyframes kbViewEnter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .view.active { animation: none; } }


/* ── Dashboard rebalance: important "Priorytetowe cele" in the wide column as a
   multi-column card grid; "Obciążenie osób" stays a compact side list ──────── */
#dashboardView .split-layout [data-dashboard-panel="priorityGoals"] { order: 0; }
#dashboardView .split-layout [data-dashboard-panel="peopleLoad"] { order: 1; }
#dashboardView #dashboardGoalList {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
  align-content: start;
}
@media (max-width: 760px) {
  #dashboardView #dashboardGoalList { grid-template-columns: 1fr; }
}


/* ════ Cele główne / częściowe ════ */
.goal-scope-toggle { display:flex; gap:8px; margin-bottom:10px; }
.goal-scope-btn { padding:8px 18px; border-radius:999px; border:1px solid var(--line); background:#fff; font-weight:600; cursor:pointer; color:#5b5147; font-size:14px; }
.goal-scope-btn.active { background:var(--accent); border-color:var(--accent); color:#fff; }
.goal-scope-desc { margin:0 0 16px; font-size:13.5px; color:#6b5f52; line-height:1.5; }
.goal-group-heading { font-weight:700; color:#C24A2E; margin:18px 0 8px; font-size:14px; }

.main-goal-children { margin-top:12px; padding-top:12px; border-top:1px dashed var(--line); }
.main-goal-children-head { font-weight:600; font-size:13px; color:#5b5147; margin-bottom:8px; display:flex; align-items:center; gap:10px; }
.main-goal-children-empty { font-size:13px; color:#6b5f52; margin:0; }
.child-goal-row { display:grid; grid-template-columns: 1fr auto 120px 44px; align-items:center; gap:10px; padding:7px 10px; border-radius:8px; cursor:pointer; }
.child-goal-row:hover { background:#FFF3EC; }
.child-goal-title { font-weight:500; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.child-goal-owner { font-size:12px; color:#8a7d6e; white-space:nowrap; }
.child-goal-bar { height:7px; background:#eee3d8; border-radius:999px; overflow:hidden; }
.child-goal-bar > span { display:block; height:100%; background:var(--accent); border-radius:999px; }
.child-goal-pct { font-size:12px; font-weight:700; text-align:right; color:#5b5147; }

.link-button { background:none; border:none; color:var(--accent); font-weight:600; cursor:pointer; padding:0; font-size:13px; }
.link-button:hover { text-decoration:underline; }

/* Dashboard: cele główne — postępy */
.goals-hier-summary { font-size:13px; color:#8a7d6e; font-weight:600; }
.main-goals-progress { display:flex; flex-direction:column; gap:14px; }
.mgp-item { border:1px solid var(--line); border-radius:12px; padding:12px 14px; background:#fff; }
.mgp-main { cursor:pointer; }
.mgp-main-head { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.mgp-main-title { font-size:15px; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mgp-main-meta { font-size:12px; color:#8a7d6e; white-space:nowrap; }
.mgp-pct { font-size:13px; font-weight:700; color:#5b5147; }
.mgp-pct-main { font-size:15px; color:var(--accent); }
.mgp-bar { display:block; height:9px; background:#eee3d8; border-radius:999px; overflow:hidden; }
.mgp-bar > span { display:block; height:100%; background:var(--accent); border-radius:999px; }
.mgp-bar-sm { height:6px; }
.mgp-children { margin-top:10px; padding-top:8px; border-top:1px dashed var(--line); display:flex; flex-direction:column; gap:6px; }
.mgp-child { display:grid; grid-template-columns: 1fr 130px 40px; align-items:center; gap:8px; padding:4px 6px; border-radius:6px; cursor:pointer; }
.mgp-child:hover { background:#FFF3EC; }
.mgp-child-title { font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mgp-empty { display:block; color:#8a7d6e; font-size:12.5px; cursor:default; }
.mgp-empty:hover { background:none; }
@media (max-width:760px){
  .child-goal-row { grid-template-columns: 1fr 70px 38px; }
  .child-goal-owner { display:none; }
  .mgp-child { grid-template-columns: 1fr 80px 36px; }
}


/* ════ Zagęszczenie interfejsu (mniejsze, bardziej biznesowe) ════ */
body { zoom: 0.9; }

/* ════ Zwijana instrukcja ════ */
.instruction-panel { background:#eaf4ff; border:1px solid var(--line); border-radius:14px; margin-bottom:18px; overflow:hidden; }
.instruction-toggle { width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; background:none; border:none; padding:14px 18px; cursor:pointer; font-weight:700; font-size:15px; color:var(--accent-dark); text-align:left; }
.instruction-caret { transition:transform .25s ease; flex-shrink:0; }
.instruction-toggle.collapsed .instruction-caret { transform:rotate(-90deg); }
.instruction-body { max-height:600px; overflow:hidden; transition:max-height .3s ease, opacity .25s ease, padding .25s ease; padding:0 18px 16px; opacity:1; font-size:13.5px; line-height:1.6; color:var(--ink); }
.instruction-body.collapsed { max-height:0; opacity:0; padding-top:0; padding-bottom:0; }
.instruction-body p { margin:0 0 10px; }
.instruction-body ol { margin:0; padding-left:20px; display:flex; flex-direction:column; gap:5px; }

/* ════ Rozwijany dropdown tagów ════ */
.tag-select { position:relative; }
.tag-select-toggle { width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--surface); cursor:pointer; font-size:14px; color:var(--ink); }
.tag-select-toggle:hover { border-color:var(--accent); }
.tag-select-caret { transition:transform .25s ease; color:var(--muted); }
.tag-select-toggle[aria-expanded="true"] .tag-select-caret { transform:rotate(180deg); }
.tag-select-panel { display:none; flex-wrap:wrap; gap:7px; margin-top:8px; padding:12px; border:1px solid var(--line); border-radius:10px; background:var(--surface); box-shadow:var(--shadow); max-height:230px; overflow:auto; }
.tag-select-panel.open { display:flex; }
.tag-option { padding:6px 13px; border-radius:999px; border:1px solid var(--line); background:var(--surface-muted); cursor:pointer; font-size:13px; color:var(--ink); }
.tag-option:hover { border-color:var(--accent); }
.tag-option.selected { background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600; }
.tag-select-empty { font-size:13px; color:var(--muted); }
.tag-select-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.tag-select-chips .tag-chip { display:inline-flex; align-items:center; gap:6px; padding:4px 6px 4px 11px; border-radius:999px; background:var(--accent-soft); color:var(--accent-dark); font-size:12.5px; font-weight:600; }
.tag-select-chips .tag-chip button { border:none; background:rgba(0,0,0,.08); color:inherit; width:16px; height:16px; border-radius:50%; cursor:pointer; line-height:1; font-size:13px; display:flex; align-items:center; justify-content:center; }
.tag-select-chips .tag-chip button:hover { background:rgba(0,0,0,.18); }


/* ════ Dashboard: cele główne — wizualnie (donuty + statystyki) ════ */
.main-goals-progress { display:block; }
.mgp-overview { display:flex; align-items:center; gap:24px; padding:4px 2px 18px; margin-bottom:6px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.mgp-overview-donut { display:flex; flex-direction:column; align-items:center; gap:6px; }
.mgp-overview-label { font-size:12px; color:var(--muted); font-weight:600; max-width:120px; text-align:center; line-height:1.3; }
.mgp-overview-stats { display:grid; grid-template-columns:repeat(4,minmax(86px,1fr)); gap:12px; flex:1; min-width:280px; }
.mgp-stat { background:var(--surface-muted); border-radius:12px; padding:12px 14px; display:flex; flex-direction:column; gap:3px; }
.mgp-stat strong { font-size:26px; color:var(--accent-dark); line-height:1; }
.mgp-stat span { font-size:11.5px; color:var(--muted); }
.mgp-stat-done strong { color:var(--success); }
.mgp-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:14px; margin-top:16px; }
.mgp-card { border:1px solid var(--line); border-radius:14px; padding:14px; background:var(--surface); box-shadow:0 2px 10px rgba(20,121,201,.05); }
.mgp-card-top { display:flex; align-items:center; gap:14px; cursor:pointer; margin-bottom:11px; }
.mgp-card-info { min-width:0; }
.mgp-card-title { display:block; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mgp-card-meta { font-size:12px; color:var(--muted); }
.mgp-donut { flex-shrink:0; }
.mgp-donut-text { font-weight:700; }
.mgp-bar { display:block; height:9px; background:var(--surface-muted); border-radius:999px; overflow:hidden; }
.mgp-bar > span { display:block; height:100%; border-radius:999px; background:var(--accent); transition:width .4s ease; }
.mgp-bar-sm { height:6px; }
.mgp-children { margin-top:11px; padding-top:9px; border-top:1px dashed var(--line); display:flex; flex-direction:column; gap:6px; }
.mgp-child { display:grid; grid-template-columns:1fr 120px 40px; align-items:center; gap:8px; padding:4px 6px; border-radius:6px; cursor:pointer; }
.mgp-child:hover { background:var(--surface-muted); }
.mgp-child-title { font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mgp-pct { font-size:12px; font-weight:700; color:var(--ink); text-align:right; }
.mgp-empty { display:block; color:var(--muted); font-size:12.5px; cursor:default; }
.mgp-empty:hover { background:none; }
@media (max-width:760px){ .mgp-child { grid-template-columns:1fr 70px 36px; } .mgp-overview-stats { grid-template-columns:repeat(2,1fr); } .mgp-grid { grid-template-columns:1fr; } }


/* ════ Mapa celów (graf) ════ */
.goal-graph-block { margin-bottom:28px; overflow-x:auto; padding-bottom:4px; }
.goal-graph-title { font-weight:700; color:var(--accent-dark); margin-bottom:14px; font-size:15px; }
.goal-graph { position:relative; }
.goal-graph-links { position:absolute; left:0; top:0; pointer-events:none; }
.goal-graph-node { position:absolute; display:flex; align-items:center; gap:11px; padding:9px 13px; background:var(--surface); border:1.5px solid var(--line); border-left-width:5px; border-radius:13px; box-shadow:0 3px 12px rgba(20,121,201,.08); cursor:pointer; box-sizing:border-box; transition:transform .15s ease, box-shadow .15s ease; }
.goal-graph-node:hover { transform:translateY(-2px); box-shadow:0 6px 18px rgba(20,121,201,.16); }
.goal-graph-node.is-main { background:var(--surface-muted); border-color:var(--accent); }
.goal-graph-node-info { min-width:0; }
.goal-graph-node-info strong { display:block; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.goal-graph-node-info span { font-size:11.5px; color:var(--muted); }
.goal-graph-empty { position:absolute; font-size:13px; color:var(--muted); white-space:nowrap; }

/* większe, wyeksponowane donuty na dashboardzie */
.mgp-overview-donut .mgp-donut { filter: drop-shadow(0 4px 10px rgba(20,121,201,.18)); }
.mgp-card-top .mgp-donut { filter: drop-shadow(0 3px 8px rgba(20,121,201,.14)); }
.mgp-grid { grid-template-columns:repeat(auto-fill,minmax(360px,1fr)); }


/* ════ Plakietka typu celu (główny / częściowy) ════ */
.badge.badge-main-goal { background:var(--accent-soft); color:var(--accent-dark); font-weight:600; }
.badge.badge-partial-goal { background:var(--surface-muted); color:var(--muted); }


/* ════ Mapa celów — sterowanie (filtr, kolumny, zwijanie) ════ */
.goal-map-controls { display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-bottom:16px; }
.goal-map-filter { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); font-weight:600; }
.goal-map-filter select { min-width:240px; padding:8px 10px; border:1px solid var(--line); border-radius:9px; background:var(--surface); font-size:14px; color:var(--ink); }
.goal-map-actions { display:flex; align-items:center; gap:8px; margin-left:auto; flex-wrap:wrap; }
.goal-map-cols { display:inline-flex; gap:4px; }
.goal-map-actions .small-button.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.goal-maps-grid { display:grid; gap:16px; align-items:start; }
.goal-maps-grid.cols-1 { grid-template-columns:1fr; }
.goal-maps-grid.cols-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:1200px){ .goal-maps-grid.cols-2 { grid-template-columns:1fr; } }
.goal-map-card { border:1px solid var(--line); border-radius:14px; background:var(--surface); overflow:hidden; box-shadow:0 2px 10px rgba(20,121,201,.05); }
.goal-map-head { width:100%; display:flex; align-items:center; gap:12px; padding:12px 16px; background:var(--surface-muted); border:none; cursor:pointer; text-align:left; }
.goal-map-head:hover { background:var(--accent-soft); }
.goal-map-head-title { font-weight:700; color:var(--accent-dark); font-size:14.5px; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.goal-map-head-meta { font-size:12px; color:var(--muted); white-space:nowrap; }
.goal-map-head-pct { font-weight:700; font-size:14px; }
.goal-map-caret { color:var(--muted); transition:transform .2s ease; flex-shrink:0; }
.goal-map-card.collapsed .goal-map-caret { transform:rotate(-90deg); }
.goal-map-card.collapsed .goal-map-body { display:none; }
.goal-map-body { padding:20px 16px; overflow-x:auto; }


/* ════ Podcele: badge, zwijane listy w zakładkach, 3-poziomowy graf ════ */
.badge.badge-sub-goal { background:var(--warning-soft); color:var(--warning); }
.goal-list-cards { display:flex; flex-direction:column; gap:14px; }
.goal-list-body { padding:16px; }
.goal-list-body > .goal-card { border:1px solid var(--line); box-shadow:none; margin:0; }
.goal-graph-node.is-partial { background:var(--surface); }
.goal-graph-node.is-sub { background:var(--surface); border-style:dashed; }

/* Plakietka rodzica (cel główny/częściowy nadrzędny) */
.badge.badge-parent-ref { background:transparent; border:1px solid var(--line); color:var(--muted); font-weight:500; }


/* ════ Konta + cele GLOBALNE ════ */
.badge.badge-global { background:linear-gradient(135deg,#E8735A,#F4A26B); color:#fff; font-weight:700; border:none; box-shadow:0 1px 4px rgba(232,115,90,.4); }
.person-form-grid { display:grid; grid-template-columns: 2fr 1.2fr 1.2fr auto; gap:12px; align-items:end; }
.person-form-grid label { display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--muted); font-weight:600; }
.person-form-grid input { padding:9px 11px; border:1px solid var(--line); border-radius:9px; font-size:14px; color:var(--ink); background:var(--surface); }
.person-form-grid .primary-button { height:40px; white-space:nowrap; }
@media (max-width:760px){ .person-form-grid { grid-template-columns:1fr; } }
.accounts-list { display:flex; flex-direction:column; gap:8px; }
.account-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--surface); flex-wrap:wrap; }
.account-info { display:flex; flex-direction:column; gap:2px; }
.account-info strong { font-size:14px; }
.account-info span { font-size:12.5px; color:var(--muted); }
.account-info code { background:var(--surface-muted); padding:1px 6px; border-radius:5px; }
.account-actions { display:flex; gap:6px; flex-wrap:wrap; }
.small-button.danger { color:var(--danger); border-color:var(--danger-soft); }
.small-button.danger:hover { background:var(--danger-soft); }

/* Gwarancja: [hidden] zawsze ukrywa (nadpisuje display z .nav-tab itp.) */
[hidden] { display: none !important; }


/* Spadek efektywności — zwijane problemy */
.problem-card { position: relative; }
.problem-card-header { cursor: pointer; padding-right: 26px; }
.problem-collapse-caret { position: absolute; top: 16px; right: 16px; color: var(--muted); transition: transform .2s ease; }
.problem-card.collapsed .problem-collapse-caret { transform: rotate(-90deg); }
.problem-card.collapsed .problem-card-body { display: none; }


/* ════ Responsywność: sidebar przewijalny (nie ucina modułów przy niskim oknie) ════ */
@media (min-width: 761px) {
  .sidebar {
    height: calc(100vh / 0.9);
    max-height: calc(100vh / 0.9);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .sidebar > *:not(.sidebar-spacer) { flex-shrink: 0; }
}

/* Rejestracja/logowanie SaaS */
.login-switch { text-align:center; font-size:13px; color:var(--muted); margin:4px 0 0; }
.login-switch .link-button { font-size:13px; }


/* ════ Delikatny slide przy przełączaniu modułów (nadpisuje wcześniejsze) ════ */
@keyframes viewSlideIn {
  from { opacity: 0; transform: translateY(-24px); }
  to   { opacity: 1; transform: translateY(0); }
}
#dashboardView.active, #goalsView.active, #calendarView.active,
#peopleView.active, #knowledgeView.active, #problemsView.active {
  animation: viewSlideIn 0.3s ease-out both;
  will-change: transform, opacity;
}
/* Jeden delikatny slide całości — bez podskakiwania pojedynczych kart */
.view.active.view-enter .metric-card,
.view.active.view-enter .panel,
.view.active.view-enter .goal-card,
.view.active.view-enter .toolbar,
.view.active.view-enter .filter-pills,
.view.active.view-enter .admin-actions,
.view.active.view-enter .calendar-hero,
.view.active.view-enter .calendar-board-card {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}


/* clip podczas slide treści — bez migotania paska */
.view { overflow-x: clip; }


/* ════ Topbar: data, dzwonek, chip użytkownika (jak na wzorze) ════ */
.topbar-date { font-size: 13px; color: var(--muted); font-weight: 600; white-space: nowrap; }
.topbar-icon-btn { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:var(--surface); color:var(--muted); cursor:pointer; flex-shrink:0; }
.topbar-icon-btn:hover { color:var(--ink); border-color:var(--accent); }
.user-menu-wrap { position: relative; }
.user-chip { display:inline-flex; align-items:center; gap:9px; padding:5px 10px 5px 6px; border-radius:999px; border:1px solid var(--line); background:var(--surface); cursor:pointer; }
.user-chip:hover { border-color:var(--accent); }
.user-avatar { width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(135deg,var(--accent),var(--accent-dark)); color:#fff; font-weight:700; font-size:13px; flex-shrink:0; }
.user-chip-text { display:flex; flex-direction:column; line-height:1.15; text-align:left; }
.user-chip-text strong { font-size:13px; color:var(--ink); }
.user-chip-text span { font-size:11px; color:var(--muted); }
.user-chip-caret { color:var(--muted); }
.user-menu { position:absolute; top:calc(100% + 8px); right:0; min-width:210px; background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); padding:8px; z-index:50; }
.user-menu-email { font-size:12px; color:var(--muted); padding:6px 10px 8px; border-bottom:1px solid var(--line); margin-bottom:6px; word-break:break-all; }
.user-menu-item { display:flex; align-items:center; gap:10px; width:100%; padding:9px 10px; border:none; background:transparent; border-radius:8px; cursor:pointer; font-size:14px; color:var(--ink); text-align:left; }
.user-menu-item:hover { background:var(--surface-muted); }
.session-pill { display:none; }
@media (max-width:760px) { .topbar-date, .topbar-icon-btn, .user-chip-text, .user-chip-caret { display:none; } .user-chip { padding:4px; } }


/* ════ Lekko szary topbar + sidebar — delikatne wyróżnienie od białej treści ════ */
.topbar {
  background: #f1f2f4;
  border-bottom: 1px solid #e4e6ea;
}
.sidebar,
body[data-theme="milestone"] .sidebar {
  background: #f1f2f4;
}
/* Pełna wysokość z uwzględnieniem body{zoom:0.9} — bez białej dziury na dole */
body[data-theme="milestone"] .sidebar {
  height: calc(100vh / 0.9);
  min-height: calc(100vh / 0.9);
}


/* topbar szary — wyższa specyficzność niż --cr-topbar-bg */
body[data-theme="milestone"] .topbar { background: #f1f2f4; border-bottom: 1px solid #e4e6ea; }


/* ════════════════════════════════════════
   Stoper czasu pracy + Spadek Efektywności + Powiadomienia o terminach
   ════════════════════════════════════════ */

/* ── Stoper na karcie celu ── */
.track-widget {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-muted, #f4f5f7);
}
.track-widget.is-running {
  border-color: var(--accent);
  background: var(--accent-soft, rgba(232,115,90,0.10));
}
.track-widget.is-done { opacity: 0.85; }
.track-widget.track-aggregate { background: transparent; border-style: dashed; }
.track-main { display: flex; flex-direction: column; gap: 2px; }
.track-time {
  font-weight: 700;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.3px;
}
.track-widget.is-running .track-time { color: var(--accent-dark, var(--accent)); }
.track-state { font-size: 0.78rem; color: var(--muted); }
.track-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.track-btn { white-space: nowrap; }
.track-btn.track-start { background: var(--accent); color: #fff; border-color: var(--accent); }
.track-btn.track-start:hover { filter: brightness(0.96); }
.track-widget.is-running .track-state::before {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: trackPulse 1.1s ease-in-out infinite;
  vertical-align: middle;
}
@keyframes trackPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }

/* ── Dzwonek: badge + menu powiadomień ── */
.notif-wrap { position: relative; display: inline-flex; }
.notif-badge {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 17px; height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: #e53935;
  color: #fff;
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--surface, #fff);
}
.notif-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 320px;
  max-width: 86vw;
  background: var(--surface, #fff);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow, 0 18px 40px rgba(0,0,0,0.16));
  z-index: 60;
  overflow: hidden;
}
.notif-menu-head {
  padding: 12px 16px;
  font-weight: 700;
  font-size: 0.9rem;
  border-bottom: 1px solid var(--line);
}
.notif-menu-list { max-height: 340px; overflow-y: auto; }
.notif-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 11px 16px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--line);
  text-align: left;
  cursor: pointer;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--surface-muted, #f4f5f7); }
.notif-dot {
  flex: 0 0 auto;
  width: 9px; height: 9px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--warning, #ff9800);
}
.notif-item.overdue .notif-dot { background: #e53935; }
.notif-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.notif-body strong { font-size: 0.88rem; }
.notif-body span { font-size: 0.76rem; color: var(--muted); }
.notif-item.overdue .notif-body span { color: #e53935; }
.notif-empty { padding: 22px 16px; text-align: center; color: var(--muted); font-size: 0.85rem; }

/* ── Moduł Spadek Efektywności ── */
.eff-intro { margin-bottom: 18px; }
.eff-sub { color: var(--muted); margin-top: 6px; max-width: 70ch; }
.eff-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.eff-stat-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  background: var(--surface, #fff);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.eff-stat-label { font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; }
.eff-stat-card strong { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.eff-section { margin-bottom: 18px; }
.eff-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 24px; padding: 0 7px;
  border-radius: 12px; background: var(--accent); color: #fff;
  font-size: 0.8rem; font-weight: 700;
}
.eff-review-list { display: flex; flex-direction: column; gap: 12px; }
.eff-review-item {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface, #fff);
}
.eff-review-item.is-late { border-left: 3px solid #e53935; }
.eff-review-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.eff-review-top h4 { margin: 0; font-size: 1rem; }
.eff-ctx { margin: 3px 0 0; font-size: 0.78rem; color: var(--muted); }
.eff-badge {
  flex: 0 0 auto;
  padding: 4px 10px; border-radius: 999px;
  font-size: 0.74rem; font-weight: 600; white-space: nowrap;
}
.eff-badge.ok { background: rgba(40,184,106,0.15); color: #1c7a47; }
.eff-badge.bad { background: rgba(229,57,53,0.14); color: #c62828; }
.eff-badge.pending { background: rgba(255,152,0,0.16); color: #b26a00; }
.eff-review-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.eff-chip {
  padding: 4px 9px; border-radius: 8px;
  background: var(--surface-muted, #f4f5f7);
  font-size: 0.76rem; color: var(--ink, #1d1d1f);
}
.eff-chip.strong { font-weight: 700; }
.eff-chip.late { background: rgba(229,57,53,0.14); color: #c62828; font-weight: 600; }
.eff-desc { margin: 10px 0 0; font-size: 0.85rem; color: var(--muted); }
.eff-review-note { margin-top: 8px; font-size: 0.8rem; color: #b26a00; }
.eff-review-actions { display: flex; gap: 8px; margin-top: 12px; }
.eff-bottleneck-list, .eff-bymain-list { display: flex; flex-direction: column; gap: 12px; }
.eff-bar-row { display: flex; flex-direction: column; gap: 5px; }
.eff-bar-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 0.86rem; }
.eff-bar-head small { color: var(--muted); font-weight: 400; }
.eff-bar-head strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
.eff-bar-track { height: 9px; border-radius: 6px; background: var(--surface-muted, #f4f5f7); overflow: hidden; }
.eff-bar-fill { height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--accent), var(--accent-dark, var(--accent))); }
.eff-bar-fill.running { background: linear-gradient(90deg, #28b86a, #1c7a47); }
.eff-empty { padding: 18px; text-align: center; color: var(--muted); font-size: 0.85rem; }

/* ── Spadek Efektywności: pasek filtrów + zwijane grupy ── */
.eff-filter-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 18px; }
.eff-search {
  flex: 1 1 220px; min-width: 160px;
  padding: 9px 13px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface, #fff); font-size: 0.88rem;
}
.eff-select {
  padding: 9px 12px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface, #fff); font-size: 0.84rem;
  max-width: 220px; cursor: pointer;
}
.eff-group {
  border: 1px solid var(--line); border-radius: 12px;
  overflow: hidden; background: var(--surface, #fff);
}
.eff-group-head {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 12px 16px;
  background: var(--surface-muted, #f4f5f7);
  border: none; cursor: pointer; text-align: left;
  font-size: 0.92rem; color: inherit;
}
.eff-group-head:hover { filter: brightness(0.98); }
.eff-group-caret { transition: transform 0.18s ease; color: var(--muted); font-size: 0.8rem; }
.eff-group:not(.collapsed) .eff-group-caret { transform: rotate(90deg); }
.eff-group-title { font-weight: 700; }
.eff-group-meta { margin-left: auto; color: var(--muted); font-size: 0.8rem; white-space: nowrap; }
.eff-group-body { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; }
.eff-group.collapsed .eff-group-body { display: none; }