@font-face {
  font-family: "Bariol";
  src: local("Bariol"), local("Bariol Regular");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --dark-blue: #1F2A44;
  --magenta: #B52555;
  --cyan: #0077CB;
  --green: #00A499;
  --ink: #1F2A44;
  --paper: #f3f1ec;
  --panel: #e8edf3;
  --panel-2: #dde6f0;
  --border: #b8c8d9;
  --muted: #445a79;
  --card-bg: #edf2f7;
  --card-bg-soft: #e3ebf4;
  --card-text: #1F2A44;
  --input-bg: #f7f9fc;
  --link: #005f9f;
  --indented-nav-top: 156px;
  --header-nav-gap: 8px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Bariol", "Avenir Next", "Segoe UI", sans-serif;
  color: var(--ink);
  background: radial-gradient(circle at 10% 10%, #162036 0, #0f1522 50%, #0b111b 100%);
}

body[data-theme="dark"] {
  --ink: #ffffff;
  --paper: #1F2A44;
  --panel: #1a2740;
  --panel-2: #243455;
  --border: #3a5683;
  --muted: #d6e3f5;
  --card-bg: #1a2740;
  --card-bg-soft: #22365a;
  --card-text: #ffffff;
  --input-bg: #203458;
  --link: #8ccaff;
  background: radial-gradient(circle at 10% 10%, #162036 0, #0f1522 50%, #0b111b 100%);
}

header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 2px;
  padding: 16px 20px 10px;
}

.hero-copy {
  grid-column: 2;
  text-align: center;
  background: linear-gradient(130deg, #eef3f8, #dde7f1);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 10px 16px;
  min-width: 420px;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255,255,255,0.16);
}
body[data-theme="dark"] .hero-copy {
  background: linear-gradient(130deg, #243a5f, #1F2A44);
}

.brand-image {
  display: block;
  width: 250px;
  max-width: 95%;
  height: auto;
  margin: 0 auto 6px;
  cursor: pointer;
}

.brand-subtitle {
  margin: 4px 0 4px;
  color: #2f4f79;
  font-weight: 700;
}
body[data-theme="dark"] .brand-subtitle { color: #d9eaff; }

.greeting-text {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  white-space: nowrap;
}

header p { margin: 4px 0 0; color: #2d4a72; }
body[data-theme="dark"] header p { color: #deebff; }
a { color: var(--link); font-weight: 700; }

.header-actions {
  grid-column: 3;
  justify-self: end;
  display: grid;
  gap: 8px;
  justify-items: end;
}

body.client-app header {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px;
  padding: 12px 20px 0;
}

body.client-app .hero-copy {
  grid-column: 1;
  width: 100%;
  max-width: none;
  min-width: 0;
  text-align: left;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 2px;
  padding: 6px 8px 3px;
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  position: relative;
  z-index: 1000;
  overflow: visible;
}

body.client-app .hero-copy::after {
  display: none;
}

body.client-app .brand-image {
  width: min(280px, 100%);
  height: auto;
  max-width: 100%;
  max-height: none;
  object-fit: contain;
  object-position: left center;
  margin: 0;
  opacity: 1;
  mix-blend-mode: normal;
  filter: none;
  display: block;
}

body.client-app[data-theme="dark"] .brand-image {
  mix-blend-mode: normal;
  opacity: 1;
}

body.client-app .hero-text {
  position: relative;
  z-index: 1;
  color: #ffffff;
  margin-left: -59px;
}

/* Explicit header overrides for desktop to prevent later rule collisions */
@media (min-width: 981px) {
  body > header > div.hero-copy {
    z-index: 1000;
    padding-bottom: 3px;
  }

  body > header > div.hero-copy .hero-text {
    margin-left: -80px;
    margin-top: 20px;
  }

  body > header > section.global-nav-row {
    margin-bottom: 6px;
  }
}

body.client-app .brand-subtitle {
  margin: 0 0 6px;
  font-size: 1.08rem;
}

body.client-app .greeting-text {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0.2px;
  color: #ffffff;
}

body.admin-app .greeting-text {
  color: #ffffff;
}

body.admin-app .brand-subtitle {
  color: var(--green);
}

#clientOpenContext {
  color: #B52555;
  font-weight: 700;
}

body.client-app .header-actions {
  grid-column: 2;
  align-self: center;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

body.client-app .header-actions .theme-toggle,
body.client-app .header-actions .clean-time-pill,
body.client-app .header-actions .strides-pill,
body.client-app .header-actions .profile-menu-btn {
  height: 38px;
  min-height: 38px;
  box-sizing: border-box;
}

body.client-app .header-actions .theme-toggle,
body.client-app .header-actions .profile-menu-btn {
  padding: 0 12px;
}

body.admin-app .header-actions .small-btn {
  height: 38px;
  min-height: 38px;
  box-sizing: border-box;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

body.admin-app .header-actions .admin-header-profile-btn {
  gap: 8px;
  padding-left: 8px;
  padding-right: 12px;
}

body.admin-app .header-actions .admin-header-profile-btn .profile-avatar-thumb {
  width: 24px;
  height: 24px;
}

body.admin-app .header-actions .small-btn .tag {
  margin-left: 2px;
}

body.admin-app .header-actions .admin-global-search {
  height: 38px;
  min-height: 38px;
  box-sizing: border-box;
  padding: 0 12px;
  width: 100%;
}

.admin-search-wrap {
  position: relative;
  flex: 1 1 280px;
}

.admin-client-search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 1400;
  margin: 0;
  padding: 6px;
  list-style: none;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card-bg);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
  max-height: 320px;
  overflow-y: auto;
}

.admin-client-search-results li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
}

.admin-client-search-results li.active,
.admin-client-search-results li:hover {
  background: linear-gradient(120deg, rgba(181, 37, 85, 0.22), rgba(0, 119, 203, 0.22), rgba(0, 164, 153, 0.2));
}

body.client-app .header-actions .clean-time-pill,
body.client-app .header-actions .strides-pill {
  padding-top: 0;
  padding-bottom: 0;
}

body.client-app .header-actions p {
  flex-basis: 100%;
  margin: 2px 0 0;
  text-align: right;
}

.menu-view-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.home-menu-view-switch {
  justify-content: flex-end;
  margin: 0;
  margin-left: auto;
  flex: 0 0 auto;
}

.menu-view-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #dce9ff;
  font-size: 0.82rem;
  font-weight: 700;
}

.menu-view-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  min-width: 16px;
  font-size: 0.78rem;
  line-height: 1;
  opacity: 0.95;
}

.menu-view-toggle-label {
  white-space: nowrap;
}

.menu-view-switch .switch {
  width: 44px;
  height: 24px;
}

.menu-view-switch .switch .slider::before {
  width: 18px;
  height: 18px;
}

.menu-view-switch .switch input:checked + .slider {
  background: linear-gradient(120deg, #B52555, #0077CB, #00A499);
}

.menu-view-switch .switch input:checked + .slider::before {
  transform: translateX(20px);
}

.menu-view-compact-toggle {
  display: none;
}

body[data-site-view="mobile"] .menu-view-compact-toggle {
  display: inline-flex;
}

.risk-pill {
  padding: 9px 14px;
  border-radius: 999px;
  color: white;
  font-weight: 700;
  background: linear-gradient(130deg, var(--cyan), var(--magenta));
}

.tag.risk-tag {
  color: #fff;
  border: none;
}

.tag.risk-tag.risk-low {
  background: linear-gradient(135deg, #00a499, #22c55e);
}

.tag.risk-tag.risk-medium {
  background: linear-gradient(135deg, #d97706, #f59e0b);
}

.tag.risk-tag.risk-high {
  background: linear-gradient(135deg, #b52555, #ef4444);
}

.tag.risk-tag.risk-critical {
  background: linear-gradient(135deg, #7f1d1d, #b91c1c);
}

.clean-time-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  background: linear-gradient(135deg, #0077CB, #00A499);
}

.clean-time-hover {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.strides-hover {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.clean-time-hover-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(360px, 88vw);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
  background: var(--card-bg);
  color: var(--card-text);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  z-index: 1400;
  transition: opacity 150ms ease, transform 150ms ease;
}

.strides-hover-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(320px, 86vw);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px;
  background: var(--card-bg);
  color: var(--card-text);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  z-index: 1400;
  transition: opacity 150ms ease, transform 150ms ease;
}

.clean-time-hover:hover .clean-time-hover-panel,
.clean-time-hover:focus-within .clean-time-hover-panel,
.clean-time-hover.open .clean-time-hover-panel {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.strides-hover:hover .strides-hover-panel,
.strides-hover:focus-within .strides-hover-panel,
.strides-hover.open .strides-hover-panel {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.clean-time-hover-panel p {
  margin: 0;
  line-height: 1.4;
}

.strides-hover-panel p {
  margin: 0;
  line-height: 1.35;
  font-size: 0.84rem;
}

.strides-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  border: 1px solid transparent;
}

.strides-pill .strides-icon {
  font-size: 1.05rem;
}

.strides-pill .strides-label {
  font-weight: 800;
}

.strides-pill.level-base {
  background: linear-gradient(135deg, #5d6e8f, #7f93b8);
  border-color: rgba(255, 255, 255, 0.22);
}

.strides-pill.level-step1 {
  background: linear-gradient(135deg, #0077CB, #00A499);
  border-color: rgba(255, 255, 255, 0.3);
}

.strides-pill.level-step2 {
  background: linear-gradient(135deg, #2b7bc0, #1ea1bc);
  border-color: rgba(255, 255, 255, 0.3);
}

.strides-pill.level-step3 {
  background: linear-gradient(135deg, #576fb7, #2f8aca);
  border-color: rgba(255, 255, 255, 0.3);
}

.strides-pill.level-step4 {
  background: linear-gradient(135deg, #7d68ad, #3d84c1);
  border-color: rgba(255, 255, 255, 0.3);
}

.strides-pill.level-step5 {
  background: linear-gradient(135deg, #A95787, #2f8ca8);
  border-color: rgba(255, 255, 255, 0.32);
}

.strides-pill.level-step6 {
  background: linear-gradient(135deg, #B52555, #0077CB);
  border-color: rgba(255, 255, 255, 0.34);
}

.strides-pill.level-step7 {
  background: linear-gradient(135deg, #B52555, #0077CB, #00A499);
  border-color: rgba(255, 255, 255, 0.36);
}

.strides-panel-title {
  margin-bottom: 4px;
  font-weight: 800;
  font-size: 0.9rem;
}

.strides-summary-line {
  font-weight: 700;
}

.strides-progress-track {
  margin: 8px 0 10px;
  width: 100%;
  height: 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(31, 42, 68, 0.12);
  overflow: hidden;
}

.strides-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #B52555, #0077CB, #00A499);
  transition: width 220ms ease;
}

.strides-level-map {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.strides-level-chip {
  border-radius: 999px;
  border: 1px solid var(--border);
  padding: 3px 7px;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;
}

.strides-level-chip.current {
  border-color: rgba(0, 119, 203, 0.55);
  box-shadow: 0 0 0 1px rgba(0, 119, 203, 0.18) inset;
}

.clean-time-panel-title {
  margin-bottom: 2px;
}

.clean-time-next-line {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-weight: 700;
}

.clean-time-progress-track {
  margin: 8px 0;
  width: 100%;
  height: 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(31, 42, 68, 0.12);
  overflow: hidden;
}

.clean-time-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #B52555, #0077CB, #00A499);
  width: 0%;
  transition: width 220ms ease;
}

.clean-time-days {
  font-weight: 800;
}

.clean-time-milestone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 2px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 800;
  background: transparent;
  border: none;
}

.clean-time-trophy {
  font-size: 1.08rem;
  line-height: 1;
  opacity: 0.95;
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.18));
}

.clean-time-pill.milestone-base .clean-time-milestone {
  background: transparent;
}

.clean-time-pill.milestone-bronze .clean-time-milestone {
  background: transparent;
  border: none;
}

.clean-time-pill.milestone-silver .clean-time-milestone {
  background: transparent;
  border: none;
}

.clean-time-pill.milestone-gold .clean-time-milestone {
  background: transparent;
  border: none;
}

.theme-toggle {
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--ink);
}

.profile-menu {
  position: relative;
  padding-bottom: 6px;
  margin-bottom: -6px;
}

.profile-menu-btn {
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--ink);
  border-radius: 999px;
  padding: 6px 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-weight: 700;
}

.profile-avatar-thumb {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid var(--border);
  background: #d6e1ef;
}

.profile-dropdown {
  position: absolute;
  right: 0;
  top: 100%;
  width: min(430px, 92vw);
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card-bg);
  padding: 8px;
  box-shadow: 0 14px 34px rgba(0,0,0,0.3);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 180ms ease, transform 180ms ease;
  z-index: 1500;
}

.profile-menu:hover .profile-dropdown,
.profile-menu:focus-within .profile-dropdown,
.profile-menu.open .profile-dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.profile-directory {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 128px;
  gap: 6px;
}

.profile-directory-nav {
  order: 2;
  border-left: 1px solid var(--border);
  padding-left: 6px;
  display: grid;
  gap: 6px;
  align-content: start;
}

.profile-directory-nav .small-btn {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.profile-directory-nav .small-btn:hover,
.profile-directory-nav .small-btn:focus-visible {
  background: linear-gradient(135deg, rgba(0, 119, 203, 0.22), rgba(0, 164, 153, 0.2));
  border-color: rgba(0, 119, 203, 0.55);
  transform: translateX(2px);
}

.profile-directory-panel-wrap {
  order: 1;
  min-height: 172px;
  padding-right: 1px;
  border-right: 1px solid rgba(0, 119, 203, 0.18);
  padding-top: 1px;
}

.profile-tab-panel input,
.profile-tab-panel select,
.profile-tab-panel textarea,
.profile-tab-panel button,
.profile-tab-panel .small-btn {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.profile-dropdown-footer {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
}

.profile-logout-btn {
  min-width: 96px;
}

.profile-tab-panel { display: none; }
.profile-tab-panel.active {
  display: grid;
  gap: 6px;
  animation: profilePanelFade 130ms ease;
}

@keyframes profilePanelFade {
  from { opacity: 0; transform: translateX(4px); }
  to { opacity: 1; transform: translateX(0); }
}

.profile-form {
  display: grid;
  gap: 6px;
}

.profile-setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.translate-host {
  position: fixed;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.switch {
  position: relative;
  width: 44px;
  height: 24px;
  display: inline-block;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch .slider {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(90, 115, 150, 0.45);
  transition: all 180ms ease;
}

.switch .slider::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  transition: transform 180ms ease;
}

.switch input:checked + .slider {
  background: linear-gradient(135deg, #0077CB, #00A499);
}

.switch input:checked + .slider::before {
  transform: translateX(20px);
}

body.compact-mode .card {
  padding: 12px;
  margin-bottom: 10px;
}

body.compact-mode {
  font-size: 14px;
}

body.compact-mode main {
  padding: 0 14px 16px;
}

body.compact-mode .layout {
  gap: 10px;
  margin-bottom: 10px;
}

body.compact-mode h2 {
  font-size: 1.15rem;
  margin-bottom: 8px;
}

body.compact-mode h3 {
  font-size: 1rem;
  margin-bottom: 8px;
}

body.compact-mode .tab-nav {
  gap: 4px;
}

body.compact-mode .tab-btn {
  font-size: 0.72rem;
  flex: 1 1 88px;
  width: 100%;
  height: 32px;
  padding: 0 6px;
  border-radius: 8px;
}

body.compact-mode input,
body.compact-mode textarea,
body.compact-mode select,
body.compact-mode button {
  font-size: 0.88rem;
  padding: 7px 8px;
  border-radius: 8px;
}

body.compact-mode .small-btn {
  font-size: 0.78rem;
  padding: 5px 8px;
  border-radius: 8px;
}

body.compact-mode.client-app .header-actions .theme-toggle,
body.compact-mode.client-app .header-actions .clean-time-pill,
body.compact-mode.client-app .header-actions .strides-pill,
body.compact-mode.client-app .header-actions .profile-menu-btn {
  height: 34px;
  min-height: 34px;
}

body.compact-mode .meta,
body.compact-mode .muted {
  font-size: 0.82rem;
}

body.compact-mode .tag {
  font-size: 0.72rem;
  padding: 2px 7px;
}

body.compact-mode .advice-box {
  padding: 9px;
  border-radius: 10px;
}

body.compact-mode .list li {
  padding: 8px;
  margin-bottom: 6px;
  border-radius: 9px;
}

body.compact-mode .metric-grid {
  gap: 8px;
}

body.compact-mode .metric-grid article {
  padding: 9px 10px;
  min-height: 72px;
}

body.compact-mode .appointment-mini,
body.compact-mode .calendar-mini,
body.compact-mode .calendar-item {
  padding: 8px;
  border-radius: 10px;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.04); }
  100% { transform: scale(1); }
}

.pulse-alert { animation: pulse 1.5s ease-in-out infinite; }

.global-nav-row {
  grid-column: 1 / -1;
  width: 100%;
  padding: 0 20px;
  margin: 0 0 var(--header-nav-gap);
}

.global-subtab-row {
  grid-column: 1 / -1;
  width: 100%;
  padding: 0 20px;
  margin: -4px 0 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.global-subtab-row select {
  min-width: 260px;
  width: auto;
}

.global-nav-inline {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.global-nav-inline .tab-nav {
  flex: 1 1 auto;
  min-width: 0;
}

.global-nav-inline .small-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

@media (max-width: 980px) {
  .global-nav-inline {
    flex-wrap: wrap;
  }

  .global-nav-inline .small-btn {
    width: 100%;
  }
}

body.client-app .global-nav-row .tab-nav,
body.client-app .global-nav-row .compact-tab-nav {
  top: 0;
}

main {
  width: 100%;
  margin: 0;
  padding: 0 20px 24px;
}

body[data-menu-view="indented"] main {
  padding-left: 232px;
}

body[data-menu-view="indented"] .tab-nav,
body[data-menu-view="indented"] #compactTabNav {
  display: none !important;
}

body[data-menu-view="indented"] .tab-nav > .tab-btn,
body[data-menu-view="indented"] .tab-nav > .tab-hover-menu,
body[data-menu-view="compact"] .tab-nav > .tab-btn,
body[data-menu-view="compact"] .tab-nav > .tab-hover-menu {
  display: none !important;
}

.menu-view-content-anchor {
  display: none;
  width: 100%;
  margin: 0 0 8px;
}

body[data-menu-view="indented"] .menu-view-content-anchor {
  display: flex;
  justify-content: flex-end;
  margin: -2px 0 6px;
  position: sticky;
  top: 10px;
  z-index: 1200;
}

body.client-app[data-site-view="tablet"] {
  padding: 0 10px 16px;
}

body.client-app[data-site-view="tablet"] header,
body.client-app[data-site-view="tablet"] main,
body.client-app[data-site-view="tablet"] .global-nav-row {
  width: min(980px, 100%);
  margin-left: auto;
  margin-right: auto;
}

body.client-app[data-site-view="tablet"] main {
  border-radius: 20px;
}

body.client-app[data-site-view="tablet"][data-menu-view="indented"] main {
  padding-left: 12px;
}

body.client-app[data-site-view="tablet"] .tab-btn {
  flex: 0 0 auto;
  width: auto;
  min-width: 104px;
  height: 34px;
  padding: 0 6px;
  font-size: 0.72rem;
  border-radius: 9px;
}

body.client-app[data-site-view="tablet"] .header-actions .theme-toggle,
body.client-app[data-site-view="tablet"] .header-actions .clean-time-pill,
body.client-app[data-site-view="tablet"] .header-actions .strides-pill,
body.client-app[data-site-view="tablet"] .header-actions .profile-menu-btn {
  height: 34px;
  min-height: 34px;
}

body.client-app[data-site-view="tablet"] .brand-image {
  width: min(220px, 100%);
}

body.client-app[data-site-view="tablet"] .greeting-text {
  font-size: 1.45rem;
  line-height: 1.08;
}

body.client-app[data-site-view="mobile"] {
  padding: 10px 0 20px;
}

body.client-app[data-site-view="mobile"] header,
body.client-app[data-site-view="mobile"] main,
body.client-app[data-site-view="mobile"] .global-nav-row {
  width: min(100%, calc(100vw - 12px));
  margin-left: auto;
  margin-right: auto;
}

body.client-app[data-site-view="mobile"] header {
  border: 1px solid rgba(62, 89, 129, 0.55);
  border-bottom: none;
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  background: rgba(12, 19, 34, 0.6);
  padding: 10px;
}

body.client-app[data-site-view="mobile"] main {
  border: 1px solid rgba(62, 89, 129, 0.55);
  border-top: none;
  border-bottom-left-radius: 24px;
  border-bottom-right-radius: 24px;
  background: rgba(12, 19, 34, 0.42);
  padding: 0 10px 16px;
  min-height: 68vh;
}

body.client-app[data-site-view="mobile"] .global-nav-row {
  padding: 0 10px;
}

body.client-app[data-site-view="mobile"] .tab-nav {
  gap: 4px;
  padding: 8px;
}

body.client-app[data-site-view="mobile"] .tab-btn {
  flex: 0 0 auto;
  width: auto;
  min-width: 92px;
  height: 32px;
  padding: 0 5px;
  font-size: 0.68rem;
}

body.client-app[data-site-view="mobile"] .header-actions .theme-toggle,
body.client-app[data-site-view="mobile"] .header-actions .clean-time-pill,
body.client-app[data-site-view="mobile"] .header-actions .strides-pill,
body.client-app[data-site-view="mobile"] .header-actions .profile-menu-btn {
  height: 32px;
  min-height: 32px;
}

body.client-app[data-site-view="mobile"] .card {
  padding: 12px;
}

body.client-app[data-site-view="mobile"] .metric-grid {
  grid-template-columns: 1fr;
}

body.client-app[data-site-view="mobile"] .two-up,
body.client-app[data-site-view="mobile"] .three-up,
body.client-app[data-site-view="mobile"] .feedback-appointments-row,
body.client-app[data-site-view="mobile"] .feedback-appointments-row.appointments-visible {
  grid-template-columns: 1fr;
}

body.client-app[data-site-view="mobile"] .greeting-text {
  font-size: 1.2rem;
}

body.client-app[data-site-view="mobile"] .brand-image {
  width: min(180px, 100%);
}

body.client-app[data-site-view="mobile"] #recoveryOnlineList {
  grid-template-columns: 1fr;
}

body.client-app[data-site-view="mobile"] .appointment-mini-top,
body.client-app[data-site-view="mobile"] .appointment-mini-title-row,
body.client-app[data-site-view="mobile"] .appointment-mini-meta,
body.client-app[data-site-view="mobile"] .appointment-countdown-row {
  flex-wrap: wrap;
}

body.client-app[data-site-view="mobile"] .calendar-grid.week,
body.client-app[data-site-view="mobile"] .calendar-grid.month {
  grid-template-columns: 1fr;
}

body.client-app[data-site-view="tablet"] .tab-nav {
  gap: 4px;
}

body.client-app[data-site-view="tablet"] .tab-btn {
  font-size: 0.72rem;
  flex: 0 0 auto;
  width: auto;
  min-width: 104px;
  height: 34px;
  padding: 0 6px;
}

body.client-app[data-site-view="tablet"] .metric-grid {
  grid-template-columns: 1fr 1fr;
}

body.client-app[data-site-view="tablet"] #recoveryOnlineList {
  grid-template-columns: 1fr;
}

.card {
  background: var(--card-bg);
  color: var(--card-text);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 14px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.2);
}

.home-blue-card {
  background: var(--card-bg);
  border-color: var(--border);
  color: var(--card-text);
}

.home-blue-card h2,
.home-blue-card h3,
.home-blue-card .muted {
  color: var(--card-text);
}

body:not([data-theme="dark"]) .home-blue-card .calendar-wrap,
body:not([data-theme="dark"]) .home-blue-card .mini-chart,
body:not([data-theme="dark"]) .home-blue-card .calendar-item,
body:not([data-theme="dark"]) .home-blue-card .calendar-cell {
  background: var(--card-bg-soft);
  color: var(--card-text);
}

body[data-theme="dark"] .home-blue-card {
  background: linear-gradient(135deg, #22385a, #1a2b46);
  border-color: #38557f;
  color: #ffffff;
}

h2, h3 { margin: 0 0 10px; color: #d8e8ff; }
h2, h3 { color: var(--card-text); }

.tab-nav {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  position: sticky;
  top: 50px;
  z-index: 1190;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  margin-bottom: 12px;
}

.tab-nav::-webkit-scrollbar {
  height: 0;
}

.tab-nav {
  scrollbar-width: none;
}

.tab-hover-menu {
  position: relative;
  flex: 0 0 auto;
  min-width: 0;
  display: inline-flex;
  align-items: center;
}

.compact-tab-nav {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  position: sticky;
  top: 50px;
  z-index: 1190;
  padding: 6px 8px;
  border-radius: 10px;
  margin-bottom: 8px;
}

.compact-tab-menu-btn {
  min-width: 124px;
  height: 32px;
}

body.compact-mode .compact-tab-nav {
  padding: 4px 6px;
  border-radius: 9px;
  margin-bottom: 6px;
}

.compact-tab-menu-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 12px;
  width: min(288px, calc(100vw - 24px));
  max-height: none;
  overflow: visible;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px;
  background: var(--card-bg);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.24);
  z-index: 1300;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
}

.compact-tab-nav.open .compact-tab-menu-dropdown {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.indented-tab-nav {
  display: none;
}

body[data-menu-view="indented"] .indented-tab-nav {
  display: block;
  position: fixed;
  top: var(--indented-nav-top);
  left: 20px;
  width: 198px;
  max-height: calc(100vh - 148px);
  overflow: auto;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  z-index: 1000;
}

body.client-app[data-menu-view="indented"] .indented-tab-nav,
body.client-app[data-site-view="tablet"][data-menu-view="indented"] .indented-tab-nav,
body.client-app[data-site-view="mobile"][data-menu-view="indented"] .indented-tab-nav {
  position: fixed;
  top: var(--indented-nav-top);
  margin-top: 0;
}

.indented-tab-menu-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.indented-tab-menu-item {
  display: flex;
  width: 100% !important;
  min-width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  height: 40px;
  min-height: 40px;
  max-height: 40px;
  border-radius: 9px;
  padding: 0 10px;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.indented-tab-menu-item .compact-tab-menu-text {
  flex: 1 1 auto;
  font-size: 0.82rem;
  font-weight: 800;
}

.indented-menu-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1;
  color: #ffffff;
  background: #B52555;
  border: 1px solid rgba(255, 255, 255, 0.35);
}

body[data-menu-view="indented"] .indented-tab-menu-item {
  background: #0077CB !important;
  border-color: rgba(0, 119, 203, 0.82) !important;
}

body[data-menu-view="indented"] .indented-tab-menu-item.active {
  background: #B52555 !important;
  border-color: rgba(181, 37, 85, 0.88) !important;
}

body[data-menu-view="indented"] .indented-tab-menu-item:hover,
body[data-menu-view="indented"] .indented-tab-menu-item:focus-visible {
  filter: brightness(1.05);
}

.indented-hover-panel {
  position: fixed;
  width: min(320px, 38vw);
  max-height: none;
  overflow: visible;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
  background: var(--card-bg);
  color: var(--card-text);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.24);
  z-index: 1350;
}

.indented-hover-panel h4 {
  margin: 0 0 8px;
  font-size: 0.92rem;
}

.indented-hover-panel .meta {
  margin: 0 0 6px;
}

.indented-hover-panel .list.compact-list {
  max-height: none;
  overflow: visible;
  margin-bottom: 8px;
}

body[data-menu-view="indented"] .card {
  padding: 10px;
}

body[data-menu-view="indented"] .layout {
  gap: 8px;
  margin-bottom: 8px;
}

body[data-menu-view="indented"] .tab-panel[data-panel="home"].active {
  gap: 10px;
}

body[data-menu-view="indented"] h2 {
  font-size: 1.22rem;
}

body[data-menu-view="indented"] h3 {
  font-size: 1.02rem;
}


body[data-menu-view="indented"] .appointment-mini,
body[data-menu-view="indented"] .calendar-mini,
body[data-menu-view="indented"] .calendar-item {
  padding: 8px;
  font-size: 0.92rem;
}

.compact-tab-menu-item {
  display: flex;
  width: 256px !important;
  max-width: 100%;
  flex: 0 0 256px;
  height: 42px;
  min-height: 42px;
  max-height: 42px;
  border-radius: 9px;
  margin-bottom: 10px;
  padding: 0 10px;
  text-align: left;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.compact-tab-menu-item:last-child {
  margin-bottom: 0;
}

.compact-tab-menu-dropdown .compact-tab-menu-item {
  margin-left: auto;
  margin-right: auto;
}

.compact-tab-menu-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  min-width: 20px;
  font-size: 0.95rem;
}

.compact-tab-menu-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
  font-size: 0.71rem;
}

.compact-tab-menu-item-color-1 {
  background: linear-gradient(120deg, #0077CB, #00A499);
}

.compact-tab-menu-item-color-2 {
  background: linear-gradient(120deg, #B52555, #7C84B8);
}

.compact-tab-menu-item-color-3 {
  background: linear-gradient(120deg, #1F2A44, #0077CB);
}

.compact-tab-menu-item-color-4 {
  background: linear-gradient(120deg, #00A499, #B52555);
}

body.compact-mode .compact-tab-menu-item {
  background: #0077CB !important;
  color: #ffffff !important;
  border-color: rgba(0, 119, 203, 0.82) !important;
}

body.compact-mode .compact-tab-menu-item.active {
  background: linear-gradient(120deg, #B52555, #0077CB, #00A499) !important;
  color: #ffffff !important;
  border-color: rgba(181, 37, 85, 0.92) !important;
}

body.compact-mode .compact-tab-menu-item:hover,
body.compact-mode .compact-tab-menu-item:focus-visible {
  filter: brightness(1.04);
}

.tab-hover-dropdown {
  position: fixed;
  top: calc(100% + 2px);
  left: 0;
  width: min(340px, 84vw);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.24);
  z-index: 1200;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
}

.tab-hover-menu:hover .tab-hover-dropdown,
.tab-hover-menu:focus-within .tab-hover-dropdown,
.tab-hover-menu.open .tab-hover-dropdown {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.tab-hover-menu.suppress-hover .tab-hover-dropdown {
  opacity: 0 !important;
  transform: translateY(-4px) !important;
  pointer-events: none !important;
}

.tab-hover-menu.tab-hover-disabled .tab-hover-dropdown,
.tab-hover-menu.tab-hover-disabled:hover .tab-hover-dropdown,
.tab-hover-menu.tab-hover-disabled:focus-within .tab-hover-dropdown,
.tab-hover-menu.tab-hover-disabled.open .tab-hover-dropdown {
  opacity: 0 !important;
  transform: translateY(-4px) !important;
  pointer-events: none !important;
}

.tab-hover-dropdown h4 {
  margin: 0 0 8px;
  font-size: 0.9rem;
}

.compact-list {
  max-height: 220px;
  overflow: auto;
  margin: 0 0 8px;
  padding: 0;
}

.compact-list li {
  margin-bottom: 6px;
  padding: 8px;
}

.tab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: auto;
  min-width: 104px;
  height: 34px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
  padding: 0 4px;
  border-radius: 9px;
  font-weight: 700;
  font-size: 0.8rem;
  line-height: 1.2;
  border: 1px solid var(--border);
  background: linear-gradient(135deg, #f5f8fc, #e2ebf4);
  color: #1F2A44;
  transition: transform 170ms cubic-bezier(0.22, 0.9, 0.24, 1), box-shadow 170ms ease, filter 170ms ease;
  transform-origin: center bottom;
}

a.tab-btn.assignment-nav-link {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tab-btn:focus,
.tab-btn:focus-visible {
  outline: none;
  box-shadow: none;
}
body[data-theme="dark"] .tab-btn {
  background: linear-gradient(135deg, #314b73, #2a4063);
  color: #eaf3ff;
}

.tab-btn.active {
  background: linear-gradient(120deg, var(--cyan), var(--green));
  background-size: 140% 140%;
  background-position: 50% 50%;
  color: white;
  border-color: transparent;
  border-width: 1px;
  border-style: solid;
  background-clip: padding-box;
  box-shadow: none;
}

body.client-app:not(.compact-mode) .tab-btn {
  background: #1F2A44;
  color: #ffffff;
  border-color: rgba(70, 103, 150, 0.78);
}

body.client-app:not(.compact-mode) .tab-btn.active {
  background: linear-gradient(120deg, #B52555, #0077CB, #00A499);
  background-size: 140% 140%;
  background-position: 50% 50%;
  color: #ffffff;
  border-color: transparent;
  border-width: 1px;
  border-style: solid;
  background-clip: padding-box;
  box-shadow: none;
}

body.client-app[data-menu-view="top-tabs"]:not(.compact-mode) .tab-btn.active {
  border-color: transparent;
  box-shadow: none;
}

body.client-app[data-menu-view="top-tabs"] .tab-nav {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 6px 0 10px;
  margin-top: 0;
  margin-bottom: 18px;
  position: relative;
  z-index: 1300;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

body.client-app[data-menu-view="top-tabs"] .tab-nav::-webkit-scrollbar {
  height: 6px;
}

body.client-app[data-menu-view="top-tabs"] .tab-nav::-webkit-scrollbar-thumb {
  background: rgba(0, 119, 203, 0.45);
  border-radius: 999px;
}

body.client-app[data-menu-view="top-tabs"] .tab-nav::-webkit-scrollbar-track {
  background: rgba(31, 42, 68, 0.12);
  border-radius: 999px;
}

body.client-app[data-menu-view="top-tabs"] .tab-btn {
  min-height: 36px;
  border-radius: 10px;
}

body.client-app[data-menu-view="top-tabs"]:not(.compact-mode) .tab-nav {
  gap: 11px;
}

body.client-app[data-menu-view="top-tabs"] .tab-btn.active {
  border-color: transparent;
  box-shadow: none;
}

body.client-app[data-menu-view="top-tabs"]:not(.compact-mode) .tab-nav.dock-hover .tab-btn {
  position: relative;
  transform: translateY(var(--dock-raise, 0px)) scale(var(--dock-scale, 1));
  box-shadow: var(--dock-shadow, 0 0 0 rgba(0, 0, 0, 0));
  filter: brightness(var(--dock-brightness, 1));
}

body.client-app[data-menu-view="top-tabs"] .tab-panel[data-panel="home"] .metrics {
  padding-top: 14px;
  padding-bottom: 18px;
  margin-top: 0;
  min-height: 176px;
}

body.client-app[data-menu-view="top-tabs"] #menuViewSwitchContentAnchor {
  display: none !important;
}

/* Authoritative nav/header spacing layer for stable layout adjustments */
body.client-app > header > section.global-nav-row {
  margin-top: 0;
  margin-bottom: var(--header-nav-gap);
}

body.client-app[data-menu-view="top-tabs"] > header > section.global-nav-row .tab-nav {
  margin-top: 0;
  margin-bottom: 12px;
}

@media (max-width: 1400px) {
  .tab-nav {
    gap: 4px;
  }

  .tab-btn {
    flex: 0 0 auto;
    width: auto;
    min-width: 98px;
    height: 32px;
    padding: 0 5px;
    font-size: 0.76rem;
    border-radius: 8px;
  }
}

@media (max-width: 1180px) {
  .global-subtab-row {
    flex-wrap: wrap;
  }

  .global-subtab-row select {
    min-width: 180px;
    width: 100%;
  }

  body.admin-app .header-actions .admin-global-search {
    width: 100%;
    max-width: none;
    min-width: 180px;
    flex: 1 1 100%;
  }

  .tab-nav {
    gap: 3px;
  }

  .tab-btn {
    flex: 0 0 auto;
    width: auto;
    min-width: 94px;
    height: 32px;
    padding: 0 4px;
    font-size: 0.73rem;
    border-radius: 7px;
  }
}

.tab-panel { display: none; }
.tab-panel.active { display: block; }

.tab-panel[data-panel="home"] .metrics {
  min-height: 176px;
}

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

.metric-grid article {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
  background: linear-gradient(135deg, var(--card-bg-soft), var(--card-bg));
}

.overview-widget-card {
  cursor: grab;
}

.overview-widget-card.is-dragging {
  opacity: 0.65;
}

.overview-widget-card.drop-target {
  border-color: rgba(0, 119, 203, 0.72);
  box-shadow: 0 0 0 2px rgba(0, 119, 203, 0.18) inset;
}

.admin-metric-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.admin-metric-grid article span {
  display: block;
  font-size: 0.78rem;
  color: var(--muted);
}

.admin-metric-grid article strong {
  font-size: 1.04rem;
  line-height: 1.2;
}

#siteAdminControlsCard .admin-item-actions {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

#siteAdminControlsCard .admin-item-actions .small-btn {
  width: 100%;
  justify-content: center;
}

.admin-global-search {
  min-width: 260px;
  width: 320px;
  max-width: 36vw;
}

.admin-dash-widget {
  cursor: pointer;
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.admin-dash-widget:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 119, 203, 0.6);
  box-shadow: 0 8px 20px rgba(11, 17, 27, 0.18);
}

.admin-kpi-draggable {
  cursor: grab;
  user-select: none;
}

.admin-kpi-draggable:active {
  cursor: grabbing;
}

.admin-kpi-draggable.is-dragging {
  opacity: 0.68;
  transform: scale(0.995);
}

.admin-kpi-draggable.drop-target {
  border-color: rgba(0, 119, 203, 0.75);
  box-shadow: 0 0 0 2px rgba(0, 119, 203, 0.2) inset;
}

.admin-kpi-context-menu {
  position: fixed;
  z-index: 5000;
  min-width: 230px;
  max-width: min(320px, 90vw);
  padding: 8px;
  border: 1px solid rgba(31, 42, 68, 0.18);
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(11, 17, 27, 0.18);
}

.admin-kpi-context-menu.visible {
  animation: fade-slide-up 120ms ease;
}

.admin-kpi-context-title {
  margin: 6px 4px 4px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #4f5e79;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.admin-kpi-context-hidden-list {
  display: grid;
  gap: 6px;
  margin-bottom: 4px;
  max-height: 160px;
  overflow: auto;
}

.admin-kpi-context-action {
  width: 100%;
  text-align: left;
  border: 1px solid rgba(31, 42, 68, 0.16);
  border-radius: 8px;
  padding: 7px 9px;
  font-weight: 600;
  color: #1f2a44;
  background: #f8fbff;
  cursor: pointer;
}

.admin-kpi-context-action.small {
  font-weight: 600;
  font-size: 0.86rem;
}

.admin-kpi-context-action:hover:not(:disabled),
.admin-kpi-context-action:focus-visible:not(:disabled) {
  border-color: #0077CB;
  background: #edf5ff;
}

.admin-kpi-context-action:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.admin-dashboard-inline-modules {
  margin-top: 4px;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

.admin-dashboard-inline-modules h3 {
  margin: 4px 0 8px;
}

#adminCaseloadSnapshot {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

#adminDashboardRow1,
#adminDashboardRow2,
#adminDashboardRow3 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 10px;
}

.admin-client-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 10px;
}

.admin-client-chip {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
  background: linear-gradient(135deg, var(--card-bg-soft), var(--card-bg));
  display: grid;
  gap: 8px;
}

.admin-client-chip-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.admin-client-chip-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-client-chip-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.admin-client-chip-actions select {
  min-width: 170px;
  width: auto;
}

.admin-client-directory {
  display: grid;
  gap: 8px;
}

.admin-client-directory-item {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
  background: linear-gradient(135deg, var(--card-bg-soft), var(--card-bg));
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-client-directory-item .small-link {
  margin-left: auto;
}

.admin-client-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.admin-client-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 8px;
}

.admin-client-table thead th {
  text-align: left;
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 700;
  padding: 0 8px 4px;
}

.admin-client-table tbody tr {
  background: linear-gradient(135deg, var(--card-bg-soft), var(--card-bg));
}

.admin-client-table tbody td {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 8px;
  vertical-align: middle;
  text-align: left;
}

.admin-client-table th,
.admin-client-table td {
  text-align: left !important;
}

.admin-client-table td > *,
.admin-client-table td .meta,
.admin-client-table td .muted,
.admin-client-table td strong {
  text-align: left;
}

.admin-client-table td .tag {
  margin-left: 0;
  margin-right: 6px;
  vertical-align: middle;
}

.admin-client-table tbody td:first-child {
  border-left: 1px solid var(--border);
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.admin-client-table tbody td:last-child {
  border-right: 1px solid var(--border);
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

.admin-client-table-actions {
  white-space: nowrap;
  text-align: left;
}

.admin-client-table-action-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-height: 32px;
}

#clientInfoList .client-info-edit-row,
#clientProgrammeList .client-info-edit-row {
  display: grid;
  grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
  align-items: center;
  column-gap: 12px;
}

#clientInfoList .client-info-edit-row strong,
#clientProgrammeList .client-info-edit-row strong {
  display: inline-block;
  min-width: 180px;
}

#clientInfoList .client-info-edit-row input,
#clientInfoList .client-info-edit-row select,
#clientProgrammeList .client-info-edit-row input,
#clientProgrammeList .client-info-edit-row select {
  width: min(640px, 100%);
  min-width: 280px;
}

.admin-client-table .right-action {
  justify-content: flex-start;
  margin-top: 0;
}

.admin-client-table td select {
  min-width: 150px;
}

.admin-portfolio-row {
  cursor: pointer;
}

.admin-portfolio-row td {
  transition: background-color 120ms ease, color 120ms ease;
}

.admin-portfolio-row:hover td {
  background: rgba(0, 119, 203, 0.08);
}

.admin-portfolio-row td:first-child {
  position: relative;
  padding-right: 26px;
}

.admin-portfolio-row:hover td:first-child::after {
  content: "↗";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.85rem;
  line-height: 1;
  color: rgba(31, 42, 68, 0.58);
  pointer-events: none;
}

body[data-theme="dark"] .admin-portfolio-row:hover td:first-child::after {
  color: rgba(255, 255, 255, 0.62);
}

.admin-client-lock-banner {
  border: 1px solid rgba(181, 37, 85, 0.5);
  background: linear-gradient(135deg, rgba(181, 37, 85, 0.18), rgba(143, 47, 142, 0.2));
  color: #ffffff;
  font-weight: 800;
  margin-bottom: 12px;
}

body[data-theme="dark"] .admin-client-lock-banner {
  color: #ffffff;
  border-color: rgba(181, 37, 85, 0.65);
}

.admin-widget-grid .card {
  min-height: 0;
  height: auto;
}

#dashboard-widget-grid .card,
#dashboard-clients {
  min-height: 0;
  height: auto;
}

#dashboard-widget-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px;
  grid-auto-flow: row dense;
  align-items: start;
}

#dashboard-compliance-inline {
  min-height: 0;
  padding-bottom: 14px;
}

#dashboard-widget-grid > #dashboard-compliance-inline,
#dashboard-widget-grid > #dashboard-kpis {
  grid-column: 1 / -1;
}

.subtle-card {
  margin-top: 10px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.08));
}

.admin-widget-stack {
  display: grid;
  gap: 8px;
}

.admin-widget-stack .small-btn {
  width: 100%;
  justify-content: center;
}

.admin-gender-split-wrap {
  display: grid;
  grid-template-columns: 130px 1fr;
  align-items: center;
  gap: 10px;
}

.admin-gender-pie {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 1px solid rgba(31, 42, 68, 0.18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}

.admin-gender-legend {
  display: grid;
  gap: 5px;
}

.admin-gender-legend-row {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  align-items: center;
  gap: 7px;
  font-size: 0.82rem;
}

.admin-gender-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.admin-gender-percent-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.admin-worker-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: linear-gradient(135deg, var(--card-bg-soft), var(--card-bg));
}

.admin-mini-bar {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 10px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: linear-gradient(135deg, var(--card-bg-soft), var(--card-bg));
}

.admin-mini-bar > div {
  grid-column: 1 / -1;
  height: 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(31, 42, 68, 0.1);
  overflow: hidden;
}

.admin-mini-bar > div > i {
  display: block;
  height: 100%;
  background: linear-gradient(120deg, #B52555, #0077CB, #00A499);
}

.admin-report-chart {
  display: grid;
  gap: 10px;
}

.admin-report-bar-row {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
  background: linear-gradient(135deg, var(--card-bg-soft), var(--card-bg));
}

.admin-report-bar-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.admin-report-bar-meta span {
  font-size: 0.84rem;
  opacity: 0.9;
}

.admin-report-bar-track {
  margin-top: 6px;
  height: 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(31, 42, 68, 0.08);
  overflow: hidden;
}

.admin-report-bar-track i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(120deg, #B52555, #0077CB, #00A499);
}

.admin-report-bar-tags {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-stacked-risk {
  display: grid;
  gap: 10px;
}

.admin-stacked-risk-track {
  display: flex;
  width: 100%;
  min-height: 18px;
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
  background: rgba(31, 42, 68, 0.08);
}

.admin-stacked-risk-track i {
  display: block;
  min-height: 18px;
}

.admin-stacked-risk-track i.risk-high,
.admin-stacked-risk-legend i.risk-high {
  background: linear-gradient(120deg, #b52555, #d94a77);
}

.admin-stacked-risk-track i.risk-medium,
.admin-stacked-risk-legend i.risk-medium {
  background: linear-gradient(120deg, #2f7ecb, #00a4d1);
}

.admin-stacked-risk-track i.risk-low,
.admin-stacked-risk-legend i.risk-low {
  background: linear-gradient(120deg, #00a499, #25c6a8);
}

.admin-stacked-risk-legend {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.admin-stacked-risk-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.86rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px 8px;
  background: linear-gradient(135deg, var(--card-bg-soft), var(--card-bg));
}

.admin-stacked-risk-legend i {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 999px;
}

.admin-widget-config-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
  margin: 8px 0 10px;
}

.admin-widget-config-list label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
}

.admin-kpi-visibility-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  min-height: 30px;
}

.admin-widget-layout-controls {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin: 4px 0 8px;
}

.admin-widget-layout-presets {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.admin-widget-width-icons {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.admin-width-icon-btn {
  min-width: 30px;
  height: 30px;
  padding: 0 6px;
  line-height: 1;
}

.admin-width-icon-btn.active {
  border-color: rgba(0, 119, 203, 0.75);
  box-shadow: 0 0 0 2px rgba(0, 119, 203, 0.2) inset;
}

.admin-widget-order-list {
  display: grid;
  gap: 8px;
  margin: 8px 0 12px;
}

.admin-widget-order-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
  cursor: grab;
  user-select: none;
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.admin-widget-order-row.is-static {
  cursor: default;
}

.admin-widget-order-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}

.admin-widget-order-row:focus-visible {
  outline: 2px solid rgba(0, 119, 203, 0.65);
  outline-offset: 1px;
}

.admin-widget-order-row:active {
  cursor: grabbing;
}

.admin-widget-order-row.is-dragging {
  opacity: 0.65;
  transform: scale(0.99);
}

.admin-widget-order-row.drop-target {
  border-color: rgba(0, 119, 203, 0.75);
  box-shadow: 0 0 0 2px rgba(0, 119, 203, 0.2) inset;
}

.admin-dashboard-draggable {
  cursor: grab;
  user-select: none;
  transition: border-color 120ms ease, box-shadow 120ms ease, opacity 120ms ease, transform 120ms ease;
}

.admin-dashboard-draggable:active {
  cursor: grabbing;
}

.admin-dashboard-draggable.is-dragging {
  opacity: 0.68;
  transform: scale(0.995);
}

.admin-dashboard-draggable.drop-target {
  border-color: rgba(0, 119, 203, 0.75);
  box-shadow: 0 0 0 2px rgba(0, 119, 203, 0.2) inset;
}

.admin-drag-handle {
  display: inline-block;
  margin-right: 8px;
  color: var(--muted);
  font-weight: 700;
}

.admin-widget-reorder-btn {
  min-width: 30px;
  height: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  line-height: 1;
}

.admin-tab-submenu-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.admin-tab-submenu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 150px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card-bg);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
  z-index: 1250;
}

.admin-tab-submenu-wrap:hover .admin-tab-submenu,
.admin-tab-submenu-wrap:focus-within .admin-tab-submenu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.admin-tab-submenu .small-btn {
  width: 100%;
  justify-content: center;
}

.admin-report-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.admin-report-filters label {
  font-weight: 700;
  color: var(--card-text);
}

.admin-report-filters select {
  min-width: 160px;
}

@media (max-width: 1120px) {
  .admin-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #siteAdminControlsCard .admin-item-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #siteAdminSnapshotGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.metric-grid article.metric-clickable {
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.metric-grid article.metric-clickable:hover,
.metric-grid article.metric-clickable:focus-visible {
  transform: translateY(-1px);
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(0, 119, 203, 0.18);
  outline: none;
}

.metric-hover-card {
  position: relative;
  cursor: pointer;
}

.metric-hover-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 35;
  width: min(460px, 86vw);
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  color: var(--ink);
  padding: 10px 12px;
  box-shadow: 0 12px 24px rgba(10, 20, 35, 0.24);
  font-size: 0.86rem;
  line-height: 1.42;
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-2px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.metric-hover-card:hover .metric-hover-panel,
.metric-hover-card:focus-within .metric-hover-panel,
.metric-hover-card.show-panel .metric-hover-panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.metric-hover-panel p {
  margin: 0;
}

.metric-hover-panel p + p {
  margin-top: 8px;
}

#homeAttendanceBreakdown .tag,
#homeAttendanceBreakdown .appointment-type-tag {
  color: #ffffff !important;
}

#homeAssignmentsBreakdown .tag,
#homeAssignmentsBreakdown .appointment-type-tag,
#homeAssignmentsBreakdown .appointment-status-chip,
#homeAssignmentsBreakdown .appointment-time-chip,
.snapshot-insight-content #homeAssignmentsBreakdown .tag,
.snapshot-insight-content #homeAssignmentsBreakdown .appointment-type-tag,
.snapshot-insight-content #homeAssignmentsBreakdown .appointment-status-chip,
.snapshot-insight-content #homeAssignmentsBreakdown .appointment-time-chip {
  color: #ffffff !important;
}

.metric-chart-panel {
  width: min(520px, 90vw);
}

.metric-chart-panel .mini-chart {
  min-height: 180px;
  max-height: 220px;
  margin-top: 6px;
}

.metric-chart-panel .mini-chart + .mini-chart {
  margin-top: 10px;
}

.forecast-hover-card {
  position: relative;
}

.forecast-hover-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 32;
  width: min(620px, 94vw);
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  color: var(--ink);
  padding: 10px 12px;
  box-shadow: 0 12px 24px rgba(10, 20, 35, 0.24);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-2px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.forecast-hover-card:hover .forecast-hover-panel,
.forecast-hover-card:focus-within .forecast-hover-panel,
.forecast-hover-card.show-panel .forecast-hover-panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

#cravingsMenuHeatmap {
  margin-top: 6px;
  min-height: 130px;
}

#sleepRoutineHistoryTrackerWrap {
  margin-top: 8px;
}

.sleep-consistency-wrap {
  margin-top: 12px;
}

.sleep-consistency-panel {
  margin-top: 12px;
}

.sleep-consistency-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.sleep-consistency-head h3 {
  margin: 0;
  font-size: 1rem;
  color: var(--ink);
}

.sleep-consistency-legend {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--muted);
}

.sleep-consistency-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
}

.sleep-consistency-dot.sleep-dot {
  background: #0077CB;
}

.sleep-consistency-dot.routine-dot {
  background: #00A499;
}

.sleep-emoji-options {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 10px;
}

.sleep-emoji-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
  padding: 10px 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card-bg-soft);
  color: var(--ink);
  font-weight: 700;
  font-size: 0.86rem;
  cursor: pointer;
}

.sleep-emoji-option input[type="radio"] {
  width: 16px;
  height: 16px;
}

.sleep-emoji-option:has(input[type="radio"]:checked) {
  border-color: rgba(0, 119, 203, 0.7);
  box-shadow: 0 0 0 2px rgba(0, 119, 203, 0.18);
}

.sleep-emoji-options-modal {
  margin-top: 6px;
  margin-bottom: 4px;
}

.sleep-edit-actions {
  display: flex;
  justify-content: flex-end;
  margin: 8px 0 12px;
}

.sleep-edit-btn.small-btn {
  font-size: 0.76rem;
  padding: 3px 8px;
  min-height: 26px;
}

#sleepRoutineViewSwitch {
  margin-top: 10px;
  margin-bottom: 10px;
  gap: 10px;
}

#sleepRoutineViewSwitch .small-btn {
  margin-right: 2px;
  min-width: 90px;
}

@media (max-width: 980px) {
  .sleep-emoji-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.routine-days-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card-bg-soft);
}

.routine-days-options label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.84rem;
  color: var(--ink);
}

.routine-days-options input[type="checkbox"] {
  width: 16px;
  height: 16px;
}

.metric-grid span { display: block; font-size: 0.82rem; color: var(--muted); }
.metric-grid strong { font-size: 1.03rem; }

@keyframes aiConcernThrob {
  0% {
    transform: scale(1);
    opacity: 0.96;
    text-shadow: 0 0 0 rgba(181, 37, 85, 0);
  }
  65% {
    transform: scale(1.12);
    opacity: 1;
    text-shadow: 0 0 10px rgba(181, 37, 85, 0.45);
  }
  100% {
    transform: scale(1);
    opacity: 0.96;
    text-shadow: 0 0 0 rgba(181, 37, 85, 0);
  }
}

.ai-live-pulse {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  animation: aiConcernThrob 1.5s ease-in-out infinite;
  transform-origin: center;
  will-change: transform, opacity, text-shadow;
}

.ai-concern-glow {
  display: inline-block;
  text-shadow:
    0 0 6px rgba(181, 37, 85, 0.45),
    0 0 12px rgba(0, 119, 203, 0.35),
    0 0 18px rgba(0, 164, 153, 0.25);
}

.live-pulse-label {
  display: inline-block;
}

.layout {
  display: grid;
  gap: 14px;
  margin-bottom: 14px;
}

#homeLiveSnapshotCard {
  width: 100%;
  max-width: 100%;
}

#homeQuoteHourContent {
  border: 1px solid rgba(0, 119, 203, 0.28);
  background: linear-gradient(90deg, rgba(181, 37, 85, 0.2), rgba(0, 119, 203, 0.18), rgba(0, 164, 153, 0.2));
  padding: 10px 12px;
}

.quote-hour-visual {
  display: grid;
  grid-template-columns: 30px 1fr 30px;
  gap: 10px;
  align-items: center;
  min-height: 54px;
}

.quote-hour-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: #ffffff;
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1;
}

.quote-hour-tail-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: #ffffff;
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1;
}

.quote-hour-copy {
  min-width: 0;
}

.quote-hour-headline {
  margin: 0;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
}

.quote-hour-support {
  margin: 6px 0 0;
  opacity: 0.9;
  line-height: 1.35;
}

#quoteOfHourCard.home-scale-sm .quote-hour-visual,
#quoteOfHourCard.home-scale-xs .quote-hour-visual {
  grid-template-columns: 22px 1fr 22px;
  gap: 8px;
}

#quoteOfHourCard.home-scale-sm .quote-hour-glyph,
#quoteOfHourCard.home-scale-xs .quote-hour-glyph {
  font-size: 1.2rem;
}

#quoteOfHourCard.home-scale-sm .quote-hour-tail-glyph,
#quoteOfHourCard.home-scale-xs .quote-hour-tail-glyph {
  font-size: 1.2rem;
}

#quoteOfHourCard.home-scale-sm .quote-hour-support,
#quoteOfHourCard.home-scale-xs .quote-hour-support {
  display: none;
}

#quoteOfHourCard.home-scale-xs .quote-hour-headline,
#quoteOfHourCard.home-scale-sm .quote-hour-headline,
#quoteOfHourCard.home-scale-md .quote-hour-headline,
#quoteOfHourCard.home-scale-lg .quote-hour-headline {
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1.34;
}

.two-up { grid-template-columns: 1fr 1fr; }
.three-up { grid-template-columns: 1fr 1fr 1fr; }

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

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

.ai-risk-breakdown {
  display: grid;
  gap: 8px;
}

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

.ai-risk-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
  background: var(--card-bg-soft);
  display: grid;
  gap: 4px;
}

.ai-risk-card span {
  font-weight: 700;
  font-size: 0.8rem;
}

.ai-risk-card strong {
  font-size: 0.95rem;
  font-weight: 800;
}

.ai-risk-card em {
  font-style: normal;
  font-size: 0.76rem;
  color: var(--muted);
}

.ai-risk-next {
  font-weight: 600;
}

.home-layout-profiles {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.widget-last-updated {
  margin: -2px 0 10px;
  font-size: 0.78rem;
  color: var(--muted);
}

.home-draggable-section {
  position: relative;
  transition: box-shadow 140ms ease, border-color 140ms ease;
  overflow: hidden;
}

.home-draggable-section.home-scale-xs {
  padding: 8px 10px;
}

.home-draggable-section.home-scale-sm {
  padding: 10px 12px;
}

.home-draggable-section.home-scale-md {
  padding: 12px 14px;
}

.home-draggable-section.home-scale-lg {
  padding: 14px 16px;
}

.home-draggable-section.home-scale-xs h2 {
  font-size: 1.05rem;
}

.home-draggable-section.home-scale-sm h2 {
  font-size: 1.12rem;
}

.home-draggable-section.home-scale-md h2 {
  font-size: 1.2rem;
}

.home-draggable-section.home-scale-lg h2 {
  font-size: 1.28rem;
}

.home-draggable-section.home-scale-xs .advice-box,
.home-draggable-section.home-scale-xs .meta,
.home-draggable-section.home-scale-xs .tag,
.home-draggable-section.home-scale-xs p,
.home-draggable-section.home-scale-xs li {
  font-size: 0.8rem;
  line-height: 1.24;
}

.home-draggable-section.home-scale-xs .advice-box h3,
.home-draggable-section.home-scale-xs .advice-box h4,
.home-draggable-section.home-scale-xs .advice-box strong,
.home-draggable-section.home-scale-xs .advice-box span,
.home-draggable-section.home-scale-xs .advice-box button {
  font-size: 0.78rem;
  line-height: 1.2;
}

.home-draggable-section.home-scale-sm .advice-box,
.home-draggable-section.home-scale-sm .meta,
.home-draggable-section.home-scale-sm .tag,
.home-draggable-section.home-scale-sm p,
.home-draggable-section.home-scale-sm li {
  font-size: 0.86rem;
  line-height: 1.3;
}

.home-draggable-section.home-scale-sm .advice-box h3,
.home-draggable-section.home-scale-sm .advice-box h4,
.home-draggable-section.home-scale-sm .advice-box strong,
.home-draggable-section.home-scale-sm .advice-box span,
.home-draggable-section.home-scale-sm .advice-box button {
  font-size: 0.84rem;
  line-height: 1.24;
}

.home-draggable-section.home-scale-md .advice-box,
.home-draggable-section.home-scale-md .meta,
.home-draggable-section.home-scale-md .tag,
.home-draggable-section.home-scale-md p,
.home-draggable-section.home-scale-md li {
  font-size: 0.96rem;
  line-height: 1.38;
}

.home-draggable-section.home-scale-md .advice-box h3,
.home-draggable-section.home-scale-md .advice-box h4,
.home-draggable-section.home-scale-md .advice-box strong,
.home-draggable-section.home-scale-md .advice-box span,
.home-draggable-section.home-scale-md .advice-box button {
  font-size: 0.92rem;
  line-height: 1.28;
}

.home-draggable-section.home-scale-lg .advice-box,
.home-draggable-section.home-scale-lg .meta,
.home-draggable-section.home-scale-lg .tag,
.home-draggable-section.home-scale-lg p,
.home-draggable-section.home-scale-lg li {
  font-size: 1rem;
  line-height: 1.42;
}

.home-draggable-section.home-scale-lg .advice-box h3,
.home-draggable-section.home-scale-lg .advice-box h4,
.home-draggable-section.home-scale-lg .advice-box strong,
.home-draggable-section.home-scale-lg .advice-box span,
.home-draggable-section.home-scale-lg .advice-box button {
  font-size: 0.98rem;
  line-height: 1.32;
}

.home-draggable-section .advice-box,
.home-draggable-section p,
.home-draggable-section li,
.home-draggable-section .meta {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.home-draggable-section .advice-box,
.home-draggable-section .advice-box > * {
  box-sizing: border-box;
  min-width: 0;
}

.home-draggable-section .advice-box {
  overflow: hidden;
}

.home-draggable-section.card-clamp .advice-box {
  overflow: hidden;
  position: relative;
}

.home-draggable-section .advice-box .sentence-clamp-preview {
  margin: 0;
  white-space: normal;
}

.home-draggable-section.card-clamp.content-clipped {
  overflow: hidden;
}

/* Home cards: keep inner containers tight and remove extra top/bottom dead space */
.home-draggable-section .advice-box {
  padding: 8px 10px;
  line-height: 1.4;
  white-space: normal;
  min-height: 0;
}

.home-draggable-section .advice-box > *:first-child {
  margin-top: 0 !important;
}

.home-draggable-section .advice-box > *:last-child {
  margin-bottom: 0 !important;
}

.home-draggable-section .advice-box p {
  margin: 0 0 6px;
}

.home-draggable-section .advice-box p:last-child {
  margin-bottom: 0;
}

.home-draggable-section .advice-box ul,
.home-draggable-section .advice-box ol {
  margin: 0;
  padding-left: 16px;
}

.home-draggable-section .advice-box li {
  margin: 0 0 4px;
}

.home-draggable-section .advice-box li:last-child {
  margin-bottom: 0;
}

/* Keep inner containers visually proportional to outer Home card size */
.home-draggable-section.home-scale-xs .advice-box {
  padding: 4px 6px;
  border-radius: 8px;
}

.home-draggable-section.home-scale-sm .advice-box {
  padding: 6px 8px;
  border-radius: 9px;
}

.home-draggable-section.home-scale-xs .home-mini-widget-grid {
  gap: 4px;
  margin-bottom: 4px;
}

.home-draggable-section.home-scale-sm .home-mini-widget-grid {
  gap: 5px;
  margin-bottom: 5px;
}

.home-draggable-section.home-scale-xs .home-mini-widget-card {
  padding: 4px 5px;
  border-radius: 8px;
}

.home-draggable-section.home-scale-xs .home-mini-widget-card span,
.home-draggable-section.home-scale-xs .home-mini-widget-card strong,
.home-draggable-section.home-scale-xs .home-mini-widget-card .meta {
  font-size: 0.74rem;
  line-height: 1.2;
}

.home-draggable-section.home-scale-sm .home-mini-widget-card {
  padding: 5px 6px;
  border-radius: 9px;
}

.home-draggable-section.home-scale-sm .home-mini-widget-card span,
.home-draggable-section.home-scale-sm .home-mini-widget-card strong,
.home-draggable-section.home-scale-sm .home-mini-widget-card .meta {
  font-size: 0.8rem;
  line-height: 1.24;
}

.home-draggable-section.home-scale-xs .appointment-mini {
  padding: 5px 6px;
  gap: 4px;
  border-radius: 8px;
}

.home-draggable-section.home-scale-sm .appointment-mini {
  padding: 6px 7px;
  gap: 5px;
  border-radius: 9px;
}

.home-draggable-section.home-scale-xs .appointment-mini-top,
.home-draggable-section.home-scale-xs .appointment-mini-title-row,
.home-draggable-section.home-scale-xs .appointment-mini-meta,
.home-draggable-section.home-scale-xs .appointment-countdown-row {
  gap: 5px;
}

.home-draggable-section.home-scale-sm .appointment-mini-top,
.home-draggable-section.home-scale-sm .appointment-mini-title-row,
.home-draggable-section.home-scale-sm .appointment-mini-meta,
.home-draggable-section.home-scale-sm .appointment-countdown-row {
  gap: 6px;
}

.home-draggable-section.home-scale-xs .appointment-time-chip,
.home-draggable-section.home-scale-xs .appointment-mode-chip,
.home-draggable-section.home-scale-xs .appointment-status-chip,
.home-draggable-section.home-scale-xs .appointment-countdown-chip {
  font-size: 0.62rem;
  padding: 2px 5px;
}

.home-draggable-section.home-scale-sm .appointment-time-chip,
.home-draggable-section.home-scale-sm .appointment-mode-chip,
.home-draggable-section.home-scale-sm .appointment-status-chip,
.home-draggable-section.home-scale-sm .appointment-countdown-chip {
  font-size: 0.66rem;
  padding: 2px 6px;
}

.home-draggable-section.home-scale-xs .trigger-pattern-list li {
  padding: 4px 6px;
  border-radius: 8px;
}

.home-draggable-section.home-scale-sm .trigger-pattern-list li {
  padding: 5px 7px;
  border-radius: 9px;
}

.home-draggable-section.card-clamp .advice-box {
  display: block;
}

.home-draggable-section.card-truncated {
  cursor: zoom-in;
}

.home-draggable-section.card-truncated .advice-box {
  position: relative;
}

.home-draggable-section.card-clamp.card-truncated .advice-box::after {
  content: '...';
  position: absolute;
  right: 6px;
  bottom: 2px;
  padding: 0 4px;
  border-radius: 6px;
  background: rgba(227, 235, 244, 0.92);
  color: var(--muted);
  font-weight: 700;
}

/* Today's Focus uses direct card click for pop-out, so never show ellipsis indicator. */
#homeFeedbackCard .advice-box::after {
  content: none !important;
  display: none !important;
}

body[data-theme="dark"] .home-draggable-section.card-clamp.card-truncated .advice-box::after {
  background: rgba(34, 54, 90, 0.92);
  color: #d9e8fb;
}

.home-draggable-section.home-slot-tight {
  padding: 10px 12px;
}

.home-draggable-section.home-slot-tight h2 {
  font-size: 1.1rem;
}

.home-draggable-section.home-slot-tight .advice-box,
.home-draggable-section.home-slot-tight .meta,
.home-draggable-section.home-slot-tight .tag,
.home-draggable-section.home-slot-tight p,
.home-draggable-section.home-slot-tight li {
  font-size: 0.92rem;
  line-height: 1.35;
}

.admin-resize-handle {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  opacity: 0.88;
  cursor: nwse-resize;
  z-index: 7;
  padding: 0;
}

.admin-resize-handle::before {
  content: '';
  position: absolute;
  right: 1px;
  bottom: 1px;
  width: 12px;
  height: 12px;
  border-right: 2px solid rgba(0, 119, 203, 0.92);
  border-bottom: 2px solid rgba(181, 37, 85, 0.92);
  border-bottom-right-radius: 6px;
  pointer-events: none;
}

.admin-resize-handle:hover,
.admin-resize-handle:focus-visible {
  opacity: 1;
  outline: 2px solid rgba(0, 119, 203, 0.35);
  outline-offset: 1px;
}

.admin-app .tab-panel .card {
  position: relative;
  overflow: hidden;
}

.collapsed-by-toggle {
  display: none !important;
}

.home-section-head h2 {
  margin: 0;
}

#homeFeedbackCard,
#appointmentsCard,
#cravingForecastCard,
#triggerPatternCard,
#recoveryMomentumCard,
#upcoming24hCard {
  height: auto;
  align-self: start;
}

#homeFeedbackCard {
  display: flex;
  flex-direction: column;
  padding-bottom: 14px;
  margin-bottom: 0 !important;
  transition: width 2000ms cubic-bezier(0.22, 1, 0.36, 1), margin-right 2000ms cubic-bezier(0.22, 1, 0.36, 1), opacity 2000ms cubic-bezier(0.22, 1, 0.36, 1), transform 2000ms cubic-bezier(0.22, 1, 0.36, 1);
}

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

.today-focus-card {
  border: 0;
  border-radius: 8px;
  padding: 4px 6px;
  background: transparent;
  box-shadow: none;
}

.today-focus-card h3 {
  margin: 0 0 3px;
  font-size: 1rem;
  line-height: 1.2;
}

.today-focus-card p {
  margin: 0;
  line-height: 1.26;
  font-size: 1rem;
}

.today-focus-card p + p {
  margin-top: 2px;
}

.today-focus-card .meta {
  font-size: 0.9rem;
  line-height: 1.22;
}

.today-focus-card .compact-list {
  margin: 0;
  padding-left: 14px;
  display: grid;
  gap: 2px;
  font-size: 0.98rem;
  line-height: 1.24;
}

.today-focus-rail {
  display: grid;
  gap: 6px;
}

.today-focus-single {
  display: grid;
  gap: 8px;
}

.today-focus-single-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.today-focus-single-head h3 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.2;
}

.today-focus-rail-track {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(31, 42, 68, 0.1);
  overflow: hidden;
}

.today-focus-rail-track i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #B52555 0%, #0077CB 60%, #00A499 100%);
}

.today-focus-step-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.today-focus-visual {
  display: grid;
  gap: 8px;
}

.today-focus-step-pill-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.today-focus-step-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 7px;
  font-size: 0.8rem;
  font-weight: 800;
}

.today-focus-step-pill.done {
  background: linear-gradient(135deg, rgba(0, 164, 153, 0.2), rgba(0, 119, 203, 0.14));
}

.today-focus-step-pill.pending {
  background: linear-gradient(135deg, rgba(181, 37, 85, 0.16), rgba(0, 119, 203, 0.08));
}

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

.today-focus-visual-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px 8px;
  background: linear-gradient(145deg, rgba(0, 119, 203, 0.08), rgba(0, 164, 153, 0.06));
}

.today-focus-visual-card h4 {
  margin: 0 0 3px;
  font-size: 0.84rem;
  line-height: 1.2;
}

.today-focus-visual-card p {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.32;
}

.today-focus-pressure {
  display: grid;
  gap: 6px;
}

.today-focus-pressure-track {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(31, 42, 68, 0.1);
  overflow: hidden;
}

.today-focus-pressure-track i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #B52555 0%, #0077CB 60%, #00A499 100%);
}

.today-focus-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 4px 6px;
  font-size: 0.84rem;
  font-weight: 700;
}

.today-focus-step.done {
  background: linear-gradient(135deg, rgba(0, 164, 153, 0.2), rgba(0, 119, 203, 0.14));
}

.today-focus-step.pending {
  background: linear-gradient(135deg, rgba(181, 37, 85, 0.16), rgba(0, 119, 203, 0.08));
}

.focus-step-icon {
  line-height: 1;
}

#cravingForecastCard .forecast-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

#cravingForecastCard .forecast-mini-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px 8px;
  background: linear-gradient(145deg, rgba(0, 119, 203, 0.08), rgba(0, 164, 153, 0.06));
  display: grid;
  gap: 4px;
}

#cravingForecastCard .forecast-mini-card h4 {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.2;
}

#cravingForecastCard .forecast-mini-card p {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.32;
}

#cravingForecastCard .forecast-mini-card p.meta {
  font-size: 0.8rem;
}

#cravingForecastCard .forecast-pressure-track {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(31, 42, 68, 0.1);
  overflow: hidden;
}

#cravingForecastCard .forecast-pressure-track i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #00A499 0%, #0077CB 55%, #B52555 100%);
}

#cravingForecastCard .forecast-mini-card.is-low,
#cravingForecastCard .forecast-micro-chip.is-low {
  border-color: rgba(0, 164, 153, 0.45);
}

#cravingForecastCard .forecast-mini-card.is-moderate,
#cravingForecastCard .forecast-micro-chip.is-moderate {
  border-color: rgba(0, 119, 203, 0.5);
}

#cravingForecastCard .forecast-mini-card.is-high,
#cravingForecastCard .forecast-micro-chip.is-high {
  border-color: rgba(181, 37, 85, 0.58);
}

#cravingForecastCard .forecast-micro-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

#cravingForecastCard .forecast-micro-chip {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 7px 6px;
  display: grid;
  place-items: center;
  gap: 3px;
  text-align: center;
  background: linear-gradient(145deg, rgba(0, 119, 203, 0.07), rgba(0, 164, 153, 0.05));
}

#cravingForecastCard .forecast-micro-chip span {
  line-height: 1;
  font-size: 0.86rem;
}

#cravingForecastCard .forecast-micro-chip strong {
  font-size: 0.76rem;
  line-height: 1.15;
  word-break: break-word;
}

#cravingForecastCard.home-scale-sm .forecast-card-grid {
  grid-template-columns: 1fr;
}

#cravingForecastCard.home-scale-sm .forecast-mini-card h4 {
  font-size: 0.78rem;
}

#cravingForecastCard.home-scale-sm .forecast-mini-card p {
  font-size: 0.74rem;
}

#cravingForecastCard.home-scale-xs .forecast-micro-chip strong {
  font-size: 0.64rem;
}

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

.momentum-metric-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  align-items: stretch;
}

.home-mini-widget-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 6px;
}

.home-mini-widget-grid.home-mini-widget-grid-five {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.home-mini-widget-grid.home-mini-widget-grid-six {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.routine-window-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 4px;
}

.routine-window-item {
  cursor: pointer;
}

.routine-window-item:hover,
.routine-window-item:focus-visible {
  border-color: rgba(0, 119, 203, 0.65);
  box-shadow: 0 6px 14px rgba(31, 42, 68, 0.16);
}

.home-mini-widget-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px 7px;
  background: linear-gradient(145deg, rgba(0, 119, 203, 0.08), rgba(181, 37, 85, 0.05));
  height: 100%;
}

.home-mini-widget-card > span {
  display: block;
  font-size: 0.74rem;
  line-height: 1.25;
  color: var(--muted);
  font-weight: 700;
}

.home-mini-widget-card > strong {
  display: block;
  margin-top: 2px;
  font-size: 0.86rem;
  line-height: 1.2;
}

.home-draggable-section.home-scale-xs .home-mini-widget-card > span {
  font-size: 0.68rem;
}

.home-draggable-section.home-scale-xs .home-mini-widget-card > strong {
  font-size: 0.8rem;
}

.home-draggable-section.home-scale-sm .home-mini-widget-card > span {
  font-size: 0.71rem;
}

.home-draggable-section.home-scale-sm .home-mini-widget-card > strong {
  font-size: 0.84rem;
}

.home-mini-widget-card.is-good {
  border-color: rgba(0, 164, 153, 0.75);
  background: linear-gradient(145deg, rgba(0, 164, 153, 0.24), rgba(0, 119, 203, 0.18));
}

.home-mini-widget-card.is-good > span,
.home-mini-widget-card.is-good > strong {
  color: #0e3f3b;
}

.home-mini-widget-card.is-pending {
  border-color: rgba(181, 37, 85, 0.42);
}

.home-readiness-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0;
}

.tag.tag-readiness-ok {
  background: linear-gradient(120deg, #00A499, #0077CB);
}

.tag.tag-readiness-pending {
  background: linear-gradient(120deg, #B52555, #30507F);
}

#dailyWinsCard.home-scale-xs .home-mini-widget-grid.home-mini-widget-grid-five,
#dailyWinsCard.home-scale-xs .home-mini-widget-grid.home-mini-widget-grid-six {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#dailyWinsCard.home-scale-sm .home-mini-widget-grid.home-mini-widget-grid-five {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#dailyWinsCard.home-scale-sm .home-mini-widget-grid.home-mini-widget-grid-six {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#dailyWinsCard .home-mini-widget-grid {
  align-items: stretch;
  margin-bottom: 0;
  height: 100%;
  grid-auto-rows: 1fr;
}

#dailyWinsCard .advice-box,
#recoveryMomentumCard .advice-box {
  display: flex;
  flex-direction: column;
}

#dailyWinsCard .home-mini-widget-card,
#recoveryMomentumCard .home-mini-widget-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
}

.home-mini-widget-grid.home-mini-widget-grid-two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.momentum-metric-card {
  min-height: 98px;
  padding: 8px 9px;
  background: linear-gradient(135deg, var(--card-bg-soft), var(--card-bg));
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  height: 100%;
}

.momentum-metric-card > span {
  display: block;
  font-size: 0.7rem;
  color: var(--muted);
  font-weight: 700;
  width: 100%;
}

.momentum-metric-card > strong {
  display: block;
  margin-top: 4px;
  font-size: 1.14rem;
  line-height: 1.2;
  font-weight: 800;
  text-align: center;
  width: 100%;
}

.momentum-metric-card > .meta {
  margin: 4px 0 0;
  font-size: 0.72rem;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  width: 100%;
}

.momentum-stat-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 6px;
  background: linear-gradient(140deg, rgba(0, 119, 203, 0.08), rgba(0, 164, 153, 0.08));
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.momentum-stat-card.clickable {
  cursor: pointer;
}

.momentum-stat-card.clickable:hover {
  border-color: rgba(0, 119, 203, 0.45);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(31, 42, 68, 0.16);
}

.momentum-stat-card span {
  display: block;
  font-size: 0.69rem;
  color: var(--muted);
}

.momentum-stat-card strong {
  display: block;
  margin-top: 1px;
  font-size: 0.82rem;
  line-height: 1.2;
}

.momentum-mini-track {
  margin-top: auto;
  margin-bottom: 0;
  width: 100%;
  height: 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(31, 42, 68, 0.1);
  overflow: hidden;
}

.momentum-mini-track i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #B52555 0%, #0077CB 60%, #00A499 100%);
}

.momentum-stat-card small.meta {
  display: block;
  margin-top: 4px;
}

/* Recovery Momentum: compact and ultra-compact behaviour for narrow container widths */
#recoveryMomentumCard.home-scale-sm .momentum-metric-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

#recoveryMomentumCard.home-scale-sm .momentum-metric-card {
  min-height: 80px;
  padding: 6px 7px;
}

#recoveryMomentumCard.home-scale-sm .momentum-metric-card > span {
  font-size: 0.62rem;
}

#recoveryMomentumCard.home-scale-sm .momentum-metric-card > strong {
  font-size: 1rem;
  line-height: 1.16;
}

#recoveryMomentumCard.home-scale-sm .momentum-metric-card > .meta {
  font-size: 0.66rem;
  line-height: 1.2;
  -webkit-line-clamp: 1;
}

#recoveryMomentumCard.home-scale-sm .momentum-mini-track {
  margin-top: 4px;
  height: 6px;
}

#recoveryMomentumCard.home-scale-xs .momentum-metric-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

#recoveryMomentumCard.home-scale-xs .momentum-metric-card {
  min-height: 70px;
  padding: 4px 6px;
}

#recoveryMomentumCard.home-scale-xs .momentum-metric-card > span {
  font-size: 0.58rem;
}

#recoveryMomentumCard.home-scale-xs .momentum-metric-card > strong {
  font-size: 0.92rem;
  line-height: 1.12;
}

#recoveryMomentumCard.home-scale-xs .momentum-metric-card > .meta {
  display: none;
}

#recoveryMomentumCard.home-scale-xs .momentum-mini-track {
  margin-top: 3px;
  height: 5px;
}

.upcoming-count-strip {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

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

#upcoming24hCard .appointment-mini {
  padding: 6px 7px;
  border-radius: 9px;
}

#upcoming24hContent {
  padding: 6px 8px;
  white-space: normal;
  line-height: 1.35;
}

#upcoming24hContent .upcoming-compact-list {
  margin: 0;
  gap: 5px;
}

#upcoming24hCard .appointment-mini-top,
#upcoming24hCard .appointment-mini-title-row,
#upcoming24hCard .appointment-mini-meta,
#upcoming24hCard .appointment-countdown-row {
  gap: 6px;
}

#upcoming24hCard .appointment-mini-title-row strong {
  font-size: 1rem;
}

#upcoming24hCard .appointment-time-chip,
#upcoming24hCard .appointment-mode-chip,
#upcoming24hCard .appointment-countdown-chip {
  font-size: 0.82rem;
  padding: 3px 7px;
}

#upcoming24hCard .appointment-mini-meta span,
#upcoming24hCard .appointment-countdown-row {
  font-size: 0.95rem;
  line-height: 1.2;
}

.upcoming-compact-item {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px 8px;
  background: var(--card-bg-soft);
  border-left-width: 1px;
}

.upcoming-compact-main {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: space-between;
}

.upcoming-compact-main strong {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.2;
}

.upcoming-kind-tag {
  font-size: 0.68rem;
  padding: 2px 6px;
}

.upcoming-compact-sub {
  margin-top: 3px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  flex-wrap: wrap;
}

.upcoming-compact-sub .meta {
  margin: 0;
  font-size: 0.8rem;
}

.upcoming-awareness-tag {
  background: linear-gradient(135deg, var(--magenta), var(--cyan));
  color: #fff;
  border: none;
  font-size: 0.7rem;
  padding: 2px 7px;
  font-weight: 700;
}

@media (max-width: 1100px) {
  .today-focus-grid {
    grid-template-columns: 1fr;
  }
  .today-focus-card-grid,
  .today-focus-step-pill-row {
    grid-template-columns: 1fr;
  }
  .momentum-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .momentum-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .home-mini-widget-grid.home-mini-widget-grid-five,
  .home-mini-widget-grid.home-mini-widget-grid-six {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .routine-window-grid {
    grid-template-columns: 1fr;
  }
}

.home-trigger-toggle-wrap {
  display: inline-flex;
  align-items: center;
}

.home-trigger-toggle {
  color: var(--card-text);
  gap: 4px;
}

.portfolio-overview-card {
  margin-bottom: 0;
}

.assignment-allocation-card .card-collapsible-body {
  margin-top: 8px;
}

.portfolio-overview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.portfolio-overview-head h2 {
  margin: 0;
}

.portfolio-overview-metrics {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.portfolio-layout {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}

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

.portfolio-layout > .card {
  width: 100%;
}

#assignmentList,
#submissionList {
  width: 100%;
  max-height: none;
  overflow: visible;
  display: grid;
  gap: 10px;
}

#assignmentList > li,
#submissionList > li {
  margin-bottom: 0;
}

.tab-panel[data-panel="portfolio"].active {
  display: grid;
  gap: 14px;
}

.tab-panel[data-panel="portfolio"] .card h2 {
  margin-top: 0;
  margin-bottom: 8px;
}

.tab-panel[data-panel="portfolio"] .muted {
  margin-top: 0;
  margin-bottom: 8px;
}

.tab-panel[data-panel="portfolio"] .admin-client-table {
  table-layout: fixed;
}

.tab-panel[data-panel="portfolio"] .admin-client-table th,
.tab-panel[data-panel="portfolio"] .admin-client-table td {
  vertical-align: top;
}

.tab-panel[data-panel="portfolio"] .admin-client-table td {
  white-space: normal;
}

.tab-panel[data-panel="portfolio"] .admin-portfolio-card {
  width: 100%;
  min-height: 0;
  position: relative;
  overflow: visible;
}

.tab-panel[data-panel="portfolio"] .admin-portfolio-card .admin-client-table-wrap {
  height: auto;
  max-height: none;
  overflow-x: auto;
  overflow-y: visible;
}

.portfolio-item-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  background: var(--card-bg-soft);
}

.portfolio-row {
  position: relative;
  border-radius: 14px;
  border: 1px solid var(--border);
  padding: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.18));
  box-shadow: 0 8px 20px rgba(12, 22, 44, 0.08);
  overflow: hidden;
  width: 100%;
}

.portfolio-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  border-radius: 14px 0 0 14px;
  background: linear-gradient(180deg, #b52555 0%, #0077cb 52%, #00a499 100%);
  opacity: 0.95;
}

.portfolio-row.is-completed::before {
  background: linear-gradient(180deg, #00a499 0%, #0077cb 100%);
}

.portfolio-row-head,
.portfolio-row-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.portfolio-row-head strong {
  font-size: 1.02rem;
}

.portfolio-row-tags {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}

.portfolio-status-tag {
  background: linear-gradient(120deg, #b52555, #8f2f8e) !important;
  border: none !important;
  color: #ffeef5 !important;
  font-weight: 800;
}

.portfolio-status-assigned {
  background: linear-gradient(120deg, #0077cb, #2a8fcf) !important;
}

.portfolio-status-needs-revision {
  background: linear-gradient(120deg, #b52555, #8f2f8e) !important;
}

.portfolio-status-submitted {
  background: linear-gradient(120deg, #1f2a44, #30507f) !important;
}

.portfolio-status-completed {
  background: linear-gradient(120deg, #00a499, #1b9f8e) !important;
}

.portfolio-status-generic {
  background: linear-gradient(120deg, #4f6282, #385279) !important;
}

.portfolio-score-tag,
.portfolio-deadline-tag {
  border: none !important;
  font-weight: 800;
  color: #eef8ff !important;
}

.portfolio-score-tag {
  background: linear-gradient(120deg, #0077cb, #1b8fd0) !important;
}

.portfolio-deadline-tag {
  background: linear-gradient(120deg, #00a499, #1c9db5) !important;
  color: #e9fffb !important;
}

.portfolio-deadline-open {
  background: linear-gradient(120deg, #00a499, #1c9db5) !important;
}

.portfolio-deadline-soon {
  background: linear-gradient(120deg, #0077cb, #2a8fcf) !important;
}

.portfolio-deadline-overdue {
  background: linear-gradient(120deg, #b52555, #8f2f8e) !important;
}

.portfolio-deadline-complete {
  background: linear-gradient(120deg, #00a499, #1b9f8e) !important;
}

.tab-panel[data-panel="portfolio"] .portfolio-overview-metrics .tag {
  background: linear-gradient(120deg, #0077cb, #1b8fd0) !important;
  color: #eef8ff !important;
  border: none !important;
}

.portfolio-row-body {
  margin-top: 8px;
  margin-bottom: 10px;
  line-height: 1.48;
}

.portfolio-row-link {
  font-weight: 700;
  text-decoration: none;
}

.portfolio-row-link:hover,
.portfolio-row-link:focus {
  text-decoration: none;
}

.portfolio-action-btn {
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 700;
  border: none;
  background: linear-gradient(120deg, #b52555, #0077cb, #00a499);
  color: #f3fbff;
  box-shadow: 0 6px 14px rgba(12, 36, 78, 0.22);
}

.portfolio-action-btn:hover {
  filter: brightness(1.04);
  box-shadow: 0 8px 16px rgba(12, 36, 78, 0.28);
}

.portfolio-minimal-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.portfolio-row-overdue {
  border-color: rgba(181, 37, 85, 0.68) !important;
  box-shadow: 0 0 0 1px rgba(181, 37, 85, 0.35), 0 12px 22px rgba(104, 18, 47, 0.28);
  background: linear-gradient(180deg, rgba(181, 37, 85, 0.12), rgba(181, 37, 85, 0.04));
}

body[data-theme="dark"] .portfolio-row {
  background: linear-gradient(180deg, rgba(19, 39, 72, 0.86), rgba(14, 30, 57, 0.92));
  border-color: rgba(112, 154, 204, 0.36);
  box-shadow: 0 10px 20px rgba(3, 10, 26, 0.42);
}

body[data-theme="dark"] .portfolio-status-tag {
  background: linear-gradient(120deg, #b52555, #8f2f8e);
  color: #ffeef5;
}

body[data-theme="dark"] .portfolio-score-tag,
body[data-theme="dark"] .portfolio-deadline-tag {
  color: #eef8ff;
}

body[data-theme="dark"] .portfolio-score-tag {
  background: linear-gradient(120deg, #0077cb, #1b8fd0);
}

body[data-theme="dark"] .portfolio-deadline-tag {
  background: linear-gradient(120deg, #00a499, #1c9db5);
  color: #e9fffb;
}

body[data-theme="dark"] .portfolio-action-btn {
  border: none;
  background: linear-gradient(120deg, #b52555, #0077cb, #00a499);
  color: #f2fbff;
}

.care-goals-overview-card {
  margin-bottom: 12px;
}

.care-goals-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.care-goal-tracker-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.care-goal-metric {
  font-weight: 700;
}

.care-goal-progress-track {
  width: 100%;
  height: 12px;
  border-radius: 999px;
  background: rgba(30, 50, 85, 0.18);
  overflow: hidden;
  margin-top: 10px;
  margin-bottom: 8px;
}

#trackerGoalProgress.care-goal-summary-spacing,
#trackerGoalProgress {
  margin-top: 6px;
  margin-bottom: 10px;
  border: none;
  background: transparent;
  padding: 0;
}

.care-goal-snapshot-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.care-goal-snapshot-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px 10px;
  background: linear-gradient(135deg, var(--card-bg-soft), var(--card-bg));
  display: grid;
  gap: 4px;
  align-items: center;
  justify-items: center;
  text-align: center;
}

.care-goal-snapshot-card span {
  font-size: 0.82rem;
  color: var(--muted);
}

.care-goal-snapshot-card strong {
  font-size: 0.98rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--card-text);
}

.care-goal-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #b52555 0%, #0077cb 55%, #00a499 100%);
  transition: width 220ms ease;
}

.care-goal-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#carePlanListClient {
  max-height: none;
  overflow: visible;
}

.care-goal-item {
  border: 1px solid rgba(31, 42, 68, 0.18);
  border-left: 4px solid #0077cb;
  border-radius: 12px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.45);
}

body[data-theme="dark"] .care-goal-item {
  background: rgba(16, 31, 58, 0.62);
  border-color: rgba(158, 180, 203, 0.3);
}

.care-goal-row-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 6px;
}

.care-goal-row-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.care-goal-source-tag {
  background: linear-gradient(120deg, rgba(0, 119, 203, 0.18), rgba(0, 164, 153, 0.18));
}

.care-goal-due-tag {
  background: linear-gradient(120deg, rgba(124, 132, 184, 0.18), rgba(0, 119, 203, 0.18));
}

.goal-due-overdue {
  background: linear-gradient(120deg, rgba(181, 37, 85, 0.27), rgba(181, 37, 85, 0.15));
}

.goal-due-today {
  background: linear-gradient(120deg, rgba(181, 37, 85, 0.2), rgba(0, 119, 203, 0.17));
}

.goal-status-active {
  background: linear-gradient(120deg, rgba(0, 119, 203, 0.22), rgba(0, 164, 153, 0.18));
}

.goal-status-completed {
  background: linear-gradient(120deg, rgba(0, 164, 153, 0.25), rgba(0, 119, 203, 0.16));
}

.goal-status-proposed {
  background: linear-gradient(120deg, rgba(124, 132, 184, 0.28), rgba(0, 119, 203, 0.14));
}

.care-goal-progress-wrap {
  margin-top: 8px;
}

.care-goal-progress-wrap label {
  display: block;
  font-weight: 700;
  margin-bottom: 4px;
}

.care-goal-progress-wrap input[type='range'] {
  width: 100%;
}

.care-goal-actions {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.care-goal-visual-card {
  margin-top: 12px;
}

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

.care-goal-visual-panel {
  border: 1px solid rgba(31, 42, 68, 0.18);
  border-radius: 12px;
  padding: 10px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.48), rgba(227, 235, 244, 0.56));
  min-height: 170px;
}

.care-goal-visual-panel h3 {
  margin: 0 0 8px;
  font-size: 0.94rem;
}

.care-goal-visual-list {
  display: grid;
  gap: 8px;
}

.care-goal-visual-row {
  display: grid;
  grid-template-columns: 130px 1fr auto;
  align-items: center;
  gap: 8px;
}

.care-goal-visual-label {
  font-weight: 700;
  font-size: 0.84rem;
}

.care-goal-visual-track {
  position: relative;
  height: 18px;
  border-radius: 999px;
  background: rgba(31, 42, 68, 0.14);
  overflow: hidden;
  border: 1px solid rgba(31, 42, 68, 0.12);
  min-width: 230px;
}

.care-goal-visual-fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  transition: width 240ms ease;
}

.care-goal-fill-completed { background: linear-gradient(90deg, #00a499, #0077cb); }
.care-goal-fill-active { background: linear-gradient(90deg, #0077cb, #7c84b8); }
.care-goal-fill-overdue { background: linear-gradient(90deg, #b52555, #7c84b8); }
.care-goal-fill-duetoday { background: linear-gradient(90deg, #b52555, #0077cb); }
.care-goal-fill-duesoon { background: linear-gradient(90deg, #7c84b8, #00a499); }
.care-goal-fill-ontrack { background: linear-gradient(90deg, #00a499, #1bb7a9); }
.care-goal-fill-low { background: linear-gradient(90deg, #b52555, #7c84b8); }
.care-goal-fill-mid { background: linear-gradient(90deg, #0077cb, #7c84b8); }
.care-goal-fill-high { background: linear-gradient(90deg, #00a499, #0077cb); }

.care-goal-visual-value {
  font-size: 0.84rem;
  font-weight: 700;
  white-space: nowrap;
}

.care-goal-visual-track-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.76rem;
  font-weight: 800;
  color: #1f2a44;
  pointer-events: none;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
}

body[data-theme="dark"] .care-goal-visual-track-label {
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
}

.resource-library-controls {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

#resourceSearchInput {
  min-width: 320px;
  flex: 1 1 360px;
}

.resource-filter-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.resource-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}

.resource-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
  background: var(--card-bg-soft);
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 6px;
}

.resource-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.resource-card-actions {
  margin-top: 6px;
  min-height: 34px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.resource-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 122px;
  height: 32px;
  border-radius: 999px;
  padding: 0 12px;
  font-weight: 700;
  font-size: 0.84rem;
  text-decoration: none;
  color: #f5fbff;
  background: linear-gradient(120deg, #b52555, #0077cb, #00a499);
  box-shadow: 0 4px 10px rgba(15, 38, 74, 0.2);
}

.resource-action-btn:hover {
  filter: brightness(1.04);
}

#resourceSummary {
  margin-bottom: 10px;
}

.resource-table-wrap {
  overflow-x: auto;
}

.resource-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 680px;
}

.resource-table th,
.resource-table td {
  border-bottom: 1px solid var(--border);
  text-align: left;
  padding: 8px;
  font-size: 0.92rem;
}

.resource-table th {
  font-size: 0.84rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

body[data-theme="dark"] .care-goal-visual-panel {
  border-color: rgba(158, 180, 203, 0.34);
  background: linear-gradient(145deg, rgba(16, 31, 58, 0.84), rgba(22, 45, 82, 0.88));
}

@media (max-width: 1080px) {
  .care-goal-visual-grid {
    grid-template-columns: 1fr;
  }
}

.care-goal-ai-box {
  margin-top: 10px;
  border: 1px solid rgba(31, 42, 68, 0.2);
  border-radius: 12px;
  padding: 10px;
  background: linear-gradient(135deg, rgba(0, 119, 203, 0.08), rgba(0, 164, 153, 0.08));
}

#carePlanGoalInput {
  min-height: 48px;
  font-size: 1.02rem;
}

.care-goal-ai-box h3 {
  margin: 0 0 6px;
  font-size: 0.98rem;
}

.care-goal-chip-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.care-goal-suggestion-chip {
  border: none;
  border-radius: 999px;
  padding: 7px 11px;
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
  color: #f4fbff;
  background: linear-gradient(120deg, #b52555, #0077cb, #00a499);
}

.care-goal-suggestion-chip:hover {
  filter: brightness(1.05);
}

body[data-theme="dark"] .care-goal-ai-box {
  border-color: rgba(158, 180, 203, 0.34);
  background: linear-gradient(135deg, rgba(16, 31, 58, 0.84), rgba(15, 37, 69, 0.88));
}

.portfolio-submission-modal-card {
  width: min(760px, 94vw);
}

#portfolioSubmissionModalEntry,
#portfolioSubmissionModalFeedback,
#portfolioSubmissionModalSupport {
  white-space: pre-wrap;
}

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

.assignment-workspace-shell {
  display: grid;
  gap: 12px;
}

.assignment-editor-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(300px, 0.9fr);
  gap: 14px;
  align-items: stretch;
}

.assignment-editor-layout.task-mode {
  grid-template-columns: minmax(0, 1fr);
}

.assignment-workspace-card {
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--card-bg-soft);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.assignment-guidance-card {
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--card-bg-soft);
  position: sticky;
  top: 12px;
  display: grid;
  gap: 10px;
  height: 100%;
}

.assignment-guidance-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.assignment-guidance-content {
  display: grid;
  gap: 10px;
}

.assignment-guidance-toggle {
  min-width: 34px;
  min-height: 34px;
  padding: 0;
  font-size: 1rem;
  line-height: 1;
}

.assignment-guidance-reopen {
  position: fixed;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  min-width: 32px;
  min-height: 46px;
  border-radius: 10px 0 0 10px;
  padding: 0;
  font-size: 1rem;
  line-height: 1;
}

.assignment-header-title {
  color: #ffffff !important;
  font-weight: 800;
  font-size: 1.55rem;
  line-height: 1.15;
}

.assignment-top-brief h2 {
  margin: 0;
}

.assignment-top-brief p {
  margin: 0 0 8px;
}

#assignmentSummaryBrief,
#assignmentSummaryBrief.muted {
  color: var(--card-text);
  opacity: 1;
}

.assignment-top-brief-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.assignment-brief {
  display: grid;
  gap: 4px;
  margin-bottom: 4px;
}

.assignment-workspace-card .assignment-brief {
  display: none;
}

.assignment-brief h2 {
  margin: 0;
}

.assignment-brief p {
  margin: 0;
}

.assignment-brief p:empty {
  display: none;
}

.assignment-section-label {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #1f2a44;
}

.assignment-brief-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  margin-left: auto;
  max-width: min(68%, 720px);
}

.assignment-lock-banner {
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 700;
  color: #ffeef5;
  background: linear-gradient(120deg, #b52555, #8f2f8e);
  border: 1px solid rgba(181, 37, 85, 0.42);
  margin-bottom: 10px;
}

.assignment-format-toolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 0;
}

#assignmentWorkspaceForm {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 auto;
}

.assignment-editor-layout.task-mode #assignmentTaskFormCard {
  width: 100%;
}

.assignment-editor-layout.task-mode #assignmentTaskFormFields.metric-grid {
  grid-template-columns: minmax(0, 1fr);
}

.assignment-format-toolbar .small-btn {
  min-height: 34px;
  min-width: 42px;
}

.assignment-format-toolbar .small-btn.is-active {
  background: linear-gradient(120deg, #00a499, #0077cb) !important;
  color: #ffffff !important;
  border-color: rgba(0, 119, 203, 0.58) !important;
  box-shadow: 0 0 0 2px rgba(0, 164, 153, 0.2);
}

#assignmentContent {
  min-height: 420px;
  resize: vertical;
}

.assignment-rich-editor {
  min-height: 420px;
  flex: 1 1 auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--input-bg);
  color: var(--card-text);
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  overflow: auto;
  resize: vertical;
}

.assignment-rich-editor:focus {
  outline: 2px solid rgba(0, 119, 203, 0.3);
  outline-offset: 0;
}

body[data-theme="dark"] .assignment-rich-editor {
  background: #1b2d4e;
  color: #ffffff;
}

.assignment-submit-row {
  gap: 10px;
}

.assignment-submit-row button:last-child {
  flex: 1 1 auto;
}

.assignment-feedback-trail {
  margin-top: 10px;
  display: grid;
  gap: 10px;
}

.assignment-feedback-trail h3 {
  margin: 0;
}

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

.assignment-feedback-history-item {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
  background: var(--card-bg-soft);
}

.assignment-feedback-history-head {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 8px;
}

.assignment-feedback-history-body {
  line-height: 1.45;
}

.assignment-guidance-card h3 {
  margin-top: 0;
  margin-bottom: 8px;
}

.assignment-editor-layout.guidance-collapsed {
  grid-template-columns: minmax(0, 1fr);
}

.assignment-editor-layout.guidance-collapsed .assignment-guidance-card {
  display: none;
}

.assignment-guidance-objective {
  margin: 0 0 8px;
  font-size: 0.88rem;
  font-weight: 700;
  opacity: 0.95;
}

#assignmentLiveFeedback {
  min-height: 0;
  padding: 4px 10px;
  line-height: 1.35;
}

#assignmentLiveFeedbackText {
  margin: 0;
  line-height: 1.35;
  white-space: normal;
}

.assignment-guidance-tips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.assignment-metrics-panel {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.42);
}

.assignment-metrics-panel h3 {
  margin: 0 0 8px;
  font-size: 1rem;
}

.assignment-recent-panel {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.42);
  display: grid;
  gap: 8px;
}

.assignment-recent-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.assignment-recent-head h3 {
  margin: 0;
  font-size: 1rem;
}

.assignment-recent-list {
  display: grid;
  gap: 8px;
}

.assignment-recent-row {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
  background: var(--card-bg-soft);
  display: grid;
  gap: 6px;
}

.assignment-recent-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.assignment-recent-row-title {
  font-weight: 700;
}

.assignment-recent-row-meta {
  font-size: 0.86rem;
}

.assignment-history-sections {
  display: grid;
  gap: 10px;
}

.assignment-history-sections h4 {
  margin: 0 0 6px;
}

.assignment-live-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.assignment-metric {
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.45);
  border-radius: 10px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.assignment-metric span {
  font-size: 0.82rem;
  opacity: 0.85;
}

.assignment-metric strong {
  font-size: 0.95rem;
}

.assignment-progress-modal-card,
.assignment-submit-feedback-card {
  width: min(760px, 94vw);
}

.assignment-submit-progress-track {
  width: 100%;
  height: 12px;
  border-radius: 999px;
  background: rgba(31, 42, 68, 0.18);
  overflow: hidden;
  margin-top: 6px;
}

.assignment-submit-progress-fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #00a499 0%, #0077cb 58%, #b52555 100%);
  transition: width 180ms ease;
}

.assignment-workspace-meta {
  margin-top: -2px;
  margin-bottom: 8px;
}

.assignment-back-link {
  font-weight: 700;
}

body[data-theme="dark"] .assignment-workspace-card {
  background: linear-gradient(180deg, rgba(19, 39, 72, 0.88), rgba(13, 29, 57, 0.94));
  border-color: rgba(112, 154, 204, 0.35);
}

body[data-theme="dark"] .assignment-guidance-card {
  background: linear-gradient(180deg, rgba(19, 39, 72, 0.88), rgba(13, 29, 57, 0.94));
  border-color: rgba(112, 154, 204, 0.35);
}

body[data-theme="dark"] .assignment-metrics-panel {
  background: rgba(16, 31, 58, 0.62);
  border-color: rgba(112, 154, 204, 0.33);
}

body[data-theme="dark"] .assignment-recent-panel {
  background: rgba(16, 31, 58, 0.62);
  border-color: rgba(112, 154, 204, 0.33);
}

body[data-theme="dark"] .assignment-recent-row {
  background: rgba(16, 31, 58, 0.62);
  border-color: rgba(112, 154, 204, 0.33);
}

body[data-theme="dark"] .assignment-section-label {
  color: #dcecff;
}

body[data-theme="dark"] .assignment-metric {
  background: rgba(16, 31, 58, 0.62);
  border-color: rgba(112, 154, 204, 0.33);
}

body[data-theme="dark"] .assignment-feedback-history-item {
  background: rgba(16, 31, 58, 0.62);
  border-color: rgba(112, 154, 204, 0.33);
}

body[data-theme="dark"] .assignment-submit-progress-track {
  background: rgba(158, 180, 203, 0.2);
}

@media (max-width: 1120px) {
  .assignment-editor-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .assignment-guidance-card {
    position: static;
  }
  .assignment-guidance-reopen {
    right: 4px;
    min-width: 30px;
    min-height: 42px;
  }
}

/* Home page: enforce uniform spacing between all top-level containers. */
.tab-panel[data-panel="home"].active {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-flow: row;
  align-items: start;
  position: relative;
  row-gap: 10px !important;
  column-gap: 10px !important;
  gap: 10px !important;
  align-content: start;
}

.tab-panel[data-panel="home"].active > section,
.tab-panel[data-panel="home"].active > article,
.tab-panel[data-panel="home"].active > div {
  margin: 0;
}

.tab-panel[data-panel="home"].active .home-stack-card {
  display: block !important;
  width: 100% !important;
  inline-size: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  position: static !important;
  float: none !important;
  clear: both !important;
  transform: none !important;
  writing-mode: horizontal-tb !important;
  margin: 0 !important;
}

.tab-panel[data-panel="home"].active .home-stack-card:last-of-type {
  margin: 0 !important;
}

/* Defensive guard: keep Home cards readable even if browser reader/content scripts inject styles. */
.tab-panel[data-panel="home"].active [data-home-draggable],
.tab-panel[data-panel="home"].active [data-home-draggable] * {
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  direction: ltr !important;
  transform: none !important;
  rotate: 0deg !important;
  column-count: initial !important;
  column-width: auto !important;
  white-space: normal !important;
  word-break: normal !important;
}

.tab-panel[data-panel="home"].active .layout {
  row-gap: 10px !important;
  column-gap: 0 !important;
  gap: 10px !important;
  margin-bottom: 0;
}

.tab-panel[data-panel="home"].active .layout > .card,
.tab-panel[data-panel="home"].active .layout > .home-draggable-section {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  writing-mode: horizontal-tb !important;
}

.tab-panel[data-panel="home"].active.home-template-structured [data-home-draggable] {
  min-height: 0 !important;
  height: auto !important;
}

.tab-panel[data-panel="home"].active.home-template-structured [data-home-draggable] .advice-box,
.tab-panel[data-panel="home"].active.home-template-structured [data-home-draggable] .advice-box > * {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.tab-panel[data-panel="home"].active .card,
.tab-panel[data-panel="home"].active .home-draggable-section,
.tab-panel[data-panel="home"].active .metrics {
  margin: 0 !important;
}

.tab-panel[data-panel="home"].active [data-home-draggable] {
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
  display: block !important;
  width: 100% !important;
  inline-size: 100% !important;
  block-size: auto !important;
  height: auto !important;
  max-width: 100% !important;
  float: none !important;
  position: static !important;
  transform: none !important;
  clear: both !important;
  writing-mode: horizontal-tb !important;
}

#homeLiveSnapshotCard,
#homeJustForTodayCard,
#quoteOfHourCard,
#homeFeedbackCard,
#appointmentsCard,
#cravingForecastCard,
#triggerPatternCard,
#recoveryMomentumCard,
#upcoming24hCard,
#routineWindowCard,
#dailyWinsCard,
#appointmentReadinessCard {
  margin: 0 !important;
}

#homeLiveSnapshotCard {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
}

#homeJustForTodayCard {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
}

#quoteOfHourCard {
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
}

#homeFeedbackCard {
  grid-column: 1 / 4 !important;
  grid-row: 4 / span 2 !important;
}

#recoveryMomentumCard {
  grid-column: 4 / 5 !important;
  grid-row: 4 !important;
}

#dailyWinsCard {
  grid-column: 4 / 5 !important;
  grid-row: 5 !important;
}

#appointmentsCard {
  grid-column: 1 / 3 !important;
  grid-row: 6 !important;
  display: flex !important;
  flex-direction: column;
  align-self: stretch;
}

#upcoming24hCard {
  grid-column: 3 / 5 !important;
  grid-row: 6 !important;
  display: flex !important;
  flex-direction: column;
  align-self: stretch;
}

#cravingForecastCard {
  grid-column: 1 / 4 !important;
  grid-row: 7 !important;
}

#triggerPatternCard {
  grid-column: 4 / 5 !important;
  grid-row: 7 !important;
}

#routineWindowCard {
  grid-column: 1 / -1 !important;
  grid-row: 8 !important;
}

#appointmentsCard #appointmentsCalendar,
#upcoming24hCard .advice-box {
  flex: 1 1 auto;
  min-height: 0;
}

#appointmentsCard,
#upcoming24hCard {
  min-height: 340px;
}

.home-lower-toggle-btn {
  min-height: 30px;
  padding: 0 10px;
  font-size: 0.76rem;
}

.panel-arrow-toggle {
  width: 26px;
  min-width: 26px;
  height: 26px;
  min-height: 26px;
  padding: 0;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.home-lower-strip {
  position: absolute;
  z-index: 28;
  top: 0;
  opacity: 0;
  transform: scale(0.96);
  border: 1px solid rgba(126, 156, 189, 0.7);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 8px 7px;
  min-height: 120px;
  width: 34px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  cursor: pointer;
  pointer-events: none;
  transition: opacity 2000ms cubic-bezier(0.22, 1, 0.36, 1), transform 2000ms cubic-bezier(0.22, 1, 0.36, 1);
}

.home-side-panel-strip {
  box-shadow: 0 6px 14px rgba(7, 18, 37, 0.16);
  transition: opacity 2000ms cubic-bezier(0.22, 1, 0.36, 1), transform 2000ms cubic-bezier(0.22, 1, 0.36, 1), filter 220ms ease, box-shadow 220ms ease;
}

.home-side-panel-strip:hover,
.home-side-panel-strip:focus-visible {
  filter: brightness(1.08) saturate(1.06);
  box-shadow: 0 8px 18px rgba(7, 18, 37, 0.24);
}

:root {
  --side-panel-tab-offset: 40px;
}

/* Reusable side-panel expansion helpers for current and future tabs. */
.panel-expand-after-left {
  margin-left: 0 !important;
  padding-left: calc(14px + var(--side-panel-tab-offset)) !important;
  justify-self: stretch !important;
  box-sizing: border-box !important;
}

.panel-expand-after-right {
  margin-right: 0 !important;
  padding-right: calc(14px + var(--side-panel-tab-offset)) !important;
  justify-self: stretch !important;
  box-sizing: border-box !important;
}

.home-lower-strip.is-visible {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.home-lower-strip-left {
  left: -1px;
  border-left: 0;
  border-radius: 0 10px 10px 0;
  background: linear-gradient(180deg, #b32767 0%, #8e3ca6 55%, #365eaf 100%);
  border-color: rgba(179, 39, 103, 0.62);
}

.home-lower-strip-right {
  right: -1px;
  border-right: 0;
  border-radius: 10px 0 0 10px;
  background: linear-gradient(180deg, #0b8acb 0%, #2a6fc4 55%, #0f5a99 100%);
  border-color: rgba(11, 138, 203, 0.62);
}

body[data-theme="dark"] .home-lower-strip {
  color: #ffffff;
}

body[data-theme="dark"] .home-lower-strip-left {
  background: linear-gradient(180deg, #8f1f52 0%, #6f2d84 55%, #27498c 100%);
  border-color: rgba(151, 66, 123, 0.62);
}

body[data-theme="dark"] .home-lower-strip-right {
  background: linear-gradient(180deg, #0a6796 0%, #205797 55%, #0f4579 100%);
  border-color: rgba(72, 133, 185, 0.62);
}

.home-right-rail-toggle-btn {
  min-height: 30px;
  padding: 0 10px;
  font-size: 0.76rem;
}

.home-right-rail-toggle-btn.panel-arrow-toggle,
.home-lower-toggle-btn.panel-arrow-toggle {
  width: 26px;
  min-width: 26px;
  height: 26px;
  min-height: 26px;
  padding: 0;
  font-size: 0.95rem;
}

.home-right-rail-strip {
  position: absolute;
  right: -1px;
  top: 0;
  transform: none;
  z-index: 30;
  border: 1px solid rgba(126, 156, 189, 0.7);
  border-right: 0;
  border-radius: 10px 0 0 10px;
  padding: 8px 7px;
  min-height: 120px;
  width: 34px;
  background: linear-gradient(180deg, #0b8acb 0%, #2a6fc4 55%, #0f5a99 100%);
  color: #ffffff;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
}

body[data-theme="dark"] .home-right-rail-strip {
  background: linear-gradient(180deg, #0a6796 0%, #205797 55%, #0f4579 100%);
  color: #ffffff;
  border-color: rgba(72, 133, 185, 0.62);
}

.tab-panel[data-panel="home"].active.home-right-rail-collapsed #homeFeedbackCard {
  grid-column: 1 / -1 !important;
  justify-self: stretch !important;
  transition: width 2000ms cubic-bezier(0.22, 1, 0.36, 1), padding-right 2000ms cubic-bezier(0.22, 1, 0.36, 1), opacity 2000ms cubic-bezier(0.22, 1, 0.36, 1), transform 2000ms cubic-bezier(0.22, 1, 0.36, 1);
}

.tab-panel[data-panel="home"].active.home-right-rail-collapsed #recoveryMomentumCard,
.tab-panel[data-panel="home"].active.home-right-rail-collapsed #dailyWinsCard {
  opacity: 0;
  transform: translateX(20px);
  pointer-events: none;
  height: 0 !important;
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-width: 0 !important;
  overflow: hidden;
  transition: opacity 2000ms cubic-bezier(0.22, 1, 0.36, 1), transform 2000ms cubic-bezier(0.22, 1, 0.36, 1), height 2000ms cubic-bezier(0.22, 1, 0.36, 1);
}

#recoveryMomentumCard,
#dailyWinsCard {
  transition: opacity 2000ms cubic-bezier(0.22, 1, 0.36, 1), transform 2000ms cubic-bezier(0.22, 1, 0.36, 1), height 2000ms cubic-bezier(0.22, 1, 0.36, 1);
}

#appointmentsCard,
#upcoming24hCard {
  transition: opacity 2000ms cubic-bezier(0.22, 1, 0.36, 1), transform 2000ms cubic-bezier(0.22, 1, 0.36, 1), height 2000ms cubic-bezier(0.22, 1, 0.36, 1), width 2000ms cubic-bezier(0.22, 1, 0.36, 1), padding-left 2000ms cubic-bezier(0.22, 1, 0.36, 1), padding-right 2000ms cubic-bezier(0.22, 1, 0.36, 1);
}

#cravingForecastCard,
#triggerPatternCard {
  transition: opacity 2000ms cubic-bezier(0.22, 1, 0.36, 1), transform 2000ms cubic-bezier(0.22, 1, 0.36, 1), height 2000ms cubic-bezier(0.22, 1, 0.36, 1), width 2000ms cubic-bezier(0.22, 1, 0.36, 1), padding-left 2000ms cubic-bezier(0.22, 1, 0.36, 1), padding-right 2000ms cubic-bezier(0.22, 1, 0.36, 1);
}

#recoveryMomentumCard,
#dailyWinsCard {
  display: flex !important;
  flex-direction: column;
  min-height: 0;
  height: auto;
  box-sizing: border-box;
}

#recoveryMomentumCard .advice-box,
#dailyWinsCard .advice-box {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  padding: 6px 8px;
}

#recoveryMomentumCard .momentum-metric-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 0;
  height: 100%;
}

#recoveryMomentumCard .momentum-metric-card {
  min-height: 0;
  padding: 6px 7px;
  border-radius: 10px;
}

#recoveryMomentumCard .momentum-metric-card > span {
  font-size: 0.68rem;
  line-height: 1.15;
}

#recoveryMomentumCard .momentum-metric-card > strong {
  margin-top: 3px;
  font-size: 1rem;
  line-height: 1.1;
}

#recoveryMomentumCard .momentum-mini-track {
  margin-top: 5px;
}

body[data-home-right-rail-mode="compact"] #recoveryMomentumCard .momentum-metric-card > span,
body[data-home-right-rail-mode="compact"] #dailyWinsCard .home-mini-widget-card > span {
  font-size: 0.64rem;
  line-height: 1.12;
}

body[data-home-right-rail-mode="compact"] #recoveryMomentumCard .momentum-metric-card > strong,
body[data-home-right-rail-mode="compact"] #dailyWinsCard .home-mini-widget-card > strong {
  font-size: 0.9rem;
  line-height: 1.05;
}

#recoveryMomentumCard .home-mini-widget-grid,
#dailyWinsCard .home-mini-widget-grid {
  gap: 6px;
}

#recoveryMomentumCard .home-mini-widget-card,
#dailyWinsCard .home-mini-widget-card {
  padding: 6px 7px;
  border-radius: 10px;
}

#recoveryMomentumCard .home-mini-widget-card > span,
#dailyWinsCard .home-mini-widget-card > span {
  font-size: 0.74rem;
  line-height: 1.2;
}

#recoveryMomentumCard .home-mini-widget-card > strong,
#dailyWinsCard .home-mini-widget-card > strong {
  font-size: 1.1rem;
  line-height: 1.15;
}

#recoveryMomentumCard .home-mini-widget-card .meta,
#dailyWinsCard .home-mini-widget-card .meta {
  font-size: 0.72rem;
  line-height: 1.2;
}

.tab-panel[data-panel="home"].active.home-appointments-minimised #appointmentsCard {
  opacity: 0;
  transform: translateX(-22px);
  pointer-events: none;
  height: 0 !important;
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-width: 0 !important;
  overflow: hidden;
}

.tab-panel[data-panel="home"].active.home-appointments-minimised #upcoming24hCard {
  grid-column: 1 / 5 !important;
  animation: homeLowerCardExpand 2000ms cubic-bezier(0.22, 1, 0.36, 1);
  justify-self: stretch !important;
}

.tab-panel[data-panel="home"].active.home-upcoming-minimised #upcoming24hCard {
  opacity: 0;
  transform: translateX(22px);
  pointer-events: none;
  height: 0 !important;
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-width: 0 !important;
  overflow: hidden;
}

.tab-panel[data-panel="home"].active.home-upcoming-minimised #appointmentsCard {
  grid-column: 1 / 5 !important;
  animation: homeLowerCardExpand 2000ms cubic-bezier(0.22, 1, 0.36, 1);
  justify-self: stretch !important;
}

.tab-panel[data-panel="home"].active.home-trigger-minimised #triggerPatternCard {
  opacity: 0;
  transform: translateX(22px);
  pointer-events: none;
  height: 0 !important;
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-width: 0 !important;
  overflow: hidden;
}

.tab-panel[data-panel="home"].active.home-trigger-minimised #cravingForecastCard {
  grid-column: 1 / 5 !important;
  animation: homeLowerCardExpand 2000ms cubic-bezier(0.22, 1, 0.36, 1);
  justify-self: stretch !important;
}

@keyframes homeLowerCardExpand {
  from {
    transform: scale(0.985);
    opacity: 0.92;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@media (max-width: 1180px) {
  #homeFeedbackCard,
  #recoveryMomentumCard,
  #dailyWinsCard {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    min-height: 0;
    height: auto;
  }
  #appointmentsCard,
  #upcoming24hCard,
  #cravingForecastCard,
  #triggerPatternCard {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    min-height: 0;
    height: auto;
  }
}

form { display: grid; gap: 8px; margin-bottom: 10px; }
input, textarea, select, button {
  border: 1px solid var(--border);
  border-radius: 10px;
  font: inherit;
  padding: 9px 10px;
  background: var(--input-bg);
  color: var(--card-text);
}
input::placeholder,
textarea::placeholder { color: #d7e5f8; opacity: 0.85; }
input::placeholder,
textarea::placeholder { color: #5f789a; opacity: 0.85; }
body[data-theme="dark"] input,
body[data-theme="dark"] textarea,
body[data-theme="dark"] select { background: #1b2d4e; color: #ffffff; }
body[data-theme="dark"] input::placeholder,
body[data-theme="dark"] textarea::placeholder { color: #d7e5f8; }

textarea { line-height: 1.55; }

.journal-wide form,
#journalTextWrap {
  width: 100%;
}

.journal-typed-grid {
  display: block;
}

#journalTextWrap {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.journal-compose-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.journal-compose-toolbar .small-btn {
  min-height: 28px;
  padding: 2px 8px;
}

.journal-editor {
  width: 100%;
  min-height: 320px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--input-bg);
  color: var(--card-text);
  padding: 10px 12px;
  box-sizing: border-box;
  line-height: 1.55;
  overflow: auto;
}

.journal-editor:focus {
  outline: none;
  border-color: rgba(0, 119, 203, 0.6);
  box-shadow: 0 0 0 2px rgba(0, 119, 203, 0.16);
}

.journal-editor:empty::before {
  content: attr(data-placeholder);
  color: #5f789a;
  opacity: 0.85;
  white-space: pre-line;
}

.journal-prompt-panel {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  background: var(--card-bg-soft);
  margin-top: 6px;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.journal-reflective-score {
  margin: 0 0 6px;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--card-text);
}

.journal-prompt-list {
  margin: 6px 0 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
  flex: 1;
  align-content: start;
}

.journal-prompt-list li {
  margin: 0;
  line-height: 1.5;
  color: var(--card-text);
}

body[data-theme="dark"] .journal-prompt-panel {
  background: #1b2d4b;
}

#journalEntryText {
  width: 100%;
  min-height: 320px;
  height: 100%;
  box-sizing: border-box;
}

#journalTypedEmotionLive {
  display: none !important;
  font-size: 1.05rem;
  font-weight: 700;
}

#journalTypedEmotionLive.tone-split {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

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

button {
  border: none;
  color: white;
  background: linear-gradient(120deg, var(--magenta), var(--cyan));
  cursor: pointer;
  font-weight: 700;
}

.small-btn {
  width: fit-content;
  padding: 6px 10px;
  font-size: 0.86rem;
}

.admin-item-actions .small-btn.active {
  background: linear-gradient(120deg, var(--magenta), var(--cyan));
  color: #fff;
}

.recurrence-fields {
  margin: 6px 0 4px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card-bg-soft);
}

.timeline-actions .small-btn.active {
  background: linear-gradient(120deg, var(--green), var(--cyan));
}

.journal-view-switch {
  margin: 4px 0 8px;
}

.journal-cards-subview {
  margin: 0 0 8px;
}

.journal-cards-subview.hidden {
  display: none;
}

.journal-date-group summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--card-text);
  margin-bottom: 8px;
}

.journal-date-group .journal-date-group-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}

.list {
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 360px;
  overflow: auto;
}

#appointmentUpcomingList.appointment-admin-list,
#appointmentPreviousList.appointment-admin-list {
  max-height: none;
  overflow: visible;
  display: grid;
  gap: 8px;
}

#appointmentUpcomingList.appointment-admin-list > li,
#appointmentPreviousList.appointment-admin-list > li {
  margin: 0;
}

.appointment-admin-item {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px 10px;
  background: var(--card-bg-soft);
}

.appointment-admin-item-compact {
  padding: 6px 8px;
}

.appointment-admin-compact-row {
  display: grid;
  grid-template-columns: minmax(160px, 1.2fr) minmax(180px, 1fr) minmax(130px, 1fr) minmax(280px, 1.4fr) auto;
  align-items: center;
  gap: 8px;
}

.appointment-admin-compact-row .meta {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.2;
}

.appointment-admin-compact-row .appointment-admin-tags {
  gap: 4px;
}

.appointment-admin-compact-row .appointment-admin-tags .tag {
  padding: 3px 7px;
  font-size: 0.74rem;
}

.appointment-admin-compact-actions {
  margin-top: 0;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 6px;
}

.appointment-admin-compact-actions .small-btn {
  min-height: 28px;
  padding: 0 8px;
  font-size: 0.76rem;
}

@media (max-width: 1280px) {
  .appointment-admin-compact-row {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .appointment-admin-compact-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

.appointment-admin-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

#appointmentOnlineFields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

#appointmentOnlineFields .small-btn {
  justify-self: start;
}

#appointmentOnlineFields input[name="online_link"] {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  font-size: 0.9rem;
  line-height: 1.25;
}

#appointmentWorkerSelect[multiple] {
  min-height: 130px;
  height: auto;
}

.appointment-admin-tags {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}

.appointment-admin-type-tag,
.appointment-admin-modality-tag,
.appointment-admin-worker-tag {
  border: none !important;
  color: #eef8ff !important;
  font-weight: 700;
}

.appointment-admin-type-tag {
  background: linear-gradient(120deg, #b52555, #8f2f8e) !important;
}

.appointment-admin-modality-tag {
  background: linear-gradient(120deg, #0077cb, #1b8fd0) !important;
}

.appointment-admin-worker-tag {
  background: linear-gradient(120deg, #00a499, #1b9f8e) !important;
}

.appointment-admin-attended-tag {
  background: linear-gradient(120deg, #00a499, #1b9f8e) !important;
  color: #eef8ff !important;
  border: none !important;
  font-weight: 700;
}

.appointment-admin-not-attended-tag {
  background: linear-gradient(120deg, #b52555, #8b1e44) !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: 700;
}

.appointment-admin-pending-tag {
  background: linear-gradient(120deg, #0077cb, #1f7ec6) !important;
  color: #eef8ff !important;
  border: none !important;
  font-weight: 700;
}

.tall-list { max-height: 600px; }
.tall-card .list { max-height: 520px; }
#journalList { max-height: none; overflow: visible; }
#cravingList { max-height: none; overflow: visible; }
#cravingPreviousList { max-height: none; overflow: visible; }

.craving-entries-card {
  min-height: 280px;
}

.craving-previous-card {
  min-height: 220px;
}

.journal-list-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}

.journal-list-cards > li {
  margin: 0;
}

.journal-entry-card {
  cursor: pointer;
}

.journal-entry-card .meta {
  margin-bottom: 6px;
}

.journal-entry-card .entry-preview {
  margin: 8px 0;
  line-height: 1.45;
}

.journal-entry-card .entry-feedback-preview {
  margin: 8px 0;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(158, 180, 203, 0.2);
  line-height: 1.45;
}

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

.journal-timeline-item {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: start;
}

.timeline-node {
  width: 12px;
  height: 12px;
  margin-top: 4px;
  border-radius: 999px;
  background: linear-gradient(140deg, #00A499, #0077CB);
}

.timeline-body {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  background: rgba(158, 180, 203, 0.16);
  display: grid;
  gap: 6px;
}

.journal-list-emotion,
.journal-list-calendar {
  display: grid;
  gap: 10px;
}

.journal-group-card h4,
.journal-calendar-day h4 {
  margin: 0 0 8px;
  font-size: 0.98rem;
}

.journal-group-row,
.journal-calendar-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px;
  margin-bottom: 6px;
  background: rgba(158, 180, 203, 0.12);
}

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

.journal-risk-item {
  display: grid;
  gap: 6px;
}

.journal-risk-item.risk-3 {
  border-color: #b52555;
}

.journal-risk-item.risk-2 {
  border-color: #0077CB;
}

.journal-risk-item.risk-1 {
  border-color: #00A499;
}

.journal-entry-drop {
  margin-top: 8px;
  border-top: 1px dashed var(--border);
  padding-top: 8px;
}

.journal-entry-drop summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--card-text);
}

.list li {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 8px;
  background: var(--card-bg-soft);
  color: var(--card-text);
}
body[data-theme="dark"] .list li { background: #1d2e4e; color: #ffffff; }

.list li .meta {
  color: var(--muted);
  font-size: 0.82rem;
}

.admin-item-actions {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.card-collapse-head,
.home-section-head {
  position: relative;
}

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

.card-collapse-toggle {
  margin-left: auto;
  min-width: 34px;
  min-height: 30px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: linear-gradient(135deg, #b52555, #0077CB);
  color: #fff;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.card-collapse-toggle:focus-visible {
  outline: 2px solid rgba(0, 119, 203, 0.55);
  outline-offset: 2px;
}

.card-collapsed > .card-collapsible-body {
  display: none;
}

.emr-template-prompt-input {
  width: 100%;
  min-height: 140px;
  resize: vertical;
}

.emr-template-ai-thread {
  margin-top: 10px;
  max-height: 280px;
  overflow: auto;
}

.emr-template-ai-thread .emr-ai-user {
  border-left: 4px solid #0077CB;
}

.emr-template-ai-thread .emr-ai-assistant {
  border-left: 4px solid #00A499;
}

.emr-template-preview-card {
  max-width: min(900px, 96vw);
}

.emr-template-preview-layout {
  display: grid;
  gap: 10px;
  max-height: min(64vh, 620px);
  overflow: auto;
  padding-right: 4px;
}

.emr-template-preview-layout.two-column {
  grid-template-columns: 1fr 1fr;
}

.emr-template-preview-layout.single-column,
.emr-template-preview-layout.stacked {
  grid-template-columns: 1fr;
}

.emr-template-preview-field {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  background: var(--card-bg-soft);
}

.emr-template-preview-field .meta {
  margin-top: 4px;
}

.admin-username-suggestions {
  margin-top: 6px;
}

.admin-username-suggestions .small-btn {
  min-height: 28px;
  padding: 4px 10px;
  font-size: 0.8rem;
}

.case-note-list {
  max-height: 520px;
}

.case-note-item {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
  background: linear-gradient(135deg, var(--card-bg-soft), var(--card-bg));
}

.case-note-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.case-note-body {
  white-space: pre-wrap;
  line-height: 1.45;
}

.advice-box {
  border: 1px solid var(--border);
  background: var(--card-bg-soft);
  color: var(--card-text);
  border-radius: 12px;
  padding: 12px;
  line-height: 1.7;
  white-space: pre-wrap;
}
body[data-theme="dark"] .advice-box { background: #1b2d4b; color: #ffffff; }
#homeFeedback {
  padding: 6px 12px 8px;
  background: linear-gradient(145deg, rgba(31, 42, 68, 0.06), rgba(0, 119, 203, 0.09));
  border: 1px solid rgba(0, 119, 203, 0.22);
  min-height: 0;
  flex: 1 1 auto;
  white-space: normal;
}

#homeJustForToday {
  padding: 8px 12px 10px;
  background: linear-gradient(125deg, rgba(181, 37, 85, 0.34), rgba(0, 119, 203, 0.36), rgba(0, 164, 153, 0.38));
  border: 1px solid rgba(0, 119, 203, 0.55);
  white-space: normal;
  transition: none;
  cursor: pointer;
}

#homeJustForToday .jft-date {
  margin: 0 0 8px;
}

#homeJustForToday .jft-title {
  margin-top: 10px;
  margin-bottom: 10px;
}

#homeJustForToday .jft-top-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

#homeJustForToday .jft-top-copy {
  min-width: 0;
}

#homeJustForToday .jft-mode-switch {
  display: inline-flex;
  gap: 6px;
  margin-bottom: 0;
  margin-left: auto;
  flex: 0 0 auto;
}

#homeJustForToday .jft-mode-switch .jft-tab-btn {
  padding: 4px 8px;
  font-size: 0.76rem;
}

#homeJustForToday .jft-preview {
  display: block;
  margin-top: 0;
  margin-bottom: 10px;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 160ms ease, transform 160ms ease, margin 160ms ease;
}

#homeJustForToday .jft-extra {
  display: block;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 160ms ease, transform 160ms ease, margin 160ms ease;
}

#homeJustForToday .jft-extra .jft-commitment {
  margin-top: 16px;
  padding-top: 10px;
  border-top: 1px solid rgba(31, 42, 68, 0.18);
  margin-bottom: 0;
}

#homeJustForToday .jft-collapsed-lastline {
  display: none;
  margin: 8px 0 0;
  line-height: 1.42;
}

#homeJustForToday .jft-content-fade {
  opacity: 1;
}

#homeJustForToday .jft-content-fade.jft-mode-fade {
  animation: jftModeFade 2000ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes jftModeFade {
  from {
    opacity: 0;
    transform: translateY(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#homeJustForToday .jft-toggle-hint {
  margin: 8px 0 0;
  text-align: center;
  font-size: 0.74rem;
  color: rgba(25, 40, 70, 0.8);
}

#homeJustForToday.is-collapsed {
  padding-top: 8px;
  padding-bottom: 8px;
}

#homeJustForToday.is-collapsed .jft-preview,
#homeJustForToday.is-collapsed .jft-extra {
  opacity: 0;
  transform: translateY(-4px);
  margin-top: 0;
  margin-bottom: 0;
  pointer-events: none;
  height: 0;
  overflow: hidden;
}

#homeJustForToday.is-collapsed .jft-title {
  margin-bottom: 0;
  margin-top: 2px;
}

#homeJustForToday.is-collapsed .jft-top-row {
  margin-bottom: 0;
}

#homeJustForToday.is-collapsed .jft-collapsed-lastline {
  display: block;
}

body[data-theme="dark"] #homeJustForToday .jft-toggle-hint {
  color: rgba(231, 239, 252, 0.85);
}

body[data-theme="dark"] #homeJustForToday .jft-extra .jft-commitment {
  border-top-color: rgba(231, 239, 252, 0.22);
}

#homeLiveSnapshotCard.home-live-snapshot-fixed {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  position: static !important;
  transform: none !important;
}

body[data-theme="dark"] #homeFeedback {
  background: linear-gradient(145deg, rgba(19, 39, 70, 0.75), rgba(13, 28, 50, 0.72));
  border-color: rgba(124, 173, 228, 0.35);
}

body[data-theme="dark"] #homeJustForToday {
  background: linear-gradient(125deg, rgba(94, 18, 60, 0.93), rgba(10, 75, 132, 0.95), rgba(6, 112, 102, 0.94));
  border-color: rgba(114, 224, 212, 0.62);
}

.snapshot-feedback {
  display: grid;
  gap: 10px;
}

.daily-overview {
  display: grid;
  gap: 10px;
}

.overview-focus-rail {
  display: block;
  margin: 0 0 6px;
}

.overview-focus-rail-track {
  width: 100%;
  height: 9px;
  border-radius: 999px;
  border: 1px solid rgba(31, 42, 68, 0.2);
  background: rgba(31, 42, 68, 0.08);
  overflow: hidden;
}

.overview-focus-rail-track i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #B52555 0%, #0077CB 60%, #00A499 100%);
}

.overview-progress-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 6px;
  padding: 0;
  margin-top: 4px;
  margin-bottom: 4px;
  border: none;
  border-radius: 0;
  background: transparent;
}

.overview-progress-cards {
  display: none;
}

.overview-step-card {
  border: 1px solid rgba(31, 42, 68, 0.2);
  background: rgba(31, 42, 68, 0.06);
  border-radius: 10px;
  padding: 6px 8px;
  display: grid;
  gap: 4px;
}

.overview-step-card-top {
  display: flex;
  align-items: center;
  gap: 6px;
}

.overview-step-card strong {
  font-size: 0.78rem;
  line-height: 1.2;
}

.overview-step-card.complete {
  background: rgba(0, 164, 153, 0.18);
  border-color: rgba(0, 164, 153, 0.42);
}

.overview-step-card.pending-amber {
  background: rgba(255, 179, 0, 0.18);
  border-color: rgba(255, 179, 0, 0.52);
}

.overview-step-card.pending-red {
  background: rgba(181, 37, 85, 0.2);
  border-color: rgba(181, 37, 85, 0.58);
}

/* Today's Focus compact mode: half width and below (half/third/quarter). */
#homeFeedbackCard[data-width-key="half"] #homeFeedback .overview-progress-strip,
#homeFeedbackCard[data-width-key="third"] #homeFeedback .overview-progress-strip,
#homeFeedbackCard[data-width-key="quarter"] #homeFeedback .overview-progress-strip {
  display: none;
}

#homeFeedbackCard[data-width-key="half"] #homeFeedback .overview-progress-cards,
#homeFeedbackCard[data-width-key="third"] #homeFeedback .overview-progress-cards,
#homeFeedbackCard[data-width-key="quarter"] #homeFeedback .overview-progress-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

#homeFeedbackCard[data-width-key="half"] #homeFeedback .snapshot-story,
#homeFeedbackCard[data-width-key="third"] #homeFeedback .snapshot-story,
#homeFeedbackCard[data-width-key="quarter"] #homeFeedback .snapshot-story {
  display: none;
}

#homeFeedbackCard[data-width-key="half"] #homeFeedbackActions,
#homeFeedbackCard[data-width-key="third"] #homeFeedbackActions,
#homeFeedbackCard[data-width-key="quarter"] #homeFeedbackActions {
  display: none;
}

.overview-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 5px 7px;
  border-radius: 999px;
  border: 1px solid rgba(31, 42, 68, 0.2);
  background: rgba(31, 42, 68, 0.06);
  color: var(--card-text);
  font-weight: 700;
  font-size: 0.78rem;
}

.overview-step-dot {
  width: auto;
  height: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  font-size: 0.78rem;
  font-weight: 800;
}

.overview-step-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.86rem;
  line-height: 1;
}

.overview-step.complete {
  background: rgba(0, 164, 153, 0.18);
  border-color: rgba(0, 164, 153, 0.42);
}

.overview-step.active {
  background: rgba(0, 119, 203, 0.2);
  border-color: rgba(0, 119, 203, 0.45);
}

.overview-step.pending {
  background: rgba(181, 37, 85, 0.15);
  border-color: rgba(181, 37, 85, 0.34);
}

.overview-step.pending-amber {
  background: rgba(255, 179, 0, 0.18);
  border-color: rgba(255, 179, 0, 0.52);
  color: #5c3c00;
}

.overview-step.pending-red {
  background: rgba(181, 37, 85, 0.2);
  border-color: rgba(181, 37, 85, 0.58);
  color: #6f1332;
}

.daily-overview-head {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-bottom: 0;
}

.overview-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 800;
  border: none;
  background: linear-gradient(120deg, #0077cb, #00a499);
  color: #eef8ff;
}
.overview-pill.outstanding {
  background: linear-gradient(120deg, #b52555, #8f2f8e);
}
.overview-pill.complete {
  background: linear-gradient(120deg, #00a499, #1c9db5);
}

body[data-theme="dark"] .overview-pill {
  background: linear-gradient(120deg, #0077cb, #00a499);
  color: #eef8ff;
}

body[data-theme="dark"] .overview-progress-strip {
  border: none;
  background: transparent;
}

body[data-theme="dark"] .overview-focus-rail-track {
  border-color: rgba(217, 234, 255, 0.25);
  background: rgba(217, 234, 255, 0.12);
}

body[data-theme="dark"] .overview-step {
  border-color: rgba(217, 234, 255, 0.28);
  background: rgba(217, 234, 255, 0.1);
  color: #ffffff;
}

body[data-theme="dark"] .overview-step.pending-amber {
  background: rgba(255, 179, 0, 0.24);
  border-color: rgba(255, 200, 80, 0.62);
  color: #fff3d6;
}

body[data-theme="dark"] .overview-step.pending-red {
  background: rgba(181, 37, 85, 0.34);
  border-color: rgba(235, 109, 153, 0.62);
  color: #ffe6ef;
}

body[data-theme="dark"] .overview-step-card {
  border-color: rgba(217, 234, 255, 0.28);
  background: rgba(217, 234, 255, 0.1);
  color: #ffffff;
}

body[data-theme="dark"] .overview-step-card.pending-amber {
  background: rgba(255, 179, 0, 0.24);
  border-color: rgba(255, 200, 80, 0.62);
  color: #fff3d6;
}

body[data-theme="dark"] .overview-step-card.pending-red {
  background: rgba(181, 37, 85, 0.34);
  border-color: rgba(235, 109, 153, 0.62);
  color: #ffe6ef;
}

.snapshot-intro {
  margin: 0;
  font-weight: 800;
  font-size: 1.02rem;
}
.snapshot-story {
  margin: 0;
  line-height: 1.74;
  border-top: none;
  padding-top: 2px;
  white-space: normal;
}

#homeFeedbackActions {
  margin-top: 10px;
  display: grid;
  gap: 8px;
}

#homeFeedbackActions:empty {
  display: none;
  margin: 0;
  padding: 0;
}

#homeCardExpandActions {
  margin: 0 0 8px;
}

#homeCardExpandActions:empty {
  display: none;
}

.snapshot-support {
  margin: 0;
  opacity: 0.95;
}

.snapshot-line {
  margin: 0;
  padding: 9px 0 0;
  border: none;
  border-top: 1px solid rgba(31, 42, 68, 0.18);
  border-radius: 0;
  background: transparent;
}

body[data-theme="dark"] .snapshot-line {
  border-top: 1px solid rgba(217, 234, 255, 0.22);
}
body[data-theme="dark"] .snapshot-story {
  border-top: none;
}

.snapshot-shortcut-row {
  display: grid;
  grid-template-columns: repeat(var(--shortcut-cols, 1), minmax(0, 1fr));
  gap: 8px;
  align-items: center;
}

.focus-shortcut-btn {
  width: 100%;
  min-height: 32px;
  padding: 0 12px;
  font-size: 0.82rem;
  font-weight: 800;
  border-radius: 999px;
  justify-content: center;
}

.focus-shortcut-btn.is-disabled,
.focus-shortcut-btn:disabled {
  background: linear-gradient(120deg, #a7b1bf, #8d98a9);
  color: #f7fbff;
  border-color: rgba(118, 128, 144, 0.58);
  cursor: not-allowed;
  box-shadow: none;
}

.snapshot-activity-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
  background: var(--card-bg-soft);
}

.snapshot-activity-info {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--card-text);
}

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

.trigger-pattern-list li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.trigger-icon {
  font-size: 1.05rem;
  line-height: 1;
}

.trigger-text {
  font-weight: 700;
}

.trigger-pattern-list .tag {
  margin-left: auto;
}

.paragraph-feedback p,
#journalFeedbackModalText p,
#entryModalText p {
  margin: 0 0 6px;
}

.paragraph-feedback p:last-child,
#journalFeedbackModalText p:last-child,
#entryModalText p:last-child {
  margin-bottom: 0;
}

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

.tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.74rem;
  margin-left: 4px;
  background: linear-gradient(120deg, #0077cb, #00a499);
  color: #eef8ff;
  border: none;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16);
}

.craving-tag {
  padding: 3px 10px;
  font-size: 0.74rem;
  letter-spacing: 0.2px;
  color: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

.craving-tag.tag-band-none {
  background: linear-gradient(120deg, #667792, #4c6182);
}

.craving-tag.tag-band-low {
  background: linear-gradient(120deg, #00a499, #1c9db5);
}

.craving-tag.tag-band-moderate {
  background: linear-gradient(120deg, #0077cb, #1f2a44);
  color: #eef8ff;
}

.craving-tag.tag-band-high {
  background: linear-gradient(120deg, #b52555, #30507f);
}

.craving-tag.tag-band-very-high {
  background: linear-gradient(120deg, #b52555, #1f2a44);
}

.craving-tag.tag-period {
  background: linear-gradient(120deg, #1F2A44 0%, #2d4f88 100%);
}

.craving-tag.tag-source.source-auto {
  background: linear-gradient(120deg, #00A499 0%, #0077CB 100%);
}

.craving-tag.tag-source.source-manual {
  background: linear-gradient(120deg, #0077CB 0%, #1F2A44 100%);
}

.craving-tag.tag-archived {
  background: linear-gradient(120deg, #4d5f7f 0%, #364a69 100%);
}

.view-switch {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.craving-filter-switch {
  margin-bottom: 0;
}

.craving-filter-row {
  flex-wrap: nowrap;
  overflow-x: auto;
  white-space: nowrap;
  gap: 6px;
  scrollbar-width: thin;
}

.view-switch .small-btn {
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--border);
  color: var(--dark-blue);
}

.view-switch .small-btn.active {
  background: linear-gradient(120deg, var(--cyan), var(--green));
  color: #ffffff;
}

.month-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 10px;
}

.month-nav strong {
  min-width: 190px;
  text-align: center;
  color: var(--card-text);
}

.craving-time-options {
  display: flex;
  gap: 14px;
  justify-content: space-between;
}

.craving-time-options label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card-bg-soft);
  color: var(--card-text);
  font-weight: 700;
  flex: 1 1 0;
  min-width: 0;
}

.craving-time-options .craving-time-checkbox {
  width: 18px;
  height: 18px;
}

.journal-entry-mode-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 0 0 10px;
}

.journal-entry-mode-buttons .small-btn {
  width: 100%;
  min-height: 124px;
  font-size: 1.52rem;
  padding: 24px 20px;
  font-weight: 800;
  letter-spacing: 0.3px;
  border-radius: 12px;
}

.journal-entry-mode-buttons.compact .small-btn {
  min-height: 62px;
  font-size: 1.02rem;
  padding: 12px 14px;
  letter-spacing: 0.1px;
}

.journal-entry-mode-buttons .small-btn.active {
  background: linear-gradient(120deg, var(--cyan), var(--green));
  color: #ffffff;
  border: 1px solid var(--border);
}

#journalSubmitBtn {
  display: block;
  width: 100%;
  min-height: 56px;
  margin: 12px auto 0;
  font-size: 1.08rem;
  border-radius: 12px;
}

@media (max-width: 720px) {
  .journal-entry-mode-buttons {
    grid-template-columns: 1fr;
  }
}

body[data-theme="dark"] .view-switch .small-btn {
  color: #eaf3ff;
}

.emotion-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--muted);
}

.emotion-picker label {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255,255,255,0.1);
  cursor: pointer;
}

.daily-checkin {
  margin-top: 10px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
  display: grid;
  justify-items: center;
  text-align: center;
}

.daily-checkin-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.voice-tools {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.voice-recorder {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
  background: var(--card-bg-soft);
}

.recorder-launcher {
  margin-top: 8px;
  padding: 0;
  background: transparent;
  border: 0;
}

.recorder-launcher .voice-tools {
  justify-content: flex-start;
}

.recorder-actions {
  justify-content: center;
  gap: 12px;
}

.recorder-device-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
}

.recorder-device-row select {
  min-width: 0;
}

.recorder-device-row-bottom {
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px solid rgba(0, 119, 203, 0.35);
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(181, 37, 85, 0.08), rgba(0, 119, 203, 0.08), rgba(0, 164, 153, 0.08));
}

.recorder-device-row-bottom label {
  font-weight: 700;
}

.recorder-actions #startJournalRecordBtn,
.recorder-actions #pauseJournalRecordBtn {
  padding: 12px 18px;
  font-size: 1.02rem;
  min-width: 180px;
  min-height: 52px;
  border-radius: 12px;
}

.recorder-stats {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 8px 0;
}

.recorder-live-emotion {
  margin: 8px 0 6px;
  text-align: center;
  font-size: 1.04rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--card-text);
}

.journal-recorder-prompt-panel {
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  margin: 8px 0 2px;
}

body[data-theme="dark"] .journal-recorder-prompt-panel {
  background: transparent;
}

#journalRecorderPromptPanel .journal-prompt-list {
  list-style: none;
  padding-left: 0;
}

#journalRecorderPromptPanel .journal-prompt-list li {
  position: relative;
  padding-left: 24px;
  margin: 0 0 6px;
}

#journalRecorderPromptPanel .journal-prompt-list li::before {
  position: absolute;
  left: 0;
  top: 0;
}

#journalRecorderPromptPanel .journal-prompt-list li:nth-child(1)::before {
  content: "🧠";
}

#journalRecorderPromptPanel .journal-prompt-list li:nth-child(2)::before {
  content: "💭";
}

#journalRecorderPromptPanel .journal-prompt-list li:nth-child(3)::before {
  content: "✅";
}

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

.recorder-footer #submitJournalRecordBtn {
  margin-left: auto;
}

#journalWaveform {
  display: block;
  width: 100%;
  height: 100px;
  margin: 10px 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(0,119,203,0.08), rgba(181,37,85,0.08));
}

.level-meter {
  width: 100%;
  height: 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(31, 42, 68, 0.12);
  overflow: hidden;
  margin: 10px 0;
}

#journalLevelFill {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--green), var(--cyan), var(--magenta));
  transition: width 80ms linear;
  box-shadow: 0 0 12px rgba(0, 164, 153, 0.45);
}

#journalRecordPreview {
  width: 100%;
  margin-top: 4px;
}

#journalSpeechWaveform {
  display: block;
  width: 100%;
  height: 90px;
  margin: 6px 0 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(31, 42, 68, 0.08);
}

#journalSpeechWaveform.hidden {
  display: none;
}

.slider-input-row {
  display: grid;
  grid-template-columns: 1fr 78px;
  gap: 10px;
  align-items: center;
}

.craving-infographic {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
  background: var(--card-bg-soft);
}

.craving-infographic-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.craving-scale {
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.2);
  overflow: hidden;
  margin-bottom: 8px;
}

#cravingScaleFill {
  height: 100%;
  width: 50%;
  background: linear-gradient(90deg, #00A499, #0077CB, #B52555);
  transition: width 160ms ease;
}

.craving-breakdown {
  display: grid;
  gap: 10px;
  margin: 0;
}

.craving-breakdown-row {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px;
  background: var(--card-bg-soft);
}

.craving-breakdown-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.craving-breakdown-bar {
  height: 8px;
  border-radius: 999px;
  background: rgba(31, 42, 68, 0.12);
  overflow: hidden;
  margin-bottom: 6px;
}

.craving-breakdown-fill {
  height: 100%;
  background: linear-gradient(90deg, #00A499, #0077CB, #B52555);
  transition: width 400ms ease;
}

.craving-tracker-top-card {
  margin-bottom: 10px;
}

#cravingEarlyWarning {
  margin-bottom: 10px;
}

.craving-tracker-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.craving-tracker-header h2 {
  margin: 0;
}

.craving-tracker-filters {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}

.craving-progress-wrap {
  border: none;
  border-radius: 12px;
  padding: 10px;
  background: transparent;
}

.craving-progress-track {
  display: flex;
  width: 100%;
  min-height: 42px;
  border-radius: 999px;
  overflow: hidden;
  border: none;
  background: rgba(31, 42, 68, 0.1);
}

.craving-progress-segment {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-weight: 800;
  letter-spacing: 0.2px;
  position: relative;
  transition: none;
}

.craving-progress-segment span {
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.craving-progress-segment::after {
  content: none;
}

.craving-progress-segment.morning {
  background: linear-gradient(120deg, #00A499 0%, #0077CB 100%);
}

.craving-progress-segment.afternoon {
  background: linear-gradient(120deg, #0077CB 0%, #1F2A44 100%);
}

.craving-progress-segment.evening {
  background: linear-gradient(120deg, #B52555 0%, #1F2A44 100%);
}

.craving-progress-segment.risk-low {
  background: #00A499;
}

.craving-progress-segment.risk-moderate {
  background: #f0b429;
  color: #ffffff;
}

.craving-progress-segment.risk-high {
  background: #f27f1b;
}

.craving-progress-segment.risk-very-high {
  background: #c62828;
}

@keyframes cravingShimmer {
  0% { transform: translateX(-120%); opacity: 0.2; }
  50% { opacity: 0.9; }
  100% { transform: translateX(120%); opacity: 0.2; }
}

.tag.source-auto {
  background: linear-gradient(120deg, #00a499, #1c9db5);
}

.tag.source-manual {
  background: linear-gradient(120deg, #0077cb, #1b8fd0);
}

.sleep-history-tag {
  font-weight: 800;
  letter-spacing: 0.2px;
  border: 1px solid transparent;
  padding: 3px 10px;
}

.sleep-history-tag.quality-good {
  background: linear-gradient(120deg, #00A499, #0e8f87);
  border-color: rgba(0, 164, 153, 0.7);
  color: #ffffff;
}

.sleep-history-tag.quality-fair {
  background: linear-gradient(120deg, #0077CB, #1F2A44);
  border-color: rgba(0, 119, 203, 0.7);
  color: #ffffff;
}

.sleep-history-tag.quality-low {
  background: linear-gradient(120deg, #B52555, #8B1E44);
  border-color: rgba(181, 37, 85, 0.72);
  color: #ffffff;
}

.sleep-history-tag.routine-complete {
  background: linear-gradient(120deg, #00a499, #1c9db5);
  border-color: rgba(0, 164, 153, 0.72);
  color: #ffffff;
}

.sleep-history-tag.routine-pending {
  background: linear-gradient(120deg, #b52555, #8f2f8e);
  border-color: rgba(181, 37, 85, 0.72);
  color: #ffffff;
}

.sleep-history-edit-btn {
  margin-left: 8px;
  background: linear-gradient(120deg, #B52555, #0077CB);
  border-color: rgba(31, 42, 68, 0.25);
  color: #ffffff;
  font-size: 0.72rem;
  padding: 4px 8px;
  min-height: 28px;
  line-height: 1.1;
}

#routineTaskList .routine-tag {
  font-weight: 900;
  letter-spacing: 0.2px;
  font-size: 0.78rem;
  padding: 4px 12px;
  border: 1px solid transparent;
  box-shadow: 0 1px 2px rgba(15, 24, 42, 0.12);
}

#routineTaskList .routine-tag-time {
  background: linear-gradient(120deg, #0077cb, #1b8fd0);
  border-color: rgba(0, 119, 203, 0.72);
  color: #ffffff;
}

#routineTaskList .routine-tag-days {
  background: linear-gradient(120deg, #1f2a44, #30507f);
  border-color: rgba(31, 42, 68, 0.7);
  color: #ffffff;
}

#routineTaskList .routine-tag-streak {
  background: linear-gradient(120deg, #00a499, #1c9db5);
  border-color: rgba(0, 164, 153, 0.72);
  color: #ffffff;
}

#routineTaskList .routine-tag-due {
  background: linear-gradient(120deg, #B52555, #8d4f8c);
  border-color: rgba(181, 37, 85, 0.7);
  color: #ffffff;
}

#routineTaskList .routine-tag-completed {
  background: linear-gradient(120deg, #00A499, #0f8f87);
  border-color: rgba(0, 164, 153, 0.72);
  color: #ffffff;
}

#routineTaskList .routine-tag-pending {
  background: linear-gradient(120deg, #B52555, #8f2f6c);
  border-color: rgba(181, 37, 85, 0.72);
  color: #ffffff;
}

body[data-theme="dark"] #routineTaskList .routine-tag-time {
  color: #d0eaff;
}

body[data-theme="dark"] #routineTaskList .routine-tag-days {
  color: #f3f7ff;
}

body[data-theme="dark"] #routineTaskList .routine-tag-streak {
  color: #d8fffa;
}

body[data-theme="dark"] #routineTaskList .routine-tag-due,
body[data-theme="dark"] #routineTaskList .routine-tag-pending {
  color: #ffffff;
}

body[data-theme="dark"] #routineTaskList .routine-tag-completed {
  color: #ffffff;
}

#routineTaskList li .routine-row-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 4px;
}

#routineTaskList .routine-tags-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  min-width: 0;
}

#routineTaskList .routine-inline-actions {
  margin-top: 0;
  margin-left: auto;
  flex-wrap: nowrap;
  gap: 8px;
}

@media (max-width: 980px) {
  #routineTaskList li .routine-row-meta {
    flex-direction: column;
    align-items: flex-start;
  }
  #routineTaskList .routine-inline-actions {
    width: 100%;
    justify-content: flex-end;
    flex-wrap: wrap;
  }
}

.hidden { display: none; }

.calendar-wrap {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px;
  background: var(--card-bg-soft);
}

.appointments-row-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}

.appointments-row-grid.appointments-grid-single {
  grid-template-columns: minmax(0, 1fr);
}

.appointments-row-grid.appointments-grid-double {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#appointmentsCard .appointments-row-grid {
  gap: 5px;
}

#appointmentsCard .appointment-mini {
  padding: 7px;
  gap: 4px;
  border-radius: 9px;
}

#appointmentsCard .appointment-mini-top,
#appointmentsCard .appointment-mini-title-row,
#appointmentsCard .appointment-mini-meta {
  gap: 6px;
}

#appointmentsCard .appointment-mini-title-row strong {
  font-size: 1rem;
  line-height: 1.2;
}

#appointmentsCard .appointment-time-chip,
#appointmentsCard .appointment-mode-chip,
#appointmentsCard .appointment-status-chip,
#appointmentsCard .appointment-countdown-chip {
  font-size: 0.82rem;
  padding: 3px 7px;
}

#appointmentsCard .appointment-mini-meta span,
#appointmentsCard .appointment-countdown-row {
  font-size: 0.95rem;
  line-height: 1.2;
}

#triggerPatternCard .trigger-pattern-list {
  grid-template-columns: 1fr;
  gap: 5px;
}

#triggerPatternCard .trigger-pattern-list li {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 6px 8px;
  background: var(--card-bg-soft);
  gap: 7px;
  min-width: 0;
}

#triggerPatternCard .trigger-pattern-list li.trigger-pattern-item {
  cursor: pointer;
  transition: box-shadow 140ms ease, transform 120ms ease, border-color 140ms ease;
}

#triggerPatternCard .trigger-pattern-list li.trigger-pattern-item:hover,
#triggerPatternCard .trigger-pattern-list li.trigger-pattern-item:focus-visible {
  border-color: rgba(0, 119, 203, 0.55);
  box-shadow: 0 0 0 1px rgba(0, 119, 203, 0.2), 0 5px 12px rgba(10, 22, 46, 0.12);
  transform: translateY(-1px);
  outline: none;
}

#triggerPatternCard .trigger-text {
  font-size: 0.9rem;
  min-width: 0;
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#triggerPatternCard .trigger-pattern-list .tag {
  font-size: 0.72rem;
  padding: 3px 8px;
  margin-left: auto;
  white-space: nowrap;
  flex: 0 0 auto;
}

#triggerPatternCard .trigger-mini-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

#triggerPatternCard .trigger-ultra-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
}

#triggerPatternCard .trigger-ultra-chip {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(0, 119, 203, 0.08), rgba(0, 164, 153, 0.06));
  padding: 4px 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  cursor: pointer;
}

#triggerPatternCard .trigger-ultra-chip:hover,
#triggerPatternCard .trigger-ultra-chip:focus-visible {
  border-color: rgba(0, 119, 203, 0.55);
  box-shadow: 0 0 0 1px rgba(0, 119, 203, 0.2), 0 4px 10px rgba(10, 22, 46, 0.1);
  outline: none;
}

#triggerPatternCard .trigger-ultra-icon {
  font-size: 0.8rem;
  line-height: 1;
  flex: 0 0 auto;
}

#triggerPatternCard .trigger-ultra-name {
  font-size: 0.72rem;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

#triggerPatternCard .trigger-mini-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(0, 119, 203, 0.09), rgba(0, 164, 153, 0.07));
  padding: 7px 8px;
  display: grid;
  gap: 4px;
  text-align: left;
  cursor: pointer;
}

#triggerPatternCard .trigger-mini-card:hover,
#triggerPatternCard .trigger-mini-card:focus-visible {
  border-color: rgba(0, 119, 203, 0.55);
  box-shadow: 0 0 0 1px rgba(0, 119, 203, 0.2), 0 5px 12px rgba(10, 22, 46, 0.12);
  transform: translateY(-1px);
  outline: none;
}

#triggerPatternCard .trigger-mini-icon {
  font-size: 0.88rem;
  line-height: 1;
}

#triggerPatternCard .trigger-mini-name {
  font-size: 0.8rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#triggerPatternCard .trigger-mini-count {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--card-text-soft);
}

/* Trigger Pattern Tracker: allow cleaner compression in smaller drag sizes */
#triggerPatternCard.home-scale-sm .trigger-pattern-list {
  gap: 4px;
}

#triggerPatternCard.home-scale-sm .trigger-mini-grid,
#triggerPatternCard.home-scale-xs .trigger-mini-grid {
  grid-template-columns: 1fr;
}

#triggerPatternCard.home-scale-sm .trigger-pattern-list li {
  padding: 5px 7px;
  gap: 6px;
}

#triggerPatternCard.home-scale-sm .trigger-icon {
  font-size: 0.9rem;
}

#triggerPatternCard.home-scale-sm .trigger-text {
  font-size: 0.78rem;
}

#triggerPatternCard.home-scale-sm .trigger-pattern-list .tag {
  font-size: 0.64rem;
  padding: 2px 6px;
}

#triggerPatternCard.home-scale-xs .trigger-pattern-list {
  gap: 3px;
}

#triggerPatternCard.home-scale-xs .trigger-pattern-list li {
  padding: 4px 6px;
  gap: 5px;
}

#triggerPatternCard.home-scale-xs .trigger-icon {
  font-size: 0.82rem;
}

#triggerPatternCard.home-scale-xs .trigger-text {
  font-size: 0.7rem;
}

#triggerPatternCard.home-scale-xs .trigger-pattern-list .tag {
  font-size: 0.6rem;
  padding: 2px 5px;
}

/* Ultra-compact trigger rows at smallest size: icon + name only. */
#triggerPatternCard.home-scale-xs .trigger-pattern-list .tag {
  display: none;
}

.appointment-mini {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), var(--card-bg-soft));
  box-shadow: 0 6px 16px rgba(10, 20, 35, 0.08);
  display: grid;
  gap: 7px;
}

.recovery-online-row {
  list-style: none;
  margin: 0;
  padding: 0;
}

.recovery-online-row:last-child {
  margin-bottom: 0;
}

#recoveryOnlineList {
  max-height: none !important;
  overflow: visible !important;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 10px;
}

#recoveryOnlineAppointmentsCard {
  height: auto;
  max-height: none !important;
  overflow: visible !important;
  min-height: 420px;
}

#recoveryOnlineAppointmentsCard #recoveryOnlineList {
  max-height: none !important;
  overflow: visible !important;
}

.recovery-online-mini {
  border-color: rgba(0, 119, 203, 0.38);
}

.recovery-online-mini .online-open-in-app-btn:disabled {
  opacity: 0.72;
  cursor: not-allowed;
}

.timetable-intervention-mini {
  margin-bottom: 8px;
}

.timetable-intervention-mini:last-child {
  margin-bottom: 0;
}

.timetable-intervention-mini.is-completed-past {
  background: linear-gradient(145deg, rgba(138, 148, 165, 0.24), rgba(173, 181, 194, 0.2));
  border-color: rgba(108, 123, 145, 0.45);
  box-shadow: none;
  opacity: 0.86;
}

.timetable-intervention-mini.is-completed-past .appointment-mini-title-row strong,
.timetable-intervention-mini.is-completed-past .appointment-mini-meta,
.timetable-intervention-mini.is-completed-past .appointment-mini > div {
  color: rgba(31, 42, 68, 0.74);
}

.timetable-intervention-mini.is-completed-past .appointment-time-chip,
.timetable-intervention-mini.is-completed-past .appointment-mode-chip,
.timetable-intervention-mini.is-completed-past .appointment-status-chip,
.timetable-intervention-mini.is-completed-past .appointment-countdown-chip {
  filter: grayscale(0.75);
}

.appointment-mini-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.appointment-time-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #eef8ff;
  border: none;
  border-radius: 999px;
  padding: 3px 8px;
  background: linear-gradient(120deg, #0077cb, #1b8fd0);
}

#homeAttendanceBreakdown .appointment-time-chip,
.snapshot-insight-content #homeAttendanceBreakdown .appointment-time-chip,
.snapshot-insight-content .appointment-time-chip {
  color: #ffffff !important;
}

.appointment-mode-chip {
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 3px 8px;
  border: 1px solid transparent;
}

.appointment-mode-chip.is-online {
  background: linear-gradient(120deg, #00a499, #1c9db5);
  color: #e9fffb;
  border-color: transparent;
}

.appointment-mode-chip.is-inperson {
  background: linear-gradient(120deg, #1f2a44, #30507f);
  color: #eef3ff;
  border-color: transparent;
}

.appointment-mini-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.appointment-mini-title-row strong {
  font-size: 0.95rem;
  line-height: 1.25;
}

.appointment-type-tag {
  white-space: nowrap;
}

.appointment-mini-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.79rem;
  color: var(--muted);
}

.appointment-status-chip {
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 2px 8px;
  border: 1px solid transparent;
  white-space: nowrap;
}

.appointment-status-chip.is-scheduled {
  background: linear-gradient(120deg, #0077cb, #1b8fd0);
  color: #eef8ff;
  border-color: transparent;
}

.appointment-status-chip.is-completed {
  background: linear-gradient(120deg, #00a499, #1c9db5);
  color: #e9fffb;
  border-color: transparent;
}

.appointment-status-chip.is-cancelled {
  background: linear-gradient(120deg, #b52555, #8f2f8e);
  color: #ffeef5;
  border-color: transparent;
}

.appointment-mini-actions {
  display: flex;
  justify-content: flex-end;
}

.appointment-countdown-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.appointment-countdown-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 2px 8px;
  background: linear-gradient(120deg, #b52555, #8f2f8e);
  border: none;
  color: #ffeef5;
}

.appointment-countdown-row .appointment-join-session-btn {
  margin-left: auto;
}

body[data-theme="dark"] .appointment-countdown-chip {
  background: linear-gradient(120deg, #b52555, #8f2f8e);
  color: #ffeef5;
}

body[data-theme="dark"] .appointment-mini {
  background: linear-gradient(145deg, rgba(47, 79, 125, 0.5), rgba(27, 42, 68, 0.82));
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
}

body[data-theme="dark"] .appointment-time-chip {
  background: linear-gradient(120deg, #0077cb, #1b8fd0);
  color: #eef8ff;
}

body[data-theme="dark"] .appointment-mode-chip.is-online {
  color: #e9fffb;
}

body[data-theme="dark"] .appointment-mode-chip.is-inperson {
  color: #eef3ff;
}

body[data-theme="dark"] .appointment-status-chip.is-scheduled {
  color: #eef8ff;
}

body[data-theme="dark"] .appointment-status-chip.is-completed {
  color: #e9fffb;
}

body[data-theme="dark"] .appointment-status-chip.is-cancelled {
  color: #ffeef5;
}

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

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

.calendar-day-row {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  background: rgba(255,255,255,0.18);
}

.calendar-day-title {
  margin: 0 0 8px;
  font-size: 0.96rem;
  color: var(--card-text);
}

body[data-theme="dark"] .calendar-day-row {
  background: rgba(32, 54, 89, 0.75);
}

.calendar-day-columns-wrap {
  overflow-x: auto;
  padding-bottom: 2px;
}

.calendar-day-columns {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(250px, 1fr);
  gap: 10px;
}

.calendar-day-columns.week-fixed {
  grid-auto-flow: initial;
  grid-template-columns: repeat(7, minmax(220px, 1fr));
}

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

.calendar-month-head {
  font-size: 0.74rem;
  font-weight: 800;
  color: var(--muted);
  text-align: center;
  padding: 4px 0;
}

.calendar-month-cell {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.2);
  padding: 6px;
  min-height: 118px;
  display: grid;
  align-content: start;
  gap: 4px;
}

.calendar-month-cell.is-empty {
  background: rgba(31, 42, 68, 0.06);
  border-style: dashed;
}

.calendar-month-date {
  justify-self: end;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--card-text);
}

.calendar-month-date.is-today {
  color: #ffffff;
  background: linear-gradient(135deg, #0077CB, #00A499);
  border-radius: 999px;
  padding: 1px 7px;
}

.calendar-month-item {
  border: 1px solid rgba(0, 119, 203, 0.28);
  border-radius: 8px;
  background: rgba(0, 119, 203, 0.08);
  padding: 3px 5px;
  display: grid;
  gap: 1px;
}

.calendar-month-item.is-completed-past {
  background: rgba(149, 159, 175, 0.2);
  border-color: rgba(112, 126, 148, 0.45);
  opacity: 0.8;
}

body[data-theme="dark"] .timetable-intervention-mini.is-completed-past {
  background: linear-gradient(145deg, rgba(93, 104, 126, 0.32), rgba(74, 87, 108, 0.28));
  border-color: rgba(129, 147, 175, 0.46);
}

body[data-theme="dark"] .timetable-intervention-mini.is-completed-past .appointment-mini-title-row strong,
body[data-theme="dark"] .timetable-intervention-mini.is-completed-past .appointment-mini-meta,
body[data-theme="dark"] .timetable-intervention-mini.is-completed-past .appointment-mini > div {
  color: rgba(235, 243, 255, 0.82);
}

body[data-theme="dark"] .calendar-month-item.is-completed-past {
  background: rgba(104, 118, 142, 0.34);
  border-color: rgba(146, 162, 190, 0.42);
}

.calendar-month-item-time {
  font-size: 0.68rem;
  font-weight: 700;
  color: #0a4f85;
}

.calendar-month-item-title {
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--card-text);
}

.calendar-month-more {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--muted);
}

.calendar-month-empty {
  font-size: 0.68rem;
  color: var(--muted);
}

body[data-theme="dark"] .calendar-month-cell {
  background: rgba(32, 54, 89, 0.75);
}

body[data-theme="dark"] .calendar-month-item {
  background: rgba(0, 119, 203, 0.2);
  border-color: rgba(124, 173, 228, 0.4);
}

body[data-theme="dark"] .calendar-month-item-time {
  color: #d0eaff;
}

.calendar-day-column {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  background: rgba(255,255,255,0.18);
  min-height: 120px;
}

.calendar-day-column .appointment-mini {
  margin-bottom: 8px;
}

.calendar-day-column .appointment-mini:last-child {
  margin-bottom: 0;
}

body[data-theme="dark"] .calendar-day-column {
  background: rgba(32, 54, 89, 0.75);
}

.calendar-item {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px;
  background: #36527d;
  color: var(--card-text);
}
body[data-theme="dark"] .calendar-item { background: #213659; color: #ffffff; }

.calendar-grid {
  display: grid;
  gap: 8px;
}

.calendar-grid.week { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.calendar-grid.month { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.calendar-cell {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px;
  min-height: 90px;
  background: #36527d;
  color: var(--card-text);
}
body[data-theme="dark"] .calendar-cell { background: #213659; color: #ffffff; }

.calendar-date {
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 6px;
}

.calendar-mini {
  border: 1px solid rgba(0,164,153,0.45);
  border-radius: 8px;
  padding: 6px;
  margin-bottom: 5px;
  background: rgba(0,164,153,0.22);
}

.planned-activity-item {
  border: 2px solid var(--cyan);
  box-shadow: 0 0 0 1px rgba(0, 119, 203, 0.18);
}

.planned-activity-item.activity-card-clickable,
.calendar-month-item.activity-month-clickable {
  cursor: pointer;
}

.planned-activity-item.activity-card-clickable:hover,
.calendar-month-item.activity-month-clickable:hover {
  box-shadow: 0 0 0 1px rgba(0, 119, 203, 0.26), 0 8px 16px rgba(10, 22, 46, 0.16);
}

.activity-details-card {
  width: min(620px, 94vw);
}

.activity-details-body {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card-bg-soft);
  padding: 10px;
  line-height: 1.45;
  display: grid;
  gap: 8px;
}

#activityDetailsBody {
  padding: 7px 8px;
  font-size: 0.92rem;
  line-height: 1.32;
  gap: 5px;
}

#activityDetailsBody p {
  margin: 0;
}

#timetableDetailsBody {
  padding: 7px 8px;
  font-size: 0.92rem;
  line-height: 1.32;
  gap: 5px;
}

#timetableDetailsBody p {
  margin: 0;
}

#appointmentDetailsBody {
  padding: 7px 8px;
  font-size: 0.9rem;
  line-height: 1.3;
  gap: 5px;
}

#appointmentDetailsBody p {
  margin: 0;
}

.activity-details-meta {
  padding: 7px 9px;
  gap: 2px;
  line-height: 1.25;
  font-size: 0.82rem;
}

.activity-details-meta p {
  margin: 0;
}

body[data-theme="dark"] .planned-activity-item {
  border-color: #00A499;
  box-shadow: 0 0 0 1px rgba(0, 164, 153, 0.25);
}

.timeline-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 8px 0;
}

.timeline-expanded-list {
  display: grid;
  gap: 12px;
  margin-top: 8px;
}

.timeline-expanded-day-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card-bg-soft);
  padding: 12px;
}

.timeline-expanded-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.timeline-expanded-head h3 {
  margin: 0;
  font-size: 1rem;
}

.timeline-expanded-narrative {
  margin: 0 0 10px;
  color: var(--card-text);
}

.timeline-expanded-events {
  display: grid;
  gap: 8px;
}

.timeline-older-wrap {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card-bg-soft);
  padding: 8px 10px;
}

.timeline-older-wrap summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--card-text);
  outline: none;
}

.timeline-older-list {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.timeline-expanded-event {
  border: 1px solid rgba(0, 119, 203, 0.22);
  border-radius: 10px;
  background: rgba(0, 119, 203, 0.06);
  padding: 8px 10px;
}

.timeline-expanded-event p {
  margin: 0 0 5px;
}

.timeline-expanded-event p:last-child {
  margin-bottom: 0;
}

body[data-theme="dark"] .timeline-expanded-day-card {
  background: rgba(32, 54, 89, 0.75);
}

body[data-theme="dark"] .timeline-expanded-event {
  background: rgba(0, 119, 203, 0.16);
  border-color: rgba(124, 173, 228, 0.38);
}

.timeline-day-event-list {
  display: grid;
  gap: 6px;
  margin: 10px 0;
}

.timeline-day-top-lines {
  display: grid;
  gap: 4px;
  margin-bottom: 8px;
}

.timeline-day-top-line {
  margin: 0;
  line-height: 1.35;
}

.timeline-day-event-line {
  margin: 0;
  line-height: 1.42;
}

.timeline-day-event-list .meta {
  margin: 0 0 2px;
  padding-left: 2px;
}

.timeline-day-event-list p:last-child {
  margin-bottom: 0;
}

.journal-export-actions {
  justify-content: flex-end;
}

.right-action {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.action-centre-meta {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}

.action-centre-progress-track {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(31, 42, 68, 0.12);
  border: 1px solid var(--border);
}

.action-centre-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #B52555 0%, #0077CB 60%, #00A499 100%);
  transition: width 280ms ease;
}

.action-centre-list .focus-item {
  border-left: 5px solid #9eb4cb;
  cursor: pointer;
  transition: box-shadow 180ms ease, border-color 180ms ease;
}

.action-centre-list .focus-item.active {
  box-shadow: 0 0 0 2px rgba(0, 119, 203, 0.22);
}

.action-centre-list .focus-item[data-priority="3"] {
  border-left-color: #B52555;
}

.action-centre-list .focus-item[data-priority="2"] {
  border-left-color: #0077CB;
}

.action-centre-list .focus-item[data-priority="1"] {
  border-left-color: #00A499;
}

.action-centre-split {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 12px;
}

.action-centre-two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}

.action-centre-col {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
  background: var(--card-bg-soft);
  min-height: 220px;
}

.action-centre-col h3 {
  margin: 0 0 8px;
}

.action-centre-list {
  max-height: none !important;
  overflow: visible !important;
}

.action-centre-split.action-centre-inbox-only {
  grid-template-columns: 1fr;
}

.focus-expanded {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.action-centre-detail {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  background: linear-gradient(150deg, rgba(181, 37, 85, 0.16) 0%, rgba(0, 119, 203, 0.14) 56%, rgba(0, 164, 153, 0.18) 100%);
  min-height: 220px;
  display: flex;
  flex-direction: column;
}

.action-centre-detail h3 {
  margin: 0 0 6px;
}

.action-centre-detail .right-action {
  margin-top: auto;
  padding-top: 10px;
}

.tab-btn .tag {
  margin-left: 6px;
  vertical-align: middle;
}

#actionCentreMenuBadge,
#communityMenuBadge,
#portfolioMenuBadge,
#cravingsMenuBadge,
#sleepRoutineMenuBadge {
  background: #B52555;
  color: #ffffff;
  border: 1px solid rgba(181, 37, 85, 0.85);
}

#actionCentreMenuBadge:not(:empty),
#communityMenuBadge:not(:empty),
#portfolioMenuBadge:not(:empty),
#cravingsMenuBadge:not(:empty),
#sleepRoutineMenuBadge:not(:empty) {
  animation: menu-badge-pulse 1.4s ease-in-out infinite;
}

#actionCentreMenuBadge[data-zero="true"],
#communityMenuBadge[data-zero="true"],
#portfolioMenuBadge[data-zero="true"],
#cravingsMenuBadge[data-zero="true"],
#sleepRoutineMenuBadge[data-zero="true"] {
  animation: none;
  opacity: 0.9;
}

@keyframes menu-badge-pulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(181, 37, 85, 0.45); }
  70% { transform: scale(1.08); box-shadow: 0 0 0 7px rgba(181, 37, 85, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(181, 37, 85, 0); }
}

.action-centre-alt-content {
  display: grid;
  gap: 10px;
}

.action-centre-alt-content section > h3,
.action-centre-alt-content details > summary {
  margin: 0 0 8px;
}

.ac-item {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
  margin-bottom: 8px;
  background: var(--card-bg-soft);
}

.ac-kanban {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.ac-kanban > section {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
  background: var(--card-bg);
}

.ac-timeline {
  display: grid;
  gap: 8px;
}

.ac-timeline-row {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 8px;
  align-items: start;
}

.ac-timeline-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  margin-top: 12px;
  background: #B52555;
}

.ac-timeline-dot.done {
  background: #00A499;
}

.mini-chart {
  display: block;
  width: 100%;
  height: auto;
  min-height: 230px;
  max-height: 320px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #2e4469;
}

.mini-chart.mood-light-chart {
  background: #ffffff;
  border: 1px solid rgba(31, 42, 68, 0.24);
}

body:not([data-theme="dark"]) [data-panel="timeline"] .mini-chart {
  background: var(--card-bg-soft);
}

.chat-window {
  min-height: 260px;
  max-height: 460px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
  background: var(--card-bg-soft);
  margin-bottom: 10px;
}

[data-panel="messages"] #messageTabWindow {
  min-height: 180px;
  max-height: min(38vh, 360px);
  flex: 1 1 auto;
  margin-bottom: 6px;
}

[data-panel="messages"] .card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: auto;
}

[data-panel="messages"] #messageTabForm {
  margin-top: 0;
}

[data-panel="messages"] #messageTabForm textarea {
  min-height: 52px;
  max-height: 110px;
  width: 100%;
}

.chat-msg {
  padding: 8px 10px;
  border-radius: 10px;
  margin-bottom: 8px;
  border: 1px solid var(--border);
  background: #36527d;
}

.chat-msg.msg-admin {
  background: linear-gradient(135deg, rgba(0, 119, 203, 0.18), rgba(0, 164, 153, 0.16));
  border-color: rgba(0, 119, 203, 0.45);
}

.chat-msg.msg-client {
  background: linear-gradient(135deg, rgba(181, 37, 85, 0.15), rgba(95, 110, 174, 0.14));
  border-color: rgba(181, 37, 85, 0.4);
}

.message-widget-toggle {
  position: fixed;
  right: 18px;
  bottom: 16px;
  z-index: 1400;
  border-radius: 999px;
  padding: 10px 14px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.28);
}

.message-widget-panel {
  position: fixed;
  right: 18px;
  bottom: 68px;
  width: min(390px, calc(100vw - 26px));
  z-index: 1400;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card-bg);
  box-shadow: 0 14px 34px rgba(0,0,0,0.3);
  padding: 10px;
}

.message-widget-panel.popout {
  width: min(68vw, 640px);
  height: min(72vh, 600px);
  min-width: 360px;
  min-height: 320px;
  max-width: calc(100vw - 28px);
  max-height: calc(100vh - 88px);
  resize: both;
  overflow: auto;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 8px;
}

body[data-message-widget-side="left"] .message-widget-toggle {
  left: 18px;
  right: auto;
}

body[data-message-widget-side="left"] .message-widget-panel {
  left: 18px;
  right: auto;
}

.message-widget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.message-widget-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.message-widget-popout-btn {
  min-width: 30px;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid rgba(31, 42, 68, 0.28);
  background: rgba(255, 255, 255, 0.42);
  color: #5b6c86;
  font-size: 0.92rem;
  line-height: 1;
}

.message-widget-popout-btn:hover,
.message-widget-popout-btn:focus-visible {
  border-color: rgba(31, 42, 68, 0.42);
  background: rgba(255, 255, 255, 0.65);
  color: #2e405f;
}

body[data-theme="dark"] .message-widget-popout-btn {
  border-color: rgba(214, 227, 245, 0.32);
  background: rgba(255, 255, 255, 0.08);
  color: #d6e3f5;
}

body[data-theme="dark"] .message-widget-popout-btn:hover,
body[data-theme="dark"] .message-widget-popout-btn:focus-visible {
  border-color: rgba(214, 227, 245, 0.5);
  background: rgba(255, 255, 255, 0.14);
  color: #f3f8ff;
}

.message-widget-header h3 {
  margin: 0;
}

.message-widget-panel .chat-window {
  min-height: 220px;
  max-height: 300px;
}

.message-widget-panel.popout .chat-window {
  min-height: 0;
  max-height: none;
  height: 100%;
}

.message-widget-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin-bottom: 4px;
}

.message-widget-form textarea {
  min-height: 40px;
  max-height: 120px;
}

.dm-thread {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dm-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.dm-row.self {
  justify-content: flex-end;
}

.dm-row.self .chat-avatar {
  order: 2;
}

.dm-row.self .dm-bubble {
  order: 1;
}

.dm-bubble {
  max-width: 78%;
  border-radius: 18px;
  padding: 9px 12px;
  position: relative;
  margin-bottom: 0;
}

.dm-bubble .meta {
  margin-bottom: 4px;
  font-size: 0.78rem;
}

.dm-bubble.msg-self {
  align-self: flex-end;
  background: linear-gradient(135deg, #0077CB, #00A499);
  border-color: rgba(0, 119, 203, 0.55);
  color: #ffffff;
}

.dm-bubble.msg-self .meta {
  color: rgba(255, 255, 255, 0.88);
}

.dm-bubble.msg-other {
  align-self: flex-start;
  background: linear-gradient(135deg, #B52555, #8f2f6f);
  border-color: rgba(181, 37, 85, 0.62);
  color: #ffffff;
}

body[data-theme="dark"] .dm-bubble.msg-other {
  background: linear-gradient(135deg, #B52555, #8f2f6f);
  border-color: rgba(181, 37, 85, 0.62);
  color: #ffffff;
}

.cb-thread {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cb-row {
  display: flex;
  align-items: flex-end;
  gap: 6px;
}

.cb-row-focus .cb-bubble {
  box-shadow: 0 0 0 2px rgba(0, 119, 203, 0.55), 0 0 18px rgba(0, 164, 153, 0.28);
}

.cb-other-row,
.cb-system-row {
  justify-content: flex-start;
}

.cb-self-row {
  justify-content: flex-end;
}

.cb-self-row .chat-avatar {
  order: 2;
}

.cb-self-row .cb-bubble {
  order: 1;
}

.cb-bubble {
  max-width: 96%;
  border-radius: 10px;
  padding: 5px 8px;
  margin-bottom: 0;
  line-height: 1.2;
  font-size: 0.9rem;
}

.cb-bubble-text {
  white-space: pre-wrap;
  word-break: break-word;
}

.cb-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.cb-reaction-mini-count {
  font-size: 0.66rem;
  padding: 1px 6px;
  min-height: 18px;
  line-height: 1.1;
}

.cb-reaction-btn {
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  border-radius: 999px;
  font-size: 0.78rem;
  padding: 2px 7px;
  line-height: 1.15;
  min-height: 24px;
}

.cb-reaction-count {
  cursor: pointer;
}

.cb-reaction-plus-btn {
  min-width: 14px;
  min-height: 14px;
  width: 14px;
  height: 14px;
  padding: 0;
  border-radius: 0;
  font-size: 0.58rem;
  line-height: 1;
  border: 0;
  background: transparent;
  color: #ffffff;
}

.cb-reaction-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 3px;
}

.cb-reaction-pick-btn {
  min-width: 22px;
  min-height: 16px;
  padding: 0 4px;
  font-size: 0.62rem;
  line-height: 1;
  border-radius: 999px;
}

.cb-bubble.cb-system .cb-reaction-btn {
  border-color: rgba(31, 42, 68, 0.24);
  background: rgba(31, 42, 68, 0.08);
  color: var(--text);
}

.cb-bubble .meta {
  margin-bottom: 2px;
  font-size: 0.74rem;
}

.cb-bubble.cb-self {
  align-self: flex-end;
  background: linear-gradient(135deg, #1F2A44, #2f4f7d);
  border-color: rgba(31, 42, 68, 0.6);
  color: #ffffff;
}

.cb-bubble.cb-self .meta {
  color: rgba(255, 255, 255, 0.88);
}

.cb-bubble.cb-other {
  align-self: flex-start;
  background: linear-gradient(135deg, #0077CB, #00A499);
  border-color: rgba(0, 119, 203, 0.62);
  color: #ffffff;
}

.cb-bubble.cb-other .meta {
  color: rgba(255, 255, 255, 0.9);
}

.cb-bubble.cb-system {
  max-width: 98%;
  background: linear-gradient(135deg, rgba(0, 119, 203, 0.18), rgba(0, 164, 153, 0.2));
  border-color: rgba(0, 119, 203, 0.4);
  color: var(--text);
}

.cb-delete-btn {
  min-width: 16px;
  height: 16px;
  padding: 0;
  border-radius: 0;
  font-size: 0.62rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border: 0;
  background: transparent;
  color: #ffffff;
}

.cb-delete-btn:hover {
  transform: scale(1.04);
}

.cb-swipe-row {
  transition: transform 0.12s ease;
  will-change: transform;
}

.community-compose-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}

.community-compose-toolbar .small-btn {
  min-height: 28px;
  padding: 2px 8px;
}

.community-mention-picker {
  margin: 6px 0 8px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card-bg-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.community-mention-option-btn {
  font-size: 0.78rem;
  padding: 3px 7px;
}

.community-mention-tag {
  display: inline-block;
  margin: 0 1px;
  padding: 0 6px;
  border-radius: 999px;
  background: linear-gradient(120deg, #0077cb, #00a499);
  color: #eef8ff;
  font-weight: 700;
}

body[data-theme="dark"] .community-mention-tag {
  background: linear-gradient(120deg, #0077cb, #00a499);
  color: #eef8ff;
}

.community-format-btn {
  min-width: 34px;
}

.community-emoji-insert-btn {
  min-width: 32px;
}

.community-underline {
  text-decoration: underline;
}

.community-editor {
  min-height: 88px;
  max-height: 220px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card-bg-soft);
  color: var(--card-text);
  padding: 8px 10px;
  margin-bottom: 8px;
  line-height: 1.35;
}

.community-editor:focus {
  outline: none;
  border-color: rgba(0, 119, 203, 0.6);
  box-shadow: 0 0 0 2px rgba(0, 119, 203, 0.16);
}

.community-editor:empty::before {
  content: attr(data-placeholder);
  color: var(--muted);
}

.community-editor[aria-disabled="true"] {
  opacity: 0.7;
}

.cb-reaction-total {
  border-color: rgba(255, 255, 255, 0.35);
  color: #ffffff;
}

.chat-avatar {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid var(--border);
  background: #d6e1ef;
  flex: 0 0 28px;
}

.community-status-warning {
  border: 1px solid #ff7a7a;
  border-radius: 10px;
  padding: 8px 10px;
  background: linear-gradient(135deg, #ff1f1f, #c70000);
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 0 0 1px rgba(255, 31, 31, 0.35), 0 10px 22px rgba(199, 0, 0, 0.28);
}

.community-status-success {
  border: 1px solid rgba(0, 164, 153, 0.45);
  border-radius: 10px;
  padding: 8px 10px;
  background: linear-gradient(135deg, rgba(0, 164, 153, 0.16), rgba(0, 119, 203, 0.18));
}

.entry-modal {
  border: none;
  background: transparent;
  padding: 0;
}

.entry-modal::backdrop {
  background: rgba(0, 0, 0, 0.55);
}

.entry-modal-card {
  width: min(860px, 94vw);
  max-height: 82vh;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--panel);
  color: var(--ink);
  padding: 14px;
}

.entry-modal-card.trigger-insight-modal {
  width: min(680px, 92vw);
  padding: 8px 8px 6px;
}

.entry-modal-card.routine-window-modal {
  width: min(540px, 92vw);
  padding: 6px 8px;
}

.entry-modal-card.routine-window-modal h3 {
  margin: 0 0 4px;
}

.entry-modal-card.routine-window-modal #entryModalText.advice-box {
  padding: 2px 4px;
  margin: 0;
  border: 0;
  background: transparent;
}

.entry-modal-card.trigger-insight-modal h3 {
  margin: 0 0 6px;
}

.entry-modal-card.momentum-insight-modal h3 {
  display: none;
}

.entry-modal-card.momentum-insight-modal {
  width: min(560px, 92vw);
  padding: 6px 8px;
}

.entry-modal-card.momentum-insight-modal #entryModalText.advice-box {
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  line-height: 1.35;
}

.entry-modal-card.momentum-insight-modal menu {
  margin-top: 6px;
}

#entryModalText .momentum-insight-content {
  margin: 0;
  padding: 0;
  white-space: normal;
}

#entryModalText .momentum-insight-content p {
  margin: 0;
  line-height: 1.35;
}

.entry-modal-card.snapshot-insight-modal {
  width: min(640px, 92vw);
  padding: 8px 8px 6px;
}

.entry-modal-card.snapshot-insight-modal #entryModalText.advice-box {
  padding: 4px 6px;
  line-height: 1.35;
  font-size: 0.89rem;
}

#entryModalText .snapshot-insight-content {
  padding: 0;
  margin: 0;
  white-space: normal;
}

#entryModalText .snapshot-insight-content p {
  margin: 0 0 6px;
}

#entryModalText .snapshot-insight-content p:last-child {
  margin-bottom: 0;
}

#entryModalText .snapshot-insight-content ul,
#entryModalText .snapshot-insight-content ol {
  margin: 0 0 6px;
  padding-left: 16px;
}

#entryModalText .snapshot-insight-content li {
  margin: 0 0 4px;
}

#entryModalText .snapshot-insight-content li:last-child {
  margin-bottom: 0;
}

#entryModalText .trigger-insight-content {
  padding: 0;
  margin: 0;
  line-height: 1.38;
  font-size: 0.95rem;
  white-space: normal;
}

#entryModalText .trigger-insight-content p {
  margin: 0;
}

#entryModalText .trigger-insight-content p:last-child {
  margin: 0;
}

.routine-window-detail {
  display: grid;
  gap: 4px;
}

.routine-window-detail .routine-window-detail-title {
  margin: 0;
  line-height: 1.25;
}

.routine-window-detail .routine-window-detail-meta,
.routine-window-detail .routine-window-detail-state {
  margin: 0;
  line-height: 1.25;
}

.routine-window-detail .routine-window-detail-actions {
  margin-top: 2px;
  justify-content: flex-end;
}

#routineWindowMarkStatus {
  margin: 0;
  line-height: 1.2;
}

#routineWindowMarkStatus:empty {
  display: none;
}

.recorder-modal-card {
  width: min(720px, 92vw);
  max-height: 90vh;
  overflow: auto;
  padding: 12px;
}

.entry-modal-card menu {
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  align-items: center;
}

.entry-modal-card menu:has(button + button) {
  justify-content: stretch;
}

.entry-modal-card menu:has(button + button) button {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  min-height: 42px;
  font-size: 0.92rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8px 12px;
}

.resource-preview-modal-card {
  width: min(980px, 96vw);
  max-height: 90vh;
  overflow: auto;
}

.resource-preview-body {
  margin-top: 8px;
  min-height: 300px;
  max-height: 64vh;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card-bg-soft);
  padding: 8px;
  overflow: auto;
}

.resource-preview-body iframe {
  width: 100%;
  min-height: 60vh;
  border: 0;
  border-radius: 8px;
  background: #ffffff;
}

.resource-preview-body img {
  display: block;
  max-width: 100%;
  max-height: 62vh;
  margin: 0 auto;
  border-radius: 8px;
}

#staffAccountModal .entry-modal-card {
  width: min(620px, 92vw);
  padding: 10px 12px;
}

#addClientModal .entry-modal-card {
  width: min(640px, 92vw);
  padding: 10px 12px;
}

#clientForm h3 {
  margin: 0 0 8px;
}

#clientForm .layout.two-up {
  gap: 8px;
  margin-bottom: 8px;
}

#clientForm label {
  margin: 0 0 6px;
}

#clientForm input,
#clientForm select {
  min-height: 36px;
}

#clientForm textarea {
  min-height: 72px;
}

#clientForm .admin-item-actions {
  gap: 6px;
}

#clientForm .muted {
  margin: 4px 0 6px;
}

#clientForm menu {
  margin-top: 8px;
  gap: 8px;
}

#staffAuditModal .entry-modal-card {
  width: min(1500px, 98vw);
  max-height: 88vh;
  padding: 12px 14px;
}

#staffAuditModal .admin-client-table-wrap {
  max-height: 64vh;
  overflow: auto;
}

#dashboardWidgetModal .entry-modal-card {
  width: min(860px, 94vw);
  padding: 12px 14px;
}

#adminWidgetConfigModal .entry-modal-card {
  width: min(620px, 92vw);
  padding: 10px 12px;
}

#adminWidgetConfigModal h3 {
  margin: 0 0 6px;
}

#adminWidgetConfigModal h4 {
  margin: 8px 0 4px;
}

#adminWidgetConfigModal .muted {
  margin: 4px 0 8px;
}

#adminWidgetConfigModal .entry-modal-card menu {
  margin-top: 8px;
  gap: 8px;
}

#dashboardWidgetModal .list {
  margin-top: 10px;
  max-height: 50vh;
  overflow: auto;
}

#dashboardWidgetModal .list li {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
  background: linear-gradient(135deg, var(--card-bg-soft), var(--card-bg));
}

#adminProfileModal .entry-modal-card {
  width: min(920px, 96vw);
  padding: 10px 12px;
}

#adminProfileForm h3 {
  margin: 0 0 6px;
}

#adminProfileForm h4 {
  margin: 8px 0 4px;
}

#adminProfileForm .layout.two-up {
  gap: 8px;
  margin-bottom: 6px;
}

#adminProfileForm label {
  margin: 0 0 5px;
}

#adminProfileForm input,
#adminProfileForm select {
  min-height: 36px;
}

#adminProfileForm .admin-widget-config-list {
  margin: 6px 0 8px;
  gap: 6px 10px;
}

#adminProfileForm menu {
  margin-top: 8px;
  gap: 8px;
}

.admin-profile-avatar-preview-wrap {
  margin-top: 8px;
}

.admin-profile-avatar-preview {
  width: 64px;
  height: 64px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card-bg-soft);
  object-fit: cover;
  display: inline-block;
}

body.admin-app[data-a11y-large-text="1"] {
  font-size: 1.06rem;
}

body.admin-app[data-a11y-high-contrast="1"] {
  --card-bg-soft: #eef5ff;
  --panel: #f6fbff;
  --ink: #102544;
}

body.admin-app[data-a11y-reduced-motion="1"] *,
body.admin-app[data-a11y-reduced-motion="1"] *::before,
body.admin-app[data-a11y-reduced-motion="1"] *::after {
  transition: none !important;
  animation: none !important;
}

#staffAccountForm h3 {
  margin: 0 0 8px;
}

#staffAccountForm .layout.two-up {
  gap: 8px;
  margin-bottom: 8px;
}

#staffAccountForm label {
  margin: 0 0 6px;
}

#staffAccountForm input,
#staffAccountForm select {
  min-height: 36px;
}

#staffAccountForm .admin-item-actions {
  gap: 6px;
}

#staffAccountDetailsModal .entry-modal-card {
  width: min(760px, 94vw);
  padding: 10px 12px;
}

#staffAccountDetailsForm h3 {
  margin: 0 0 8px;
}

#staffAccountDetailsForm .layout.two-up {
  gap: 8px;
  margin-bottom: 8px;
}

#staffAccountDetailsForm label {
  margin: 0 0 6px;
}

#staffAccountDetailsForm input,
#staffAccountDetailsForm select {
  min-height: 36px;
}

#staffAccountDetailsForm .admin-item-actions {
  gap: 6px;
}

/* Shared compact modal spacing pattern for admin account/profile forms */
#staffAccountForm h3,
#staffAccountDetailsForm h3,
#adminProfileForm h3 {
  margin: 0 0 6px;
}

#staffAccountForm h4,
#staffAccountDetailsForm h4,
#adminProfileForm h4 {
  margin: 8px 0 4px;
}

#staffAccountForm .layout.two-up,
#staffAccountDetailsForm .layout.two-up,
#adminProfileForm .layout.two-up {
  gap: 8px;
  margin-bottom: 6px;
  align-items: end;
}

#staffAccountForm label,
#staffAccountDetailsForm label,
#adminProfileForm label {
  margin: 0 0 5px;
  display: grid;
  gap: 4px;
}

#staffAccountForm input,
#staffAccountForm select,
#staffAccountDetailsForm input,
#staffAccountDetailsForm select,
#adminProfileForm input,
#adminProfileForm select {
  min-height: 36px;
}

#staffAccountForm .admin-item-actions,
#staffAccountDetailsForm .admin-item-actions,
#adminProfileForm .admin-item-actions {
  gap: 6px;
}

#staffAccountForm .staff-password-inline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

#staffAccountForm .staff-password-inline .small-btn {
  min-width: 96px;
  height: 36px;
}

#staffAccountForm menu,
#staffAccountDetailsForm menu,
#adminProfileForm menu {
  margin-top: 8px;
  gap: 8px;
}

#confirmActionModal .entry-modal-card {
  width: min(520px, 90vw);
  padding: 10px 12px;
}

#confirmActionModal h3 {
  margin: 0 0 6px;
}

#confirmActionModal .muted {
  margin: 0 0 8px;
}

#confirmActionModal menu {
  margin-top: 8px;
  gap: 8px;
}

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

#mfaSetupPanel #mfaQrImage {
  justify-self: start;
}

.mfa-manual-secret-label {
  display: block;
  margin-top: 2px;
}

.mfa-manual-secret-input {
  width: min(520px, 100%);
  min-width: 320px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  letter-spacing: 0.4px;
}

#softDeleteStaffAccountDetailsBtn,
#hardDeleteStaffAccountDetailsBtn {
  background: linear-gradient(120deg, #8f1c44, #b52555);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.18);
}

.appointment-reminder-card {
  width: min(460px, 94vw);
  padding: 9px 10px;
  border-radius: 14px;
}

.appointment-reminder-card h3 {
  margin: 0 0 4px;
}

.appointment-reminder-card .muted {
  margin: 0 0 5px;
}

#abstinenceQuickModal .entry-modal-card menu {
  justify-content: stretch;
}

#abstinenceQuickModal .entry-modal-card menu button {
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

#sleepQualityEditModal .entry-modal-card menu {
  justify-content: stretch;
}

#sleepQualityEditModal .entry-modal-card menu button {
  flex: 1 1 0;
  min-width: 0;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

#activityFeedbackModal .entry-modal-card menu {
  justify-content: stretch;
}

#activityFeedbackModal .entry-modal-card {
  width: min(420px, 92vw);
  padding: 10px 12px;
}

#appointmentAttendanceModal .entry-modal-card {
  width: min(460px, 92vw);
}

#appointmentAttendanceModal .entry-modal-card menu {
  justify-content: stretch;
}

#appointmentAttendanceModal .entry-modal-card menu button {
  flex: 1 1 0;
  min-width: 0;
  min-height: 42px;
}

#activityFeedbackModal .entry-modal-card menu button {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  min-height: 42px;
  font-size: 0.92rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8px 12px;
}

.activity-feedback-attendance {
  margin-top: 4px;
  display: flex;
  justify-content: center;
}

.activity-attendance-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: min(420px, 100%);
  margin: 0 auto;
}

.activity-attendance-toggle .small-btn {
  min-height: 42px;
  min-width: 0;
  width: 100%;
  font-weight: 700;
  border: 1px solid var(--border);
  background: var(--card-bg-soft);
  color: var(--card-text);
}

.activity-attendance-toggle .small-btn.is-active {
  border-color: #0077CB;
  background: linear-gradient(135deg, #B52555, #0077CB);
  color: #fff;
}

#activityFeedbackStars {
  margin-top: 12px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 0 2px;
  margin-left: auto;
  margin-right: auto;
}

#activityFeedbackStars button {
  flex: 1 1 0;
  text-align: center;
}

#activityFeedbackRatingLabel {
  margin-top: 10px;
  margin-bottom: 8px;
}

#activityFeedbackText {
  min-height: 82px;
}

#activityFeedbackMeta {
  padding: 6px 8px;
  gap: 2px;
  line-height: 1.25;
}

#activityFeedbackMeta p {
  margin: 0;
}

#activityFeedbackMeta p + p {
  margin-top: 1px;
}

.appointment-reminder-content {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card-bg-soft);
  padding: 6px 8px;
  display: grid;
  gap: 3px;
  line-height: 1.3;
}

#entryModal .entry-modal-card {
  padding: 8px 10px 7px;
}

#entryModal .entry-modal-card h3 {
  margin: 0 0 4px;
}

#entryModal #entryModalText.advice-box {
  padding: 4px 6px;
}

#entryModal .entry-modal-card menu {
  margin-top: 6px;
}

#homeCardExpandModal .entry-modal-card {
  width: min(760px, 94vw);
  padding: 8px 10px 7px;
}

#homeCardExpandModal .entry-modal-card h3 {
  margin: 0 0 4px;
}

#homeCardExpandBody.appointment-reminder-content {
  padding: 6px 8px;
  gap: 3px;
  line-height: 1.3;
}

#homeCardExpandModal .entry-modal-card menu {
  margin-top: 6px;
}

.recovery-online-session-card {
  width: min(1760px, 98vw);
  max-width: 98vw;
  height: calc(100vh - 20px);
  max-height: calc(100vh - 20px);
  min-height: 0;
  padding: 8px 10px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 4px;
  overflow: hidden;
}

.recovery-online-session-actions-top {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.recovery-online-session-card h3 {
  margin: 0;
}

.recovery-online-inline-panel {
  margin-top: 10px;
  padding: 8px 10px;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 6px;
  min-height: 72vh;
  max-height: 72vh;
  height: 72vh;
  overflow: hidden;
}

.recovery-online-appointments-card-min {
  max-height: none;
  overflow: visible;
  transition: none;
}

.recovery-online-appointments-card-min .muted,
.recovery-online-appointments-card-min .meta,
.recovery-online-appointments-card-min #recoveryOnlineList {
  display: block;
}

.recovery-online-inline-panel.expanded {
  min-height: 82vh;
  max-height: 82vh;
  height: 82vh;
}

.recovery-online-inline-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.recovery-online-inline-head h3 {
  margin: 0;
}

.recovery-online-session-actions-top .small-btn,
.recovery-online-session-actions-top button[value='close'] {
  min-height: 28px;
  padding: 4px 9px;
  font-size: 0.75rem;
}

.recovery-online-session-frame {
  width: 100%;
  min-height: 0;
  height: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #ffffff;
  overflow: hidden;
  padding: 0;
  resize: none;
}

.recovery-online-session-layout {
  display: block;
  min-height: 0;
  height: 100%;
}

.appointment-reminder-content .meta {
  margin: 0;
  font-size: 0.84rem;
}

.activity-feedback-attendance {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  margin: 8px 0 2px;
}

.activity-feedback-attendance label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}

.mini-reminder-toast-host {
  position: fixed !important;
  right: 14px !important;
  bottom: 14px !important;
  z-index: 1800;
  display: grid;
  gap: 8px;
  width: min(340px, calc(100vw - 24px));
  pointer-events: none;
}

.mini-reminder-toast {
  pointer-events: auto;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  background: linear-gradient(135deg, rgba(181, 37, 85, 0.95), rgba(0, 119, 203, 0.95));
  color: #ffffff;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.28);
  transform: translateY(24px);
  opacity: 0;
  transition: opacity 200ms ease, transform 200ms ease;
}

.mini-reminder-toast.show {
  opacity: 1;
  transform: translateY(0);
  animation: toast-slide-up 240ms ease-out;
}

.mini-reminder-toast-title {
  font-weight: 800;
  font-size: 0.88rem;
  margin-bottom: 3px;
}

.mini-reminder-toast-text {
  font-size: 0.82rem;
  line-height: 1.35;
}

.mini-reminder-toast-alert {
  border-color: rgba(181, 37, 85, 0.68);
  box-shadow: 0 12px 22px rgba(10, 22, 46, 0.34);
}

.mini-reminder-toast-actions {
  margin-top: 8px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.mini-reminder-toast-actions .small-btn {
  min-width: 96px;
}

.mini-reminder-toast-actions .toast-expand-btn {
  background: linear-gradient(120deg, #0077cb, #00a499);
  color: #eef8ff;
}

.mini-reminder-toast-actions .toast-ack-btn {
  background: linear-gradient(120deg, #b52555, #8f2f8e);
  color: #ffeef5;
}

.persistent-reminder-stack,
.persistent-reminder-host {
  position: fixed !important;
  right: 14px !important;
  bottom: 14px !important;
  z-index: 1860;
  display: grid;
  gap: 8px;
  width: min(360px, calc(100vw - 24px));
}

.persistent-reminder-card {
  border: 1px solid rgba(0, 119, 203, 0.45);
  border-radius: 12px;
  padding: 10px 12px;
  background: linear-gradient(145deg, rgba(31, 42, 68, 0.98), rgba(24, 38, 61, 0.98));
  color: #f0f7ff;
  box-shadow: 0 10px 24px rgba(15, 24, 42, 0.35);
  animation: none;
}

@keyframes toast-slide-up {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.persistent-reminder-card .meta {
  color: #c7dbf1;
}

.persistent-reminder-actions {
  margin-top: 8px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.journal-processing-box {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  background: var(--card-bg-soft);
  text-align: center;
}

.journal-processing-intro {
  margin: 0 0 10px;
  font-weight: 800;
  font-size: 1.08rem;
  line-height: 1.35;
  color: var(--card-text);
  text-align: center;
}

.journal-processing-status {
  margin: 0 0 10px;
  font-weight: 700;
  color: var(--card-text);
  text-align: center;
}

.journal-processing-track {
  position: relative;
  width: 100%;
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: rgba(31, 42, 68, 0.14);
}

.journal-processing-fill {
  position: absolute;
  top: 0;
  left: -45%;
  width: 45%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #B52555 0%, #0077CB 55%, #00A499 100%);
  animation: journal-processing-slide 1.2s ease-in-out infinite;
}

@keyframes journal-processing-slide {
  0% { left: -45%; }
  100% { left: 100%; }
}

body[data-theme="dark"] .journal-processing-box {
  background: #1b2d4b;
}

.star-rating {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 6px;
}

#starRating {
  width: 100%;
  justify-content: space-between;
}

#starRating button {
  flex: 1 1 0;
  text-align: center;
}

.star-rating button {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: #b68a1d;
  font-size: 1.6rem;
  line-height: 1;
  padding: 0 2px;
  border-radius: 0;
  transition: transform 120ms ease, color 120ms ease, filter 120ms ease;
}

.star-rating button:hover,
.star-rating button:focus-visible,
.star-rating button.active {
  color: #ffd76a;
  background: transparent;
  transform: translateY(-1px) scale(1.05);
  filter: drop-shadow(0 0 4px rgba(255, 216, 106, 0.45));
}

.feedback-banner-wrap {
  margin-bottom: 2px;
}

.feedback-banner-track-wrap {
  overflow: hidden;
  white-space: nowrap;
  border-radius: 8px;
  border: 1px solid rgba(0, 119, 203, 0.24);
  background: rgba(255, 255, 255, 0.35);
  padding: 8px 0;
}

.feedback-banner-track {
  display: inline-block;
  white-space: nowrap;
  padding-left: 100%;
}

.feedback-banner-track.is-animated {
  animation: feedback-banner-scroll 50s linear infinite;
}

.feedback-banner-item {
  display: inline-block;
  margin-right: 14px;
}

.feedback-banner-sep {
  display: inline-block;
  margin: 0 12px;
  color: #7ea2c8;
}

.preview-readonly-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 10px;
  border: 1px solid rgba(181, 37, 85, 0.42);
  background: linear-gradient(135deg, rgba(181, 37, 85, 0.16), rgba(0, 119, 203, 0.12));
}

.preview-readonly-banner strong {
  color: #ffffff;
  font-weight: 800;
}

.preview-readonly-banner #adminPreviewBannerText {
  color: #ffffff;
  font-weight: 700;
}

.preview-readonly-banner .preview-return-btn {
  margin-left: auto;
  text-decoration: none;
}

body[data-theme="dark"] .preview-readonly-banner {
  border-color: rgba(181, 37, 85, 0.55);
  background: linear-gradient(135deg, rgba(181, 37, 85, 0.26), rgba(0, 119, 203, 0.2));
}

body[data-theme="dark"] .preview-readonly-banner strong { color: #ffffff; }
body[data-theme="dark"] .preview-readonly-banner #adminPreviewBannerText {
  color: #ffffff;
  font-weight: 700;
}

@keyframes feedback-banner-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

body[data-theme="dark"] .feedback-banner-track-wrap {
  background: rgba(31, 42, 68, 0.48);
  border-color: rgba(124, 173, 228, 0.35);
}

body[data-theme="dark"] .star-rating button {
  background: transparent;
  color: #ffd76a;
}

@media (max-width: 980px) {
  header {
    grid-template-columns: 1fr;
  }

  .hero-copy {
    grid-column: 1;
    min-width: 0;
    width: 100%;
  }

  .header-actions {
    justify-self: start;
    justify-items: start;
  }

  body.client-app .hero-copy {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 8px;
    padding: 2px 4px;
  }

  body.client-app .brand-image {
    width: min(220px, 100%);
    margin: 0 auto;
    object-position: center;
  }

  body.client-app .greeting-text {
    font-size: 1.55rem;
  }

  .metric-grid { grid-template-columns: 1fr 1fr; }
  .two-up, .three-up { grid-template-columns: 1fr; }
  .action-centre-split { grid-template-columns: 1fr; }
  .action-centre-two-col { grid-template-columns: 1fr; }
  .ac-kanban { grid-template-columns: 1fr; }
  .calendar-grid.week, .calendar-grid.month { grid-template-columns: 1fr; }
}

/* Mobile and tablet compression layer for widget-heavy screens */
body.client-app[data-site-view="mobile"] {
  font-size: 14px;
}

body.client-app[data-site-view="mobile"] .header-actions {
  gap: 6px;
}

body.client-app[data-site-view="mobile"] .risk-pill,
body.client-app[data-site-view="mobile"] .tag {
  padding: 4px 8px;
  font-size: 0.72rem;
}

body.client-app[data-site-view="mobile"] .small-btn {
  min-height: 30px;
  padding: 5px 8px;
  font-size: 0.74rem;
  border-radius: 8px;
}

body.client-app[data-site-view="mobile"] .tab-hover-dropdown,
body.client-app[data-site-view="mobile"] .metric-hover-panel,
body.client-app[data-site-view="mobile"] .forecast-hover-panel,
body.client-app[data-site-view="mobile"] .clean-time-hover-panel,
body.client-app[data-site-view="mobile"] .strides-hover-panel {
  width: min(94vw, 360px);
  padding: 8px;
  font-size: 0.78rem;
}

body.client-app[data-site-view="mobile"] .tab-hover-dropdown h4,
body.client-app[data-site-view="mobile"] .metric-hover-panel h4 {
  font-size: 0.82rem;
  margin-bottom: 6px;
}

body.client-app[data-site-view="mobile"] .compact-list li,
body.client-app[data-site-view="mobile"] .list li {
  padding: 8px;
}

body.client-app[data-site-view="mobile"] .calendar-wrap {
  padding: 6px;
  border-radius: 10px;
}

body.client-app[data-site-view="mobile"] .appointments-row-grid {
  grid-template-columns: 1fr;
  gap: 6px;
}

body.client-app[data-site-view="mobile"] .appointment-mini {
  padding: 8px;
  gap: 6px;
}

body.client-app[data-site-view="mobile"] .message-widget-toggle {
  right: 10px;
  bottom: 10px;
  padding: 8px 10px;
}

body.client-app[data-site-view="mobile"][data-message-widget-side="left"] .message-widget-toggle {
  left: 10px;
  right: auto;
}

body.client-app[data-site-view="mobile"] .message-widget-panel {
  right: 8px;
  bottom: 52px;
  width: min(96vw, 360px);
  padding: 8px;
}

body.client-app[data-site-view="mobile"] .message-widget-panel.popout {
  width: min(96vw, 500px);
  height: min(76vh, 560px);
  min-width: 300px;
  min-height: 260px;
}

body.client-app[data-site-view="mobile"][data-message-widget-side="left"] .message-widget-panel {
  left: 8px;
  right: auto;
}

body.client-app[data-site-view="mobile"] .message-widget-panel .chat-window {
  min-height: 180px;
  max-height: 240px;
}

body.client-app[data-site-view="mobile"] .persistent-reminder-card,
body.client-app[data-site-view="mobile"] .appointment-reminder-card,
body.client-app[data-site-view="mobile"] .entry-modal-card {
  width: min(96vw, 560px);
  padding: 10px;
}

body.client-app[data-site-view="mobile"] .action-centre-col,
body.client-app[data-site-view="mobile"] .action-centre-detail,
body.client-app[data-site-view="mobile"] .timeline-expanded-day-card,
body.client-app[data-site-view="mobile"] .timeline-older-wrap {
  padding: 10px;
}

body.client-app[data-site-view="mobile"] .journal-entry-mode-buttons .small-btn {
  min-height: 56px;
  font-size: 0.94rem;
  padding: 10px 12px;
}

body.client-app[data-site-view="mobile"] .journal-compose-toolbar .small-btn,
body.client-app[data-site-view="mobile"] .community-compose-toolbar .small-btn {
  min-height: 28px;
  padding: 3px 6px;
  font-size: 0.72rem;
}

body.client-app[data-site-view="mobile"] .mini-chart {
  min-height: 160px;
}

body.client-app[data-site-view="tablet"] {
  font-size: 15px;
}

body.client-app[data-site-view="tablet"] .risk-pill,
body.client-app[data-site-view="tablet"] .tag {
  font-size: 0.76rem;
  padding: 5px 9px;
}

body.client-app[data-site-view="tablet"] .small-btn {
  min-height: 32px;
  padding: 5px 9px;
  font-size: 0.78rem;
}

body.client-app[data-site-view="tablet"] .tab-hover-dropdown,
body.client-app[data-site-view="tablet"] .metric-hover-panel,
body.client-app[data-site-view="tablet"] .forecast-hover-panel {
  width: min(86vw, 420px);
  padding: 9px;
}

body.client-app[data-site-view="tablet"] .card {
  padding: 14px;
}

body.client-app[data-site-view="tablet"] .appointments-row-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
}

body.client-app[data-site-view="tablet"] .message-widget-panel {
  width: min(78vw, 380px);
}

body.client-app[data-site-view="tablet"] .message-widget-panel.popout {
  width: min(86vw, 640px);
  height: min(74vh, 600px);
}

body.client-app[data-site-view="tablet"] .journal-entry-mode-buttons .small-btn {
  min-height: 72px;
  font-size: 1.05rem;
  padding: 12px 14px;
}

.login-main {
  max-width: 560px;
  margin: 6rem auto 0;
  padding: 0 1rem;
}

.login-card {
  padding-top: 18px;
}

.login-logo-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 0.5rem 0 1.1rem;
  text-align: center;
}

.login-logo {
  height: 72px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: center;
  background: transparent;
  border: 0;
  margin: 0 auto;
}

.login-title {
  margin-top: 0;
  margin-bottom: 0.35rem;
  text-align: center;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.05;
}

.login-status {
  min-height: 1.25rem;
}