/* ==========================================================================
   redesign.css — SlotPlan Twenty-based design system
   Loads after tokens.css. All values flow from --t-* tokens.
   No JSX required. Existing class names continue to work.
   ========================================================================== */


/* ── 1. Alias bridge — legacy names → Twenty tokens ───────────────────────── */
:root {
  /* Accent */
  --accent:      var(--t-accent-primary);
  --accent-dim:  var(--t-accent-secondary);
  --accent-soft: var(--t-accent-soft);
  --accent-bg:   var(--t-accent-bg);
  --accent-h:    14;            /* hue kept for oklch calcs in base */

  /* Backgrounds */
  --bg:        var(--t-background-primary);
  --bg-soft:   var(--t-background-secondary);
  --bg-hover:  var(--t-background-tertiary);
  --bg-sunken: var(--t-background-tertiary);

  /* Borders */
  --line:        var(--t-border-color-medium);
  --line-soft:   var(--t-border-color-light);
  --line-strong: var(--t-border-color-strong);

  /* Text */
  --fg:    var(--t-font-color-primary);
  --fg-2:  var(--t-font-color-secondary);
  --fg-3:  var(--t-font-color-tertiary);
  --fg-4:  var(--t-font-color-light);

  /* Semantic */
  --danger: var(--t-color-danger);
  --warn:   var(--t-color-warning);
  --info:   var(--t-color-info);
  --muted:  var(--t-font-color-tertiary);

  /* Radius — aligned to Twenty scale */
  --radius-sm: var(--t-border-radius-sm);   /* 4px */
  --radius:    var(--t-border-radius-md);   /* 8px */
  --radius-lg: 12px;

  /* Shadows */
  --shadow-1: var(--t-box-shadow-light);
  --shadow-2: var(--t-box-shadow-strong);
  --shadow-3: var(--t-box-shadow-super-heavy);

  /* Typography */
  --font-sans: var(--t-font-family);
  --font-mono: var(--t-code-font-family);

  /* Layout */
  --header-h:  48px;
  --toolbar-h: 44px;
  --sidebar-w: 0px;
  --row-h:     calc(48px * var(--density, 1));
}


/* ── 2. Base reset ─────────────────────────────────────────────────────────── */
html, body {
  background: var(--t-background-secondary);
  color: var(--t-font-color-primary);
  font-family: var(--t-font-family);
  font-size: var(--t-font-size-md);   /* 14px */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.num, .mono {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

:lang(th), [lang="th"] { line-height: 1.55; }

::-webkit-scrollbar       { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--t-border-color-medium);
  border-radius: var(--t-border-radius-pill);
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--t-border-color-strong); background-clip: content-box; }


/* ── 3. App shell — JetOS left-nav layout ──────────────────────────────────── */
.app {
  display: flex !important;
  flex-direction: row;
  grid-template-rows: none !important;
  height: 100vh; width: 100vw;
  overflow: hidden;
}
.app-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.app-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr !important;
}
.app-body.with-right {
  grid-template-columns: 1fr var(--rightbar-w, 380px) !important;
}
/* legacy member/project filter sidebar stays retired */
.sidebar { display: none !important; }

/* ── 3b. Left navigation sidebar ───────────────────────────────────────────── */
.nav-sidebar {
  width: 240px;
  flex: none;
  display: flex;
  flex-direction: column;
  background: var(--t-background-primary);
  border-right: 1px solid var(--t-border-color-medium);
  overflow: visible;            /* let collapsed tooltips escape to the right */
  transition: width var(--t-animation-duration-normal) ease;
}
.nav-sidebar.collapsed { width: 60px; }

/* Brand */
.nav-brand {
  height: var(--header-h);
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--t-spacing-2);
  padding: 0 var(--t-spacing-4);
  border-bottom: 1px solid var(--t-border-color-light);
}
.nav-sidebar.collapsed .nav-brand { padding: 0; justify-content: center; }
.nav-brand .brand-mark {
  width: 28px; height: 28px;
  border-radius: var(--t-border-radius-sm);
  background: var(--t-accent-primary);
  display: grid; place-items: center;
  color: #fff;
  font-size: 12px;
  font-weight: var(--t-font-weight-semi-bold);
  letter-spacing: -0.02em;
  flex: none;
}
.nav-brand-name {
  font-size: var(--t-font-size-lg);
  font-weight: var(--t-font-weight-semi-bold);
  color: var(--t-font-color-primary);
  letter-spacing: -0.01em;
}

/* Scroll area + groups */
.nav-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--t-spacing-3) var(--t-spacing-2);
}
/* collapsed: few icon-only items — drop clipping so tooltips escape to the right */
.nav-sidebar.collapsed .nav-scroll { overflow: visible; }
.nav-group { margin-bottom: var(--t-spacing-4); }
.nav-group:last-child { margin-bottom: 0; }
.nav-group-label {
  font-size: var(--t-font-size-xxs);
  font-weight: var(--t-font-weight-semi-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--t-font-color-light);
  padding: 0 var(--t-spacing-2) var(--t-spacing-1);
}
.nav-group-toggle {
  width: 100%;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--t-spacing-2);
  padding: 0 var(--t-spacing-2);
  margin-bottom: var(--t-spacing-1);
  border-radius: var(--t-border-radius-sm);
  color: var(--t-font-color-light);
}
.nav-group-toggle:hover {
  background: var(--t-background-tertiary);
  color: var(--t-font-color-secondary);
}
.nav-group-toggle .nav-group-label {
  flex: 1;
  padding: 0;
  text-align: left;
}
.nav-group-chevron {
  flex: none;
  display: grid;
  place-items: center;
}

/* Nav item */
.nav-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--t-spacing-3);
  height: 36px;
  padding: 0 10px;
  border-radius: var(--t-border-radius-sm);
  color: var(--t-font-color-secondary);
  font-size: var(--t-font-size-md);
  font-weight: var(--t-font-weight-medium);
  transition: background var(--t-animation-duration-fast) ease, color var(--t-animation-duration-fast) ease;
  margin-bottom: 1px;
}
.nav-item:hover {
  background: var(--t-background-tertiary);
  color: var(--t-font-color-primary);
}
.nav-item.active {
  background: var(--t-accent-primary);
  color: #fff;
  font-weight: var(--t-font-weight-semi-bold);
}
.nav-item.active:hover { background: var(--t-accent-primary); color: #fff; }
.nav-item.primary {
  background: var(--t-color-blue);
  color: #fff;
  font-weight: var(--t-font-weight-semi-bold);
  box-shadow: 0 2px 8px color-mix(in oklab, var(--t-color-blue) 38%, transparent);
}
.nav-item.primary:hover {
  background: color-mix(in oklab, var(--t-color-blue) 88%, #000);
  color: #fff;
}
.nav-item-icon {
  flex: none;
  width: 20px;
  display: grid;
  place-items: center;
}
.nav-item-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}
.nav-sidebar.collapsed .nav-item {
  justify-content: center;
  padding: 0;
  gap: 0;
}

/* Staged project nav: a quiet section head + one indented row per lifecycle
   stage, connected by a hairline rail aligned under the folder icon. The active
   stage carries the single solid accent (one-accent rule); the head only shifts
   to ink when the projects view is open. */
.nav-projgroup { margin-bottom: 1px; }
.nav-subhead {
  display: flex;
  align-items: center;
  gap: var(--t-spacing-3);
  height: 34px;
  padding: 0 10px;
  color: var(--t-font-color-tertiary);
  font-size: var(--t-font-size-md);
  font-weight: var(--t-font-weight-medium);
}
.nav-subhead.on {
  color: var(--t-font-color-primary);
  font-weight: var(--t-font-weight-semi-bold);
}
.nav-subhead .nav-item-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}
.nav-substack {
  display: flex;
  flex-direction: column;
  gap: 1px;
  /* rail sits under the folder icon centre: 10px item pad + 10px half-icon */
  margin: 1px 0 2px 20px;
  padding-left: 10px;
  border-left: 1px solid var(--t-border-color-light);
}
.nav-subitem {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--t-spacing-2);
  height: 30px;
  padding: 0 8px;
  border-radius: var(--t-border-radius-sm);
  color: var(--t-font-color-secondary);
  font-size: var(--t-font-size-sm);
  font-weight: var(--t-font-weight-medium);
  transition: background var(--t-animation-duration-fast) ease, color var(--t-animation-duration-fast) ease;
}
.nav-subitem-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}
.nav-subitem-count {
  flex: none;
  font-size: var(--t-font-size-xs);
  font-weight: var(--t-font-weight-semi-bold);
  color: var(--t-font-color-tertiary);
  font-variant-numeric: tabular-nums;
}
.nav-subitem:hover {
  background: var(--t-background-tertiary);
  color: var(--t-font-color-primary);
}
.nav-subitem:hover .nav-subitem-count { color: var(--t-font-color-secondary); }
.nav-subitem.muted { color: var(--t-font-color-tertiary); }
.nav-subitem.active,
.nav-subitem.active.muted {
  background: var(--t-accent-primary);
  color: #fff;
  font-weight: var(--t-font-weight-semi-bold);
}
.nav-subitem.active:hover { background: var(--t-accent-primary); color: #fff; }
.nav-subitem.active .nav-subitem-count { color: rgba(255, 255, 255, 0.72); }
.nav-subitem:focus-visible {
  outline: 2px solid var(--t-accent-primary);
  outline-offset: -2px;
}

/* Footer */
.nav-foot {
  flex: none;
  border-top: 1px solid var(--t-border-color-light);
  padding: var(--t-spacing-2);
}
.nav-collapse-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--t-spacing-3);
  height: 32px;
  padding: 0 10px;
  border-radius: var(--t-border-radius-sm);
  color: var(--t-font-color-tertiary);
  font-size: var(--t-font-size-sm);
  transition: background var(--t-animation-duration-fast) ease, color var(--t-animation-duration-fast) ease;
  margin-bottom: var(--t-spacing-1);
}
.nav-collapse-btn:hover { background: var(--t-background-tertiary); color: var(--t-font-color-primary); }
.nav-sidebar.collapsed .nav-collapse-btn { justify-content: center; padding: 0; gap: 0; }

/* Prominent "Connect LINE" CTA — LINE brand green, hidden once linked */
.nav-line-connect {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 38px;
  padding: 0 10px;
  margin-bottom: var(--t-spacing-2);
  border-radius: var(--t-border-radius-sm);
  background: #06C755;
  color: #fff;
  font-size: var(--t-font-size-sm);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(6, 199, 85, 0.35);
  transition: filter var(--t-animation-duration-fast) ease;
}
.nav-line-connect:hover { filter: brightness(0.93); }
.nav-line-connect .nav-line-logo { flex: none; }
.nav-sidebar.collapsed .nav-line-connect { justify-content: center; padding: 0; gap: 0; }

/* Prominent "Connect Discord" CTA — Discord blurple, hidden once linked */
.nav-discord-connect {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 38px;
  padding: 0 10px;
  margin-bottom: var(--t-spacing-2);
  border-radius: var(--t-border-radius-sm);
  background: #5865F2;
  color: #fff;
  font-size: var(--t-font-size-sm);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(88, 101, 242, 0.35);
  transition: filter var(--t-animation-duration-fast) ease;
}
.nav-discord-connect:hover { filter: brightness(0.93); }
.nav-discord-connect .nav-discord-logo { flex: none; }
.nav-sidebar.collapsed .nav-discord-connect { justify-content: center; padding: 0; gap: 0; }

.nav-version {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--t-spacing-2);
  margin: var(--t-spacing-1_5) 0 0;
  padding: 6px 8px;
  border-radius: var(--t-border-radius-sm);
  border: 1px solid var(--t-border-color-light);
  background: var(--t-background-secondary);
  color: var(--t-font-color-tertiary);
  font-size: 10.5px;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
}
.nav-version-label {
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: var(--t-font-weight-semi-bold);
}
.nav-version-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: var(--t-font-weight-medium);
  letter-spacing: 0;
}

.nav-user-wrap { position: relative; }
.nav-user {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--t-spacing-2);
  padding: var(--t-spacing-1_5);
  border-radius: var(--t-border-radius-md);
  transition: background var(--t-animation-duration-fast) ease;
}
.nav-user:hover { background: var(--t-background-tertiary); }
.nav-sidebar.collapsed .nav-user { justify-content: center; padding: var(--t-spacing-1); }
.nav-user-text { flex: 1; min-width: 0; text-align: left; }
.nav-user-name {
  font-size: var(--t-font-size-sm);
  font-weight: var(--t-font-weight-medium);
  color: var(--t-font-color-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.2;
}
.nav-user-role {
  font-size: var(--t-font-size-xs);
  color: var(--t-font-color-tertiary);
  line-height: 1.3;
}
.nav-user-role.mgr { color: var(--t-accent-text); font-weight: var(--t-font-weight-medium); }

/* User menu popover */
.nav-menu-backdrop { position: fixed; inset: 0; z-index: 90; }
/* fixed positioning escapes the sidebar's overflow:hidden clip */
.nav-user-menu {
  position: fixed;
  bottom: 14px;
  left: 12px;
  min-width: 220px;
  background: var(--t-background-primary);
  border: 1px solid var(--t-border-color-medium);
  border-radius: var(--t-border-radius-md);
  box-shadow: var(--t-box-shadow-strong);
  padding: var(--t-spacing-1_5);
  z-index: 100;
}
.nav-sidebar.collapsed .nav-user-menu { left: 68px; }
.nav-menu-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--t-spacing-2) 10px;
  border-radius: var(--t-border-radius-sm);
  font-size: var(--t-font-size-md);
  color: var(--t-font-color-primary);
  text-align: left;
  transition: background var(--t-animation-duration-fast) ease;
}
.nav-menu-row:hover { background: var(--t-background-secondary); }
.nav-menu-row.active { background: var(--t-background-secondary); color: var(--t-accent-text); font-weight: var(--t-font-weight-medium); }
.nav-menu-row.danger { color: var(--t-color-danger); }
.nav-menu-row-icon { flex: none; width: 18px; display: grid; place-items: center; }
.nav-menu-sep { height: 1px; background: var(--t-border-color-light); margin: var(--t-spacing-1_5) 0; }

/* Topbar page title */
.topbar-title {
  font-size: var(--t-font-size-lg);
  font-weight: var(--t-font-weight-semi-bold);
  color: var(--t-font-color-primary);
  letter-spacing: -0.01em;
}

/* Collapsed sidebar: tooltips appear to the RIGHT of the icon (not clipped) */
.nav-sidebar.collapsed [data-tip]:hover::before,
.nav-sidebar.collapsed [data-tip]:focus-visible::before {
  bottom: auto; top: 50%;
  left: calc(100% + 12px);
  transform: translateY(-50%);
}
.nav-sidebar.collapsed [data-tip]:hover::after,
.nav-sidebar.collapsed [data-tip]:focus-visible::after {
  bottom: auto; top: 50%;
  left: calc(100% + 4px);
  transform: translateY(-50%);
  border-top-color: transparent;
  border-right-color: var(--fg);
}

/* Keyboard focus visibility for nav controls */
.nav-item:focus-visible,
.nav-collapse-btn:focus-visible,
.nav-user:focus-visible,
.nav-menu-row:focus-visible,
.topbar .iconbtn:focus-visible {
  outline: 2px solid var(--t-accent-primary);
  outline-offset: -2px;
  border-radius: var(--t-border-radius-sm);
}


/* ── 4. Topbar ─────────────────────────────────────────────────────────────── */
.topbar {
  height: var(--header-h);
  padding: 0 var(--t-spacing-4);
  gap: var(--t-spacing-2);
  background: var(--t-background-primary);
  border-bottom: 1px solid var(--t-border-color-medium);
  box-shadow: none;
}

.topbar .brand {
  font-size: var(--t-font-size-sm);
  font-weight: var(--t-font-weight-semi-bold);
  padding-right: var(--t-spacing-3);
  margin-right: var(--t-spacing-1);
  border-right: 1px solid var(--t-border-color-medium);
  height: 28px;
  align-self: center;
  gap: var(--t-spacing-2);
  color: var(--t-font-color-primary);
}

.topbar .brand-mark {
  width: 24px; height: 24px;
  border-radius: var(--t-border-radius-sm);
  background: var(--t-accent-primary);
  font-size: 11px;
  font-weight: var(--t-font-weight-semi-bold);
  color: #fff;
  letter-spacing: -0.02em;
  box-shadow: none;
}

.topbar .crumbs { display: none; }

/* Nav buttons */
.topbar .tb-btn {
  height: 32px;
  padding: 0 var(--t-spacing-3) !important;
  font-size: var(--t-font-size-sm) !important;
  font-weight: var(--t-font-weight-medium);
  color: var(--t-font-color-secondary);
  border-radius: var(--t-border-radius-sm);
  background: transparent;
  border: 0;
  letter-spacing: 0;
  transition: var(--t-transition-bg), color var(--t-animation-duration-fast) ease;
}
.topbar .tb-btn:hover {
  background: var(--t-background-tertiary);
  color: var(--t-font-color-primary);
}
.topbar .tb-btn.primary,
.topbar .tb-btn.active {
  background: var(--t-accent-primary) !important;
  color: #fff !important;
  font-weight: var(--t-font-weight-semi-bold);
}

/* Search */
.topbar .search {
  background: var(--t-background-secondary);
  border: 1px solid transparent;
  border-radius: var(--t-border-radius-md);
  height: 32px;
  padding: 0 var(--t-spacing-3);
  width: 260px;
  color: var(--t-font-color-tertiary);
  transition: border-color var(--t-animation-duration-fast) ease, background var(--t-animation-duration-fast) ease;
}
.topbar .search:hover {
  background: var(--t-background-tertiary);
  border-color: var(--t-border-color-medium);
}
.topbar .search:focus-within {
  background: var(--t-background-primary);
  border-color: var(--t-accent-primary);
  box-shadow: 0 0 0 3px rgba(24, 24, 27, 0.1);
}
.topbar .search input { font-size: var(--t-font-size-sm); }
.topbar .search kbd {
  background: var(--t-background-primary);
  border: 1px solid var(--t-border-color-medium);
  font-size: var(--t-font-size-xxs);
  padding: 1px var(--t-spacing-1_5);
  border-radius: var(--t-border-radius-xs);
  color: var(--t-font-color-tertiary);
}

/* Icon buttons */
.topbar .iconbtn {
  width: 32px; height: 32px;
  border-radius: var(--t-border-radius-sm);
  color: var(--t-font-color-secondary);
  transition: var(--t-transition-bg);
}
.topbar .iconbtn:hover {
  background: var(--t-background-tertiary);
  color: var(--t-font-color-primary);
}
.topbar .iconbtn .dot {
  background: var(--t-color-danger);
  box-shadow: 0 0 0 2px var(--t-background-primary);
}

/* User chip */
.topbar .user {
  height: 32px;
  padding: 2px var(--t-spacing-2) 2px var(--t-spacing-1);
  border-radius: var(--t-border-radius-pill);
  border: 1px solid transparent;
  gap: var(--t-spacing-2);
}
.topbar .user:hover {
  background: var(--t-background-tertiary);
  border-color: var(--t-border-color-medium);
}
.topbar .user .label { font-size: var(--t-font-size-xs); font-weight: var(--t-font-weight-medium); }
.topbar .user .role  { font-size: var(--t-font-size-xs); color: var(--t-font-color-tertiary); }
.topbar .user .role.mgr { color: var(--t-accent-secondary); font-weight: var(--t-font-weight-semi-bold); }


/* ── 5. Avatars ─────────────────────────────────────────────────────────────── */
.avatar {
  width: 24px; height: 24px;
  font-size: var(--t-font-size-xxs);
  font-weight: var(--t-font-weight-semi-bold);
  border-radius: var(--t-border-radius-rounded);
  letter-spacing: 0;
  flex-shrink: 0;
}
.avatar.sm { width: 20px; height: 20px; font-size: 9px; }
.avatar.md { width: 28px; height: 28px; font-size: var(--t-font-size-xs); }
.avatar.lg { width: 36px; height: 36px; font-size: var(--t-font-size-sm); }
/* LINE profile picture rendered inside any avatar wrapper (overlays the
   initials). Not scoped to .avatar — it must adapt to every call site that
   drops AvatarFill inside its own badge (PM cells, gantt, comments, etc.). */
.avatar-img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}


/* ── 6. Timeline toolbar ───────────────────────────────────────────────────── */
.timeline-toolbar {
  min-height: var(--toolbar-h);
  padding: var(--t-spacing-2) var(--t-spacing-4);
  background: var(--t-background-primary);
  border-bottom: 1px solid var(--t-border-color-light);
  flex-wrap: wrap;
  row-gap: var(--t-spacing-2);
  column-gap: var(--t-spacing-3);
}
.timeline-toolbar > * { flex-shrink: 0; white-space: nowrap; }
.tb-group { gap: var(--t-spacing-1); flex-shrink: 0; }

.timeline-toolbar .tb-btn,
.tb-toolbar .tb-btn {
  height: 30px;
  padding: 0 var(--t-spacing-2);
  font-size: var(--t-font-size-xs);
  border-radius: var(--t-border-radius-sm);
  background: transparent;
  color: var(--t-font-color-secondary);
  transition: var(--t-transition-bg);
}
.timeline-toolbar .tb-btn:hover {
  background: var(--t-background-tertiary);
  color: var(--t-font-color-primary);
}
.timeline-toolbar .tb-btn.active {
  background: var(--t-accent-soft);
  color: var(--t-accent-secondary);
  font-weight: var(--t-font-weight-semi-bold);
}
.timeline-toolbar .tb-btn.primary {
  background: var(--t-accent-primary);
  color: #fff !important;
  height: 32px;
  padding: 0 var(--t-spacing-4);
  font-weight: var(--t-font-weight-semi-bold);
  box-shadow: var(--t-box-shadow-light);
}
.timeline-toolbar .tb-btn.primary:hover {
  background: var(--t-accent-secondary);
}
.timeline-toolbar .tb-btn.ghost {
  border: 1px solid var(--t-border-color-medium);
  background: var(--t-background-primary);
  color: var(--t-font-color-secondary);
}
.timeline-toolbar .tb-btn.ghost:hover {
  background: var(--t-background-tertiary);
  border-color: var(--t-border-color-strong);
}

/* Segmented control */
.tb-seg {
  background: var(--t-background-primary);
  border: 1px solid var(--t-border-color-medium);
  border-radius: var(--t-border-radius-md);
  padding: var(--t-spacing-0_5);
  height: 32px;
  gap: var(--t-spacing-0_5);
}
.tb-seg .tb-btn {
  height: 26px;
  padding: 0 var(--t-spacing-2);
  font-size: var(--t-font-size-xs);
  color: var(--t-font-color-secondary);
  border-radius: var(--t-border-radius-sm);
}
.tb-seg .tb-btn.active {
  background: var(--t-accent-soft);
  color: var(--t-accent-secondary);
  font-weight: var(--t-font-weight-semi-bold);
}

/* Date label */
.tb-date {
  font-size: var(--t-font-size-sm);
  font-weight: var(--t-font-weight-semi-bold);
  color: var(--t-font-color-primary);
}
.tb-date .yr { font-size: var(--t-font-size-xxs); color: var(--t-font-color-tertiary); margin-left: var(--t-spacing-1_5); font-weight: var(--t-font-weight-medium); }
.tb-sep { width: 1px; height: 20px; background: var(--t-border-color-medium); margin: 0 var(--t-spacing-1); }


/* ── 7. Schedule grid ──────────────────────────────────────────────────────── */
.tl-head {
  background: var(--t-background-primary);
  border-bottom: 1px solid var(--t-border-color-medium);
}
.tl-head .corner {
  font-size: var(--t-font-size-xxs);
  letter-spacing: 0.06em;
  font-weight: var(--t-font-weight-semi-bold);
  color: var(--t-font-color-tertiary);
  background: var(--t-background-primary);
  border-right: 1px solid var(--t-border-color-medium);
  padding-bottom: var(--t-spacing-3);
}
.tl-head .day {
  border-right: 1px solid var(--t-border-color-light);
  padding-bottom: var(--t-spacing-2);
}
.tl-head .day.weekend {
  background: color-mix(in oklab, var(--t-font-color-primary) 7%, var(--t-background-secondary));
}
.tl-head .day.today {
  background: var(--t-accent-bg);
  position: relative;
}
.tl-head .day.today::after {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 2px; background: var(--t-accent-primary);
}
.tl-head .day .dow {
  font-size: var(--t-font-size-xxs);
  letter-spacing: 0.06em;
  color: var(--t-font-color-tertiary);
  font-weight: var(--t-font-weight-semi-bold);
  text-transform: uppercase;
}
.tl-head .day .dnum {
  font-size: var(--t-font-size-xl);
  font-weight: var(--t-font-weight-semi-bold);
  color: var(--t-font-color-primary);
}
.tl-head .day.today .dow,
.tl-head .day.today .dnum { color: var(--t-accent-secondary); }

/* Member column */
.tl-members {
  background: var(--t-background-primary);
  border-right: 1px solid var(--t-border-color-medium);
}
.tl-row-h {
  height: var(--row-h);
  padding: 0 var(--t-spacing-4);
  gap: var(--t-spacing-3);
  border-bottom: 1px solid color-mix(in oklab, var(--t-font-color-primary) 15%, transparent);
  transition: var(--t-transition-bg);
}
.tl-row-h.me { background: var(--t-accent-bg); }
.tl-row-h:hover:not(.me) { background: var(--t-background-secondary); }
.tl-row-h .who .nm {
  font-size: var(--t-font-size-sm);
  font-weight: var(--t-font-weight-medium);
  color: var(--t-font-color-primary);
}
.tl-row-h.me .who .nm { color: var(--t-accent-secondary); font-weight: var(--t-font-weight-semi-bold); }
.tl-row-h .who .rl { font-size: var(--t-font-size-xs); color: var(--t-font-color-tertiary); }
.tl-row-h .cap {
  font-size: var(--t-font-size-xs);
  font-weight: var(--t-font-weight-semi-bold);
  color: var(--t-font-color-tertiary);
  font-variant-numeric: tabular-nums;
}
.tl-row-h .cap.full { color: var(--t-accent-primary); }
.tl-row-h .cap.over { color: var(--t-color-danger); }

/* Today marker */
.tl-today-marker, .today-marker {
  background: var(--t-accent-primary) !important;
  opacity: 0.5;
  width: 1px !important;
}

/* Slot bars */
.tl-slot, .slot, .block {
  border-radius: var(--t-border-radius-sm) !important;
  font-size: var(--t-font-size-md) !important;
  font-weight: var(--t-font-weight-medium) !important;
  letter-spacing: 0;
  transition: box-shadow var(--t-animation-duration-fast) ease, outline var(--t-animation-duration-fast) ease;
}
.tl-slot:hover, .slot:hover, .block:hover {
  box-shadow: var(--t-box-shadow-strong) !important;
}
.tl-slot.selected, .slot.selected, .block.selected {
  outline: 2px solid rgba(24, 24, 27, 0.25);
  outline-offset: 0;
}


/* ── 8. Project bottom strip ───────────────────────────────────────────────── */
.proj-bottom {
  background: var(--t-background-primary);
  border-top: 1px solid var(--t-border-color-medium);
}
.proj-card-row {
  background: var(--t-background-secondary);
  border-bottom: 1px solid var(--t-border-color-light);
}
.proj-card-label {
  font-size: var(--t-font-size-xxs);
  letter-spacing: 0.06em;
  color: var(--t-font-color-tertiary);
  text-transform: uppercase;
}
.proj-chip {
  font-size: var(--t-font-size-xs);
  padding: var(--t-spacing-2) var(--t-spacing-3);
  border-right: 1px solid var(--t-border-color-light);
  color: var(--t-font-color-secondary);
  transition: var(--t-transition-bg), color var(--t-animation-duration-fast) ease;
}
.proj-chip:hover { background: var(--t-background-tertiary); color: var(--t-font-color-primary); }
.proj-chip.active {
  background: var(--t-background-primary);
  color: var(--t-font-color-primary);
  font-weight: var(--t-font-weight-semi-bold);
  box-shadow: inset 0 -2px 0 var(--proj-color, var(--t-accent-primary));
}
.proj-chip-md, .proj-chip-cv {
  font-family: var(--t-code-font-family);
  font-size: var(--t-font-size-xxs);
}
.proj-chip-md {
  background: var(--t-background-tertiary);
  color: var(--t-font-color-secondary);
  padding: 1px var(--t-spacing-1_5);
  border-radius: var(--t-border-radius-xs);
}
.proj-chip-cv { color: var(--t-accent-secondary); font-weight: var(--t-font-weight-semi-bold); }
.proj-resize-handle { background: var(--t-border-color-light); height: 4px; cursor: row-resize; }
.proj-resize-handle:hover { background: var(--t-accent-primary); }


/* ── 9. Buttons ────────────────────────────────────────────────────────────── */
.btn {
  height: 32px;
  padding: 0 var(--t-spacing-4) !important;
  border-radius: var(--t-border-radius-sm);
  font-size: var(--t-font-size-sm);
  font-weight: var(--t-font-weight-medium);
  border: 1px solid var(--t-border-color-medium);
  background: var(--t-background-primary);
  color: var(--t-font-color-primary);
  transition: var(--t-transition-bg), border-color var(--t-animation-duration-fast) ease;
  display: inline-flex; align-items: center; gap: var(--t-spacing-1_5);
  cursor: pointer;
}
.btn:hover {
  background: var(--t-background-tertiary);
  border-color: var(--t-border-color-strong);
}
.btn.primary {
  background: var(--t-accent-primary) !important;
  color: #fff !important;
  border-color: var(--t-accent-primary) !important;
  box-shadow: var(--t-box-shadow-light);
}
.btn.primary:hover {
  background: var(--t-accent-secondary) !important;
  border-color: var(--t-accent-secondary) !important;
  box-shadow: var(--t-box-shadow-strong);
}
.btn.ghost, .btn.plain {
  background: transparent;
  border-color: transparent;
  color: var(--t-font-color-secondary);
}
.btn.ghost:hover, .btn.plain:hover {
  background: var(--t-background-tertiary);
  color: var(--t-font-color-primary);
}
.btn.danger {
  background: var(--t-background-primary);
  color: var(--t-color-danger);
  border-color: var(--t-border-color-danger);
}
.btn.danger:hover {
  background: var(--t-color-danger-bg);
  border-color: var(--t-color-danger);
}
.btn.small { height: 26px; padding: 0 var(--t-spacing-2) !important; font-size: var(--t-font-size-xs); }
.btn.large { height: 36px; padding: 0 var(--t-spacing-5) !important; font-size: var(--t-font-size-md); }

/* Hover lift for CTAs */
.hover-lift:hover {
  transform: translateY(-1px);
  box-shadow: var(--t-box-shadow-strong);
}


/* ── 10. Status badges ─────────────────────────────────────────────────────── */
.status-badge {
  height: 20px;
  padding: 0 var(--t-spacing-2);
  border-radius: var(--t-border-radius-pill);
  font-size: var(--t-font-size-xs);
  font-weight: var(--t-font-weight-semi-bold);
  letter-spacing: 0;
  display: inline-flex; align-items: center; gap: var(--t-spacing-1);
  background: var(--t-background-tertiary);
  color: var(--t-font-color-secondary);
  border: 0 !important;
}
.status-badge::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: var(--t-border-radius-rounded);
  background: currentColor;
  opacity: 0.8;
}
.status-badge.lg { height: 24px; padding: 0 var(--t-spacing-3); font-size: var(--t-font-size-xs); }

/* Semantic status variants */
.status-badge.active   { background: var(--t-color-success-bg); color: var(--t-color-success); }
.status-badge.pending  { background: var(--t-color-warning-bg); color: var(--t-color-warning); }
.status-badge.done     { background: var(--t-background-tertiary); color: var(--t-font-color-tertiary); }
.status-badge.blocked  { background: var(--t-color-danger-bg); color: var(--t-color-danger); }
.status-badge.paused   { background: var(--t-color-info-bg); color: var(--t-color-info); }

/* Tag chips using Twenty color scale */
.tag-chip {
  display: inline-flex; align-items: center;
  height: 20px; padding: 0 var(--t-spacing-2);
  border-radius: var(--t-border-radius-pill);
  font-size: var(--t-font-size-xs);
  font-weight: var(--t-font-weight-medium);
  white-space: nowrap;
}


/* ── 11. Modals ────────────────────────────────────────────────────────────── */
.modal-shade, .modal-backdrop {
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  top: 0 !important;            /* full-viewport scrim (JetOS fixed inset-0) */
}
.modal {
  border-radius: var(--radius-lg);   /* 12px — JetOS rounded-xl */
  border: 1px solid var(--t-border-color-medium);
  box-shadow: var(--t-box-shadow-super-heavy);
  background: var(--t-background-primary);
}
.modal-h, .modal-head {
  border-bottom: 1px solid var(--t-border-color-light);
  background: var(--t-background-secondary);   /* subtle header tint (JetOS bg-muted/30) */
  padding: var(--t-spacing-4) var(--t-spacing-5);
}
.modal-h h2, .modal-head h2 {
  font-size: var(--t-font-size-md);
  font-weight: var(--t-font-weight-semi-bold);
  color: var(--t-font-color-primary);
}
.modal-h .x, .modal-head .x {
  width: 28px; height: 28px;
  border-radius: var(--t-border-radius-sm);
  color: var(--t-font-color-tertiary);
  transition: var(--t-transition-bg);
}
.modal-h .x:hover, .modal-head .x:hover {
  background: var(--t-background-tertiary);
  color: var(--t-font-color-primary);
}
.modal-b, .modal-body { padding: var(--t-spacing-5); }
.modal-f, .modal-foot {
  border-top: 1px solid var(--t-border-color-light);
  padding: var(--t-spacing-3) var(--t-spacing-5);
  background: var(--t-background-secondary);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}


/* ── 12. Cards ─────────────────────────────────────────────────────────────── */
.proj-detail, .card, .panel-card {
  background: var(--t-background-primary);
  border: 1px solid var(--t-border-color-medium);
  border-radius: var(--t-border-radius-md);
  box-shadow: var(--t-box-shadow-light);
}


/* ── 13. Forms & Inputs ────────────────────────────────────────────────────── */
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], textarea, select {
  border: 1px solid var(--t-border-color-medium);
  border-radius: var(--t-border-radius-sm);
  background: var(--t-background-primary);
  color: var(--t-font-color-primary);
  font-family: var(--t-font-family);
  font-size: var(--t-font-size-sm);
  padding: var(--t-spacing-1_5) var(--t-spacing-2);
  transition: border-color var(--t-animation-duration-fast) ease, box-shadow var(--t-animation-duration-fast) ease;
  outline: none;
}
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus,
input[type="number"]:focus, input[type="date"]:focus, textarea:focus, select:focus {
  border-color: var(--t-accent-primary);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--t-accent-primary) 22%, transparent);
}

/* Form field labels inside modals: sentence-case (panel eyebrows stay uppercase) */
.modal .rb-label, .modal-b .rb-label {
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--t-font-size-sm);
  font-weight: var(--t-font-weight-medium);
  color: var(--t-font-color-secondary);
}
input::placeholder, textarea::placeholder { color: var(--t-font-color-light); }
label {
  font-size: var(--t-font-size-xs);
  font-weight: var(--t-font-weight-medium);
  color: var(--t-font-color-secondary);
}


/* ── 14. Tables (generic) ──────────────────────────────────────────────────── */
table { border-collapse: collapse; width: 100%; }
th {
  font-size: var(--t-font-size-xs);
  font-weight: var(--t-font-weight-semi-bold);
  color: var(--t-font-color-tertiary);
  text-align: left;
  padding: var(--t-table-cell-padding-v) var(--t-table-cell-padding-h);
  background: var(--t-background-secondary);
  border-bottom: 1px solid var(--t-border-color-medium);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
td {
  font-size: var(--t-font-size-sm);
  color: var(--t-font-color-primary);
  padding: var(--t-table-cell-padding-v) var(--t-table-cell-padding-h);
  border-bottom: 1px solid var(--t-border-color-light);
  vertical-align: middle;
}
tr:hover td { background: var(--t-background-secondary); }
tr:last-child td { border-bottom: 0; }


/* ── 15. Plan Modal ────────────────────────────────────────────────────────── */
.plan-modal {
  background: var(--t-background-primary);
}
.plan-modal .modal-h {
  padding: var(--t-spacing-3) var(--t-spacing-5);
  border-bottom: 1px solid var(--t-border-color-medium);
}
.plan-modal .modal-h h2 {
  font-size: var(--t-font-size-sm);
  font-weight: var(--t-font-weight-semi-bold);
}

.plan-col { padding: var(--t-spacing-5) !important; }
.plan-col:first-child {
  background: var(--t-background-secondary);
  border-right: 1px solid var(--t-border-color-medium);
}
.plan-col:nth-child(2) {
  display: flex;
  flex-direction: column;
  gap: var(--t-spacing-3);
}

.plan-modal .plan-section-title {
  font-size: var(--t-font-size-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--t-spacing-1_5) !important;
  color: var(--t-font-color-tertiary);
  font-weight: var(--t-font-weight-semi-bold);
}

.plan-modal .plan-table { font-size: var(--t-font-size-xs); }
.plan-modal .plan-table th {
  padding: var(--t-spacing-1_5) var(--t-spacing-2);
  font-size: var(--t-font-size-xxs);
  letter-spacing: 0.05em;
  color: var(--t-font-color-tertiary);
  background: var(--t-background-secondary);
}
.plan-modal .plan-table td { padding: var(--t-spacing-1_5) var(--t-spacing-2); }
.plan-modal .plan-table tr.plan-subtotal td {
  background: var(--t-background-secondary);
  padding: var(--t-spacing-2) var(--t-spacing-2);
}

.plan-modal .plan-cost-summary {
  margin-top: var(--t-spacing-2);
  padding: var(--t-spacing-2) var(--t-spacing-3);
  border-radius: var(--t-border-radius-md);
  background: var(--t-background-secondary);
  border: 1px solid var(--t-border-color-medium);
  gap: var(--t-spacing-1);
}
.plan-modal .plan-cost-row { font-size: var(--t-font-size-xs); }
.plan-modal .plan-cost-row.total { font-size: var(--t-font-size-sm); padding-top: var(--t-spacing-1_5); }

.plan-modal .plan-col:nth-child(2) > div[style*="margin-top"][style*="border-top"] {
  margin-top: 0 !important;
  padding-top: var(--t-spacing-3) !important;
  border-top: 1px solid var(--t-border-color-medium) !important;
}
.plan-modal .forecast-section { gap: var(--t-spacing-2); }
.plan-modal .forecast-kpi-grid { gap: var(--t-spacing-2); }
.plan-modal .forecast-kpi { padding: var(--t-spacing-2) var(--t-spacing-3); }
.plan-modal .forecast-kpi-label { font-size: var(--t-font-size-xs); }
.plan-modal .forecast-kpi-val   { font-size: var(--t-font-size-lg); }
.plan-modal .forecast-chart-wrap { padding: var(--t-spacing-3) !important; border-radius: var(--t-border-radius-md); }
.plan-modal .forecast-chart-svg { width: 100% !important; height: auto !important; max-height: 400px; display: block; }
.plan-modal .forecast-insight {
  padding: var(--t-spacing-1_5) var(--t-spacing-3);
  font-size: var(--t-font-size-xs);
  border-radius: var(--t-border-radius-sm);
}

@media (min-width: 1280px) {
  .plan-modal .plan-col:nth-child(2) {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.5fr);
    gap: var(--t-spacing-4) var(--t-spacing-8);
    align-content: start;
  }
  .plan-modal .plan-col:nth-child(2) > * { grid-column: 1; min-width: 0; }
  .plan-modal .plan-col:nth-child(2) > div[style*="margin-top"][style*="border-top"] {
    grid-column: 2;
    grid-row: 1 / span 99;
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: 0 !important;
    border-left: 1px solid var(--t-border-color-medium) !important;
    padding-left: var(--t-spacing-6) !important;
    align-self: stretch;
  }
}

/* Plan tab bar */
.plan-tab-bar {
  display: flex;
  gap: var(--t-spacing-0_5);
  padding: 0 var(--t-spacing-4);
  background: var(--t-background-secondary);
  border-bottom: 1px solid var(--t-border-color-medium);
  flex-shrink: 0;
  overflow-x: auto;
}
.plan-tab-btn {
  display: inline-flex; align-items: center; gap: var(--t-spacing-1_5);
  padding: var(--t-spacing-2) var(--t-spacing-3);
  font-size: var(--t-font-size-sm);
  font-weight: var(--t-font-weight-medium);
  color: var(--t-font-color-tertiary);
  border-radius: var(--t-border-radius-sm) var(--t-border-radius-sm) 0 0;
  border: 1px solid transparent;
  border-bottom: none;
  background: transparent;
  cursor: pointer;
  transition: color var(--t-animation-duration-fast) ease, var(--t-transition-bg);
  white-space: nowrap;
}
.plan-tab-btn:hover { color: var(--t-font-color-primary); background: var(--t-background-tertiary); }
.plan-tab-btn.is-active {
  color: var(--t-font-color-primary);
  font-weight: var(--t-font-weight-semi-bold);
  background: var(--t-background-primary);
  border-color: var(--t-border-color-medium);
  border-bottom-color: var(--t-background-primary);
  margin-bottom: -1px;
}
.plan-tab-meta {
  font-size: var(--t-font-size-xxs);
  font-weight: var(--t-font-weight-medium);
  color: var(--t-font-color-tertiary);
  background: var(--t-background-quaternary);
  border: 1px solid var(--t-border-color-medium);
  border-radius: var(--t-border-radius-pill);
  padding: 1px var(--t-spacing-1_5);
}
.plan-tab-btn.is-active .plan-tab-meta {
  background: var(--t-accent-soft);
  border-color: rgba(24, 24, 27, 0.18);
  color: var(--t-accent-secondary);
}

.plan-side-card {
  background: var(--t-background-primary);
  border: 1px solid var(--t-border-color-medium);
  border-radius: var(--t-border-radius-md);
  box-shadow: var(--t-box-shadow-light);
  padding: var(--t-spacing-3);
  min-width: 0;
}
.plan-card-chip {
  flex: none;
  padding: var(--t-spacing-1) var(--t-spacing-2);
  border-radius: var(--t-border-radius-pill);
  background: var(--t-color-info-bg);
  border: 1px solid rgba(64, 96, 214, 0.2);
  color: var(--t-color-info);
  font-size: var(--t-font-size-xxs);
  font-weight: var(--t-font-weight-semi-bold);
}


/* ── 16. People page ───────────────────────────────────────────────────────── */
.people-wrapper { padding: var(--t-spacing-6) var(--t-spacing-8) var(--t-spacing-10); }
.people-container { max-width: 1200px; margin: 0 auto; }
.people-section { margin-bottom: var(--t-spacing-8); }
.people-section-title { font-size: var(--t-font-size-xl); font-weight: var(--t-font-weight-semi-bold); }
.people-card {
  background: var(--t-background-primary);
  border: 1px solid var(--t-border-color-medium);
  border-radius: var(--t-border-radius-md);
  overflow: auto;
  box-shadow: var(--t-box-shadow-light);
}
.people-table th {
  font-size: var(--t-font-size-xxs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: var(--t-spacing-2) var(--t-spacing-3) var(--t-spacing-2);
  border-bottom: 1px solid var(--t-border-color-medium);
  color: var(--t-font-color-tertiary);
  background: var(--t-background-secondary);
}
.people-table td {
  padding: var(--t-spacing-2) var(--t-spacing-3);
  border-bottom: 1px solid var(--t-border-color-light);
  font-size: var(--t-font-size-sm);
}
.people-table tr:hover td { background: var(--t-background-secondary); }
.people-last-active {
  color: var(--t-font-color-tertiary);
  font-size: var(--t-font-size-xs);
  white-space: nowrap;
}
.people-group-header-row td {
  padding: var(--t-spacing-2) var(--t-spacing-3);
  font-size: var(--t-font-size-xs);
  font-weight: var(--t-font-weight-semi-bold);
  color: var(--t-font-color-secondary);
  background: var(--t-background-secondary);
  border-top: 1px solid var(--t-border-color-medium);
}

.access-seg {
  display: inline-flex;
  background: var(--t-background-tertiary);
  border-radius: var(--t-border-radius-sm);
  padding: var(--t-spacing-0_5);
  gap: var(--t-spacing-0_5);
}
.access-seg button {
  padding: var(--t-spacing-0_5) var(--t-spacing-2);
  font-size: var(--t-font-size-xs);
  border-radius: var(--t-border-radius-xs);
  color: var(--t-font-color-secondary);
  font-weight: var(--t-font-weight-medium);
  transition: var(--t-transition-bg);
}
.access-seg button.on {
  background: var(--t-accent-primary);
  color: #fff;
  box-shadow: none;
  font-weight: var(--t-font-weight-semi-bold);
}
.access-seg button.on.mgr { color: #fff; }

/* ── View-as role preview ──────────────────────────────────────────────────── */
/* "View as person" — hint under the Team Members header + per-row toggle */
.people-section-hint {
  display: flex;
  align-items: center;
  gap: var(--t-spacing-1_5);
  margin-top: 2px;
  font-size: var(--t-font-size-xs);
  color: var(--t-font-color-secondary);
}
.people-section-hint svg { color: var(--t-accent-primary); flex-shrink: 0; }
.viewas-row-btn.viewas-row-btn--on {
  color: #fff;
  background: var(--t-accent-primary);
  border-color: var(--t-accent-primary);
}
.viewas-row-btn.viewas-row-btn--on:hover { filter: brightness(0.95); }

.viewas-banner {
  display: flex;
  align-items: center;
  gap: var(--t-spacing-2);
  padding: var(--t-spacing-1_5) var(--t-spacing-4);
  background: color-mix(in oklab, var(--t-accent-primary) 12%, var(--t-background-primary));
  border-bottom: 1px solid color-mix(in oklab, var(--t-accent-primary) 35%, transparent);
  color: var(--t-accent-primary);
  font-size: var(--t-font-size-sm);
}
.viewas-banner-text { color: var(--t-font-color-primary); }
.viewas-banner-text strong { color: var(--t-accent-primary); }
.viewas-banner-sub { color: var(--t-font-color-secondary); }
.viewas-banner-exit {
  margin-left: auto;
  padding: var(--t-spacing-1) var(--t-spacing-3);
  border-radius: var(--t-border-radius-sm);
  background: var(--t-accent-primary);
  color: #fff;
  font-size: var(--t-font-size-xs);
  font-weight: var(--t-font-weight-semi-bold);
  transition: var(--t-transition-bg);
}
.viewas-banner-exit:hover { background: var(--t-accent-primary-hover, var(--t-accent-primary)); filter: brightness(0.95); }


/* ── 17. Projects / Gantt ──────────────────────────────────────────────────── */
.projects-wrapper, .pm-gantt-wrapper {
  flex: 1; overflow: auto;
  background: var(--t-background-secondary);
}
.project-card {
  background: var(--t-background-primary);
  border: 1px solid var(--t-border-color-medium);
  border-radius: var(--t-border-radius-md);
  box-shadow: var(--t-box-shadow-light);
  overflow: hidden;
}
.project-card:hover {
  border-color: var(--t-border-color-strong);
  box-shadow: var(--t-box-shadow-strong);
}

/* Gantt table rows */
.gantt-row, .pm-row {
  border-bottom: 1px solid var(--t-border-color-light);
  transition: var(--t-transition-bg);
}
.gantt-row:hover, .pm-row:hover { background: var(--t-background-secondary); }
.gantt-cell, .pm-cell {
  padding: var(--t-spacing-2) var(--t-spacing-3);
  font-size: var(--t-font-size-sm);
}

/* Gantt bars */
.gantt-bar, .plan-bar {
  border-radius: var(--t-border-radius-xs);
  transition: box-shadow var(--t-animation-duration-fast) ease;
}
.gantt-bar:hover, .plan-bar:hover {
  box-shadow: var(--t-box-shadow-strong);
}


/* ── 18. Customer portal ───────────────────────────────────────────────────── */
.customer-portal-wrapper {
  flex: 1; overflow: auto;
  background: var(--t-background-secondary);
  padding: var(--t-spacing-6);
}
.portal-card {
  background: var(--t-background-primary);
  border: 1px solid var(--t-border-color-medium);
  border-radius: var(--t-border-radius-md);
  box-shadow: var(--t-box-shadow-light);
  overflow: hidden;
}
.portal-header {
  padding: var(--t-spacing-4) var(--t-spacing-5);
  border-bottom: 1px solid var(--t-border-color-light);
  background: var(--t-background-secondary);
}
.portal-section-title {
  font-size: var(--t-font-size-xs);
  font-weight: var(--t-font-weight-semi-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--t-font-color-tertiary);
}


/* ── 19. Rate card ─────────────────────────────────────────────────────────── */
.rate-card-wrapper {
  flex: 1; overflow: auto;
  background: var(--t-background-secondary);
  padding: var(--t-spacing-6);
}
.rate-card-container { max-width: 1100px; margin: 0 auto; }
.rate-card-table-wrap {
  background: var(--t-background-primary);
  border: 1px solid var(--t-border-color-medium);
  border-radius: var(--t-border-radius-md);
  box-shadow: var(--t-box-shadow-light);
  overflow: hidden;
}


/* ── 20. Report / panels ───────────────────────────────────────────────────── */
.report-wrapper, .panels-wrapper {
  flex: 1; overflow: auto;
  background: var(--t-background-secondary);
  padding: var(--t-spacing-5);
  gap: var(--t-spacing-4);
}
.report-section {
  background: var(--t-background-primary);
  border: 1px solid var(--t-border-color-medium);
  border-radius: var(--t-border-radius-md);
  box-shadow: var(--t-box-shadow-light);
  overflow: hidden;
}
.report-section-head {
  padding: var(--t-spacing-3) var(--t-spacing-5);
  border-bottom: 1px solid var(--t-border-color-light);
  background: var(--t-background-secondary);
}
.kpi-card {
  background: var(--t-background-primary);
  border: 1px solid var(--t-border-color-medium);
  border-radius: var(--t-border-radius-md);
  padding: var(--t-spacing-4);
  box-shadow: var(--t-box-shadow-light);
}
.kpi-val {
  font-size: var(--t-font-size-xxl);
  font-weight: var(--t-font-weight-semi-bold);
  font-variant-numeric: tabular-nums;
  color: var(--t-font-color-primary);
}
.kpi-label {
  font-size: var(--t-font-size-xs);
  color: var(--t-font-color-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: var(--t-font-weight-medium);
}


/* ── 21. Login page ────────────────────────────────────────────────────────── */
.login-page {
  min-height: 100vh;
  background: var(--t-background-secondary);
  display: grid; place-items: center;
}
.login-card {
  background: var(--t-background-primary);
  border: 1px solid var(--t-border-color-medium);
  border-radius: var(--t-border-radius-md);
  box-shadow: var(--t-box-shadow-strong);
  padding: var(--t-spacing-8);
  width: 380px;
  max-width: calc(100vw - var(--t-spacing-8));
}
.login-card .logo-mark {
  width: 40px; height: 40px;
  border-radius: var(--t-border-radius-md);
  background: var(--t-accent-primary);
  display: grid; place-items: center;
  color: #fff;
  font-size: var(--t-font-size-lg);
  font-weight: var(--t-font-weight-semi-bold);
  margin-bottom: var(--t-spacing-5);
}
.login-card h1 {
  font-size: var(--t-font-size-xl);
  font-weight: var(--t-font-weight-semi-bold);
  color: var(--t-font-color-primary);
  margin-bottom: var(--t-spacing-1);
}
.login-card .subtitle {
  font-size: var(--t-font-size-sm);
  color: var(--t-font-color-tertiary);
  margin-bottom: var(--t-spacing-6);
}
.login-field { display: flex; flex-direction: column; gap: var(--t-spacing-1_5); margin-bottom: var(--t-spacing-4); }
.login-field label { font-size: var(--t-font-size-xs); font-weight: var(--t-font-weight-medium); color: var(--t-font-color-secondary); }
.login-field input {
  height: 36px;
  padding: 0 var(--t-spacing-3);
  border: 1px solid var(--t-border-color-medium);
  border-radius: var(--t-border-radius-sm);
  font-size: var(--t-font-size-sm);
  background: var(--t-background-primary);
  color: var(--t-font-color-primary);
  width: 100%;
  transition: border-color var(--t-animation-duration-fast) ease, box-shadow var(--t-animation-duration-fast) ease;
  outline: none;
}
.login-field input:focus {
  border-color: var(--t-accent-primary);
  box-shadow: 0 0 0 3px rgba(24, 24, 27, 0.10);
}
.login-submit {
  width: 100%; height: 36px;
  border-radius: var(--t-border-radius-sm);
  background: var(--t-accent-primary);
  color: #fff;
  font-size: var(--t-font-size-sm);
  font-weight: var(--t-font-weight-semi-bold);
  border: none; cursor: pointer;
  transition: background var(--t-animation-duration-fast) ease;
}
.login-submit:hover { background: var(--t-accent-secondary); }


/* ── 22. Sidebar pills (kept hidden but styled) ────────────────────────────── */
.pill { border-radius: var(--t-border-radius-sm); }
.pill:hover { background: var(--t-background-tertiary); }
.pill.active {
  background: var(--t-accent-bg);
}
.pill.active .name { color: var(--t-accent-secondary); font-weight: var(--t-font-weight-medium); }


/* ── 23. Toaster / snack bars ──────────────────────────────────────────────── */
.toast, .snack {
  border-radius: var(--t-border-radius-md);
  box-shadow: var(--t-box-shadow-super-heavy);
  font-size: var(--t-font-size-sm);
  border: 1px solid var(--t-border-color-medium);
  background: var(--t-background-primary);
  color: var(--t-font-color-primary);
}
.toast.success { background: var(--t-color-success-bg); border-color: rgba(0, 164, 51, 0.2); color: var(--t-color-success); }
.toast.error   { background: var(--t-color-danger-bg); border-color: rgba(211, 84, 82, 0.2); color: var(--t-color-danger); }
.toast.warn    { background: var(--t-color-warning-bg); border-color: rgba(232, 124, 0, 0.2); color: var(--t-color-warning); }


/* ── 24. Misc overrides ────────────────────────────────────────────────────── */
/* Chip for plan-card */
.plan-card-action {
  display: inline-flex; align-items: center; gap: var(--t-spacing-1);
  padding: var(--t-spacing-1) var(--t-spacing-2) !important;
  font-size: var(--t-font-size-xxs) !important;
  border: 1px solid var(--t-border-color-medium);
  border-radius: var(--t-border-radius-sm);
  color: var(--t-font-color-secondary);
  background: var(--t-background-primary);
  transition: var(--t-transition-bg);
}
.plan-card-action:hover { background: var(--t-background-tertiary); }

/* Dividers */
.divider, hr {
  border: 0;
  border-top: 1px solid var(--t-border-color-light);
  margin: var(--t-spacing-4) 0;
}

/* Context menus / dropdowns */
.dropdown-menu, .ctx-menu, .picker-menu {
  background: var(--t-background-primary);
  border: 1px solid var(--t-border-color-medium);
  border-radius: var(--t-border-radius-md);
  box-shadow: var(--t-box-shadow-super-heavy);
  padding: var(--t-spacing-1);
  min-width: 180px;
}
.dropdown-item, .ctx-item {
  display: flex; align-items: center; gap: var(--t-spacing-2);
  padding: var(--t-spacing-1_5) var(--t-spacing-3);
  border-radius: var(--t-border-radius-sm);
  font-size: var(--t-font-size-sm);
  color: var(--t-font-color-primary);
  cursor: pointer;
  transition: var(--t-transition-bg);
}
.dropdown-item:hover, .ctx-item:hover { background: var(--t-background-tertiary); }
.dropdown-item.danger, .ctx-item.danger { color: var(--t-color-danger); }
.dropdown-item.danger:hover, .ctx-item.danger:hover { background: var(--t-color-danger-bg); }

/* Empty states */
.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--t-spacing-3);
  padding: var(--t-spacing-10);
  color: var(--t-font-color-tertiary);
}
.empty-state .empty-icon { color: var(--t-font-color-extra-light); }
.empty-state .empty-title {
  font-size: var(--t-font-size-base, 0.875rem);
  font-weight: 600;
  color: var(--t-font-color-secondary, var(--t-font-color-tertiary));
}
.empty-state p { font-size: var(--t-font-size-sm); text-align: center; margin: 0; }


/* ── 25. Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 1280px) {
  .topbar .search { width: 200px; }
}
@media (max-width: 1024px) {
  .topbar { padding: 0 var(--t-spacing-3); gap: var(--t-spacing-1_5); }
  .topbar .search { width: 160px; }
  .topbar .brand span { display: none; }
}


/* ── 26. Reduced motion ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
  }
}


/* ==========================================================================
   Round 2 — UX/UI audit fixes
   ========================================================================== */

/* ── Timeline bg: fill empty area below rows with page bg, not white ── */
.timeline-wrap {
  background: var(--t-background-secondary) !important;
}
.tl-scroll, .tl-body-scroll {
  background: var(--t-background-secondary);
}
/* The tl-grid repeating day-stripe should read on the subtle bg */
.tl-grid {
  background-color: var(--t-background-secondary);
  background-image:
    repeating-linear-gradient(
      to right,
      transparent 0, transparent calc(var(--day-w, 110px) - 1px),
      var(--t-border-color-light) calc(var(--day-w, 110px) - 1px),
      var(--t-border-color-light) var(--day-w, 110px)
    );
}
/* Weekend columns slightly dimmer */
.tl-row .day-col.weekend {
  background: color-mix(in oklab, var(--t-font-color-primary) 6%, transparent);
}
/* Idle past working day — keep the cell empty; the inline prompt carries context. */
.tl-row .day-col.free-past {
  background: transparent !important;
  box-shadow: none;
}
/* Role group headers — Twenty-style section dividers */
.tl-role-header,
.tl-role-header-grid {
  background: var(--t-background-secondary) !important;
  border-bottom: 1px solid var(--t-border-color-medium) !important;
  border-top: 1px solid var(--t-border-color-medium) !important;
  height: 26px !important;
}
.tl-role-label {
  font-size: var(--t-font-size-xxs) !important;
  font-weight: var(--t-font-weight-semi-bold) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--t-font-color-tertiary) !important;
}
.tl-role-count {
  font-size: var(--t-font-size-xs) !important;
  color: var(--t-font-color-extra-light) !important;
  font-weight: var(--t-font-weight-medium) !important;
}
/* Members column bg matches page bg in empty area */
.tl-members {
  background: var(--t-background-primary) !important;
}

/* ── Loading state ────────────────────────────────────────────────────────── */
.loading-state, .schedule-loading, [class*="loading"] {
  background: var(--t-background-secondary);
  color: var(--t-font-color-tertiary);
}

/* ── Tasks page ───────────────────────────────────────────────────────────── */
/* Stat chips row at top of My Tasks */
.perdev-kpis {
  gap: var(--t-spacing-3) !important;
  padding: var(--t-spacing-3) var(--t-spacing-4) !important;
  flex-wrap: wrap;
}
.perdev-kpi {
  background: var(--t-background-primary) !important;
  border: 1px solid var(--t-border-color-medium) !important;
  border-radius: var(--t-border-radius-md) !important;
  padding: var(--t-spacing-3) var(--t-spacing-4) !important;
  box-shadow: var(--t-box-shadow-light) !important;
  min-width: 80px;
}
.perdev-kpi-label {
  font-size: var(--t-font-size-xxs) !important;
  color: var(--t-font-color-tertiary) !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: var(--t-font-weight-semi-bold) !important;
}
.perdev-kpi-value {
  font-size: var(--t-font-size-xxl) !important;
  font-weight: var(--t-font-weight-semi-bold) !important;
  color: var(--t-font-color-primary) !important;
  margin: var(--t-spacing-0_5) 0 !important;
  font-variant-numeric: tabular-nums;
}
.perdev-kpi-sub {
  font-size: var(--t-font-size-xs) !important;
  color: var(--t-font-color-tertiary) !important;
}

/* Task cards */
.tb-card-wrap {
  background: var(--t-background-primary) !important;
  border: 1px solid var(--t-border-color-medium) !important;
  border-radius: var(--t-border-radius-md) !important;
  box-shadow: var(--t-box-shadow-light) !important;
  transition: box-shadow var(--t-animation-duration-fast) ease, border-color var(--t-animation-duration-fast) ease !important;
}
.tb-card-wrap:hover {
  border-color: var(--t-border-color-strong) !important;
  box-shadow: var(--t-box-shadow-strong) !important;
}

/* Severity badge */
.severity-badge {
  border-radius: var(--t-border-radius-pill) !important;
  font-size: var(--t-font-size-xxs) !important;
  font-weight: var(--t-font-weight-semi-bold) !important;
}

/* Info/tip banners */
.info-banner, [class*="tip-"], .my-stats-help {
  background: var(--t-color-info-bg) !important;
  border: 1px solid rgba(64, 96, 214, 0.15) !important;
  border-radius: var(--t-border-radius-sm) !important;
  color: var(--t-font-color-secondary) !important;
  font-size: var(--t-font-size-xs) !important;
  padding: var(--t-spacing-2) var(--t-spacing-3) !important;
}

/* ── Forecast KPI cards — replace hardcoded colors ────────────────────────── */
.forecast-kpi {
  background: var(--t-background-primary) !important;
  border: 1px solid var(--t-border-color-medium) !important;
  border-radius: var(--t-border-radius-md) !important;
  padding: var(--t-spacing-3) !important;
  box-shadow: var(--t-box-shadow-light) !important;
}
.forecast-kpi-label {
  font-size: var(--t-font-size-xxs) !important;
  color: var(--t-font-color-tertiary) !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.forecast-kpi-val {
  font-size: var(--t-font-size-xl) !important;
  font-weight: var(--t-font-weight-semi-bold) !important;
  color: var(--t-font-color-primary) !important;
}
.forecast-kpi-pos { color: var(--t-color-success) !important; }
.forecast-kpi-neg { color: var(--t-color-danger) !important; }
.forecast-status-safe   { background: var(--t-color-success-bg) !important; border-color: rgba(0,164,51,0.2) !important; }
.forecast-status-warn   { background: var(--t-color-warning-bg) !important; border-color: rgba(232,124,0,0.2) !important; }
.forecast-status-danger { background: var(--t-color-danger-bg)  !important; border-color: rgba(211,84,82,0.2) !important; }

/* ── Project bottom panel — Twenty style ─────────────────────────────────── */
.proj-bottom {
  background: var(--t-background-primary) !important;
  border-top: 1px solid var(--t-border-color-medium) !important;
}
/* Project name chip tabs */
.proj-chip {
  height: 38px !important;
  display: flex; align-items: center;
}
.proj-chip.active {
  box-shadow: inset 0 -2px 0 var(--proj-color, var(--t-accent-primary)) !important;
}

/* ── Topbar: task #2 — mark complete ─────────────────────────────────────── */

/* ── View wrappers — consistent page bg ─────────────────────────────────── */
.tasks-wrap, .my-tasks-wrap, .board-wrap {
  background: var(--t-background-secondary);
}
.tasks-main, .board-main {
  background: var(--t-background-secondary);
}

/* ── Report / panels wrapper ─────────────────────────────────────────────── */
.panels-outer, .report-outer {
  background: var(--t-background-secondary);
  padding: var(--t-spacing-4);
}

/* ── Onboarding popup ────────────────────────────────────────────────────── */
.onboarding-popup, .ob-popup {
  background: var(--t-background-primary) !important;
  border: 1px solid var(--t-border-color-medium) !important;
  border-radius: var(--t-border-radius-md) !important;
  box-shadow: var(--t-box-shadow-super-heavy) !important;
}
.onboarding-popup h3, .ob-popup h3 {
  font-size: var(--t-font-size-md) !important;
  font-weight: var(--t-font-weight-semi-bold) !important;
  color: var(--t-font-color-primary) !important;
}

/* ── Today badge in tl-head ──────────────────────────────────────────────── */
.tl-head .day.today {
  background: var(--t-accent-bg) !important;
}
.tl-head .day.today::after {
  background: var(--t-accent-primary) !important;
}

/* ── General: remove any remaining oklch/color-mix calls that break ──────── */
/* Ensure the view content areas always have a defined bg */
.view-content, .view-wrap, .page-content {
  background: var(--t-background-secondary);
}


/* ==========================================================================
   Round 3 — Targeted fixes from DOM inspection
   ========================================================================== */

/* Scroll container that holds the tl-inner + proj-bottom — fills viewport */
.tl-project-gantt {
  background: var(--t-background-secondary) !important;
}

/* tl-members white bg only for the rows area; the empty gap below
   picks up the tl-project-gantt bg now */
.tl-members {
  background: var(--t-background-primary) !important;
}

/* Week row separator — use Twenty light border */
.tl-row {
  border-bottom: 1px solid color-mix(in oklab, var(--t-font-color-primary) 15%, transparent) !important;
}
.tl-row.me {
  background: color-mix(in oklab, var(--t-accent-primary) 4%, transparent) !important;
}

/* tl-head day separators calmer */
.tl-head .day {
  border-right: 1px solid var(--t-border-color-light) !important;
}
.tl-head .corner {
  border-right: 1px solid var(--t-border-color-medium) !important;
}

/* Topbar task 2 — mark complete */


/* ==========================================================================
   Round 5 — Typography, polish, consistency
   ========================================================================== */

/* ── Projects list: status filter chips row ────────────────────────────────── */
.proj-status-bar, .status-filter-row {
  padding: var(--t-spacing-2) var(--t-spacing-4) !important;
  gap: var(--t-spacing-2) !important;
  border-bottom: 1px solid var(--t-border-color-light) !important;
  background: var(--t-background-primary) !important;
}
.proj-status-chip, .status-chip, .filter-chip {
  font-size: var(--t-font-size-xs) !important;
  font-weight: var(--t-font-weight-medium) !important;
  padding: 2px var(--t-spacing-2) !important;
  border-radius: var(--t-border-radius-pill) !important;
  color: var(--t-font-color-secondary) !important;
  white-space: nowrap;
  cursor: pointer;
  transition: var(--t-transition-bg);
}
.proj-status-chip:hover { color: var(--t-font-color-primary) !important; }
.proj-status-chip.active, .status-chip.active {
  font-weight: var(--t-font-weight-semi-bold) !important;
  color: var(--t-font-color-primary) !important;
}

/* ── Project table: group section headers ───────────────────────────────────── */
.proj-group-head, .project-group-header {
  background: var(--t-background-secondary) !important;
  padding: var(--t-spacing-1_5) var(--t-spacing-4) !important;
  border-top: 1px solid var(--t-border-color-medium) !important;
  border-bottom: 1px solid var(--t-border-color-light) !important;
}
.proj-group-label {
  font-size: var(--t-font-size-xs) !important;
  font-weight: var(--t-font-weight-semi-bold) !important;
  color: var(--t-font-color-secondary) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}

/* ── PM Gantt row styling ────────────────────────────────────────────────────── */
.pm-gantt-wrap, .pm-gantt-body {
  background: var(--t-background-secondary);
}
/* PM header rows (big bold PM names) */
.pm-row-head {
  background: var(--t-background-secondary) !important;
  border-bottom: 1px solid var(--t-border-color-medium) !important;
  border-top: 2px solid var(--t-border-color-medium) !important;
}
/* Project rows under PM */
.pm-proj-row {
  border-bottom: 1px solid var(--t-border-color-light) !important;
  transition: var(--t-transition-bg) !important;
}
.pm-proj-row:hover { background: var(--t-background-secondary) !important; }

/* Plan badges (2/7, 0/7 etc.) */
.plan-badge, .plan-chip {
  background: var(--t-accent-soft) !important;
  color: var(--t-accent-secondary) !important;
  border: 1px solid rgba(24, 24, 27, 0.12) !important;
  border-radius: var(--t-border-radius-pill) !important;
  font-size: var(--t-font-size-xxs) !important;
  font-weight: var(--t-font-weight-semi-bold) !important;
  padding: 1px var(--t-spacing-1_5) !important;
}

/* ── Gantt bars ──────────────────────────────────────────────────────────────── */
.gantt-bar-fill, .plan-bar-fill {
  border-radius: var(--t-border-radius-xs) !important;
  height: 12px !important;
}

/* ── Typography global polish ────────────────────────────────────────────────── */
/* Section titles / page headings */
h1 { font-size: var(--t-font-size-xxl); font-weight: var(--t-font-weight-semi-bold); color: var(--t-font-color-primary); }
h2 { font-size: var(--t-font-size-xl); font-weight: var(--t-font-weight-semi-bold); color: var(--t-font-color-primary); }
h3 { font-size: var(--t-font-size-lg); font-weight: var(--t-font-weight-semi-bold); color: var(--t-font-color-primary); }

/* Section eyebrow labels */
.eyebrow, .section-label, .label-sm {
  font-size: var(--t-font-size-xxs) !important;
  font-weight: var(--t-font-weight-semi-bold) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--t-font-color-tertiary) !important;
}

/* ── Topbar polish — tighten the active state ────────────────────────────────── */
.topbar .tb-btn.primary,
.topbar .tb-btn.active {
  border-radius: var(--t-border-radius-sm) !important;
  font-size: var(--t-font-size-xs) !important;
}

/* ── Number/financial data consistency ───────────────────────────────────────── */
.money, .num, [class*="money"], [class*="amount"], [class*="value"] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* ── Scrollbars on inner tables ──────────────────────────────────────────────── */
.projects-list, .gantt-scroll, .people-table-wrap {
  scrollbar-width: thin;
  scrollbar-color: var(--t-border-color-medium) transparent;
}

/* ── Bottom legend strip ─────────────────────────────────────────────────────── */
.legend-bar, .bottom-legend {
  background: var(--t-background-primary) !important;
  border-top: 1px solid var(--t-border-color-medium) !important;
  padding: var(--t-spacing-2) var(--t-spacing-4) !important;
  font-size: var(--t-font-size-xxs) !important;
  color: var(--t-font-color-tertiary) !important;
}
.legend-dot {
  width: 8px; height: 8px;
  border-radius: var(--t-border-radius-rounded);
  flex-shrink: 0;
}

/* ── Capacity % badges under timeline rows ───────────────────────────────────── */
.tl-week-load {
  background: var(--t-background-primary) !important;
  border: 1px solid var(--t-border-color-light) !important;
  border-radius: var(--t-border-radius-pill) !important;
  font-size: 10px !important;
  color: var(--t-font-color-tertiary) !important;
  font-variant-numeric: tabular-nums;
}
.tl-week-load.overloaded,
.tl-week-load.load-over { color: var(--t-color-danger) !important; border-color: rgba(211,84,82,0.2) !important; }
.tl-week-load.load-full { color: var(--t-accent-secondary) !important; }

/* ── Filter toggle pills (Devs only / All team / All / Leave only) ───────────── */
.filter-pills, .tl-filter-row {
  gap: var(--t-spacing-1) !important;
}
.filter-pill, .tl-filter-btn {
  height: 26px !important;
  padding: 0 var(--t-spacing-2) !important;
  font-size: var(--t-font-size-xs) !important;
  font-weight: var(--t-font-weight-medium) !important;
  border-radius: var(--t-border-radius-pill) !important;
  border: 1px solid var(--t-border-color-medium) !important;
  background: var(--t-background-primary) !important;
  color: var(--t-font-color-secondary) !important;
  transition: var(--t-transition-bg), border-color var(--t-animation-duration-fast) ease !important;
}
.filter-pill:hover, .tl-filter-btn:hover {
  background: var(--t-background-tertiary) !important;
  color: var(--t-font-color-primary) !important;
}
.filter-pill.active, .tl-filter-btn.active {
  background: var(--t-accent-soft) !important;
  border-color: rgba(242,58,44,0.2) !important;
  color: var(--t-accent-secondary) !important;
  font-weight: var(--t-font-weight-semi-bold) !important;
}


/* ==========================================================================
   Round 6 — Row density, access controls, compact people page
   ========================================================================== */

/* Make "Create public link" row compact — inline style, not full row height */
.people-client-link-row {
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
  gap: var(--t-spacing-1) !important;
  margin-top: var(--t-spacing-0_5) !important;
}
.people-client-link-row button {
  font-size: var(--t-font-size-xs) !important;
  padding: 2px var(--t-spacing-1_5) !important;
  border: 1px solid var(--t-border-color-medium) !important;
  border-radius: var(--t-border-radius-xs) !important;
  background: transparent !important;
  color: var(--t-font-color-tertiary) !important;
  cursor: pointer !important;
  height: auto !important;
  transition: var(--t-transition-bg), color var(--t-animation-duration-fast) ease !important;
}
.people-client-link-row button:hover {
  background: var(--t-background-tertiary) !important;
  color: var(--t-font-color-secondary) !important;
}

/* Tighter table rows on people page */
.people-table td {
  padding: var(--t-spacing-2) var(--t-spacing-3) !important;
}

/* Access segmented buttons - slightly smaller */
.access-seg button {
  padding: 2px var(--t-spacing-2) !important;
  font-size: var(--t-font-size-xxs) !important;
}

/* ── Rate card header section — cleaner ────────────────────────────────────── */
.rate-card-header, .rc-header {
  padding: var(--t-spacing-6) var(--t-spacing-6) var(--t-spacing-4) !important;
}
.rc-eyebrow {
  font-size: var(--t-font-size-xxs) !important;
  font-weight: var(--t-font-weight-semi-bold) !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--t-accent-secondary) !important;
  margin-bottom: var(--t-spacing-1) !important;
}
.ratecard-hero h1 {
  font-size: clamp(26px, 3vw, 32px) !important;  /* disciplined hero, closer to JetOS scale */
  font-weight: var(--t-font-weight-semi-bold) !important;
  color: var(--t-font-color-primary) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 var(--t-spacing-2) !important;
}
.rc-desc {
  font-size: var(--t-font-size-sm) !important;
  color: var(--t-font-color-secondary) !important;
  line-height: var(--t-text-line-height-lg) !important;
  max-width: 480px !important;
}

/* Rate card KPI stat cards */
.rc-stat, .rc-kpi {
  background: var(--t-background-primary) !important;
  border: 1px solid var(--t-border-color-medium) !important;
  border-radius: var(--t-border-radius-md) !important;
  padding: var(--t-spacing-4) !important;
  box-shadow: var(--t-box-shadow-light) !important;
  min-width: 140px;
}
.rc-stat-value {
  font-size: var(--t-font-size-xl) !important;
  font-weight: var(--t-font-weight-semi-bold) !important;
  font-variant-numeric: tabular-nums !important;
  color: var(--t-font-color-primary) !important;
}
.rc-stat-label {
  font-size: var(--t-font-size-xxs) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--t-font-color-tertiary) !important;
  font-weight: var(--t-font-weight-medium) !important;
}

/* ── Project planning modal — tab badge count styling ────────────────────── */
.plan-tab-btn .tab-count {
  background: var(--t-background-tertiary) !important;
  color: var(--t-font-color-tertiary) !important;
  border-radius: var(--t-border-radius-pill) !important;
  font-size: var(--t-font-size-xxs) !important;
  padding: 0 var(--t-spacing-1) !important;
  font-weight: var(--t-font-weight-semi-bold) !important;
  min-width: 18px;
  text-align: center;
}

/* ── Better proj-chip (project bottom tabs) ──────────────────────────────── */
.proj-bottom {
  min-height: 0;
}
.proj-card-row {
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--t-border-color-medium) transparent;
}

/* ── Forecast summary bar (at bottom of plan modal) ─────────────────────── */
.forecast-summary-bar {
  background: var(--t-background-secondary) !important;
  border-top: 1px solid var(--t-border-color-light) !important;
  padding: var(--t-spacing-2) var(--t-spacing-5) !important;
  font-size: var(--t-font-size-xs) !important;
  color: var(--t-font-color-secondary) !important;
  gap: var(--t-spacing-4) !important;
}
.forecast-summary-bar strong {
  color: var(--t-font-color-primary) !important;
  font-weight: var(--t-font-weight-semi-bold) !important;
}

/* ── PM Gantt header ──────────────────────────────────────────────────────── */
.pm-gantt-header {
  background: var(--t-background-primary) !important;
  border-bottom: 1px solid var(--t-border-color-medium) !important;
  padding: var(--t-spacing-2) var(--t-spacing-4) !important;
}
.pm-gantt-header .subtitle {
  font-size: var(--t-font-size-xs) !important;
  color: var(--t-font-color-tertiary) !important;
}

/* ── Timeline column header: day numbers ─────────────────────────────────── */
.tl-head .day .dnum {
  font-size: 1.1rem !important;
  font-weight: var(--t-font-weight-semi-bold) !important;
  line-height: 1 !important;
}
.tl-head .day .dow {
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
}

/* ── Budget display in PM Gantt PM rows ──────────────────────────────────── */
.pm-budget-label {
  font-size: var(--t-font-size-xs) !important;
  font-weight: var(--t-font-weight-medium) !important;
  color: var(--t-color-success) !important;
  font-variant-numeric: tabular-nums !important;
}


/* ==========================================================================
   Round 7 — Rate card real classes + cross-page final polish
   ========================================================================== */

/* ── Rate card: real class names ────────────────────────────────────────────── */
.ratecard-view {
  background: var(--t-background-secondary);
  flex: 1; overflow: auto;
}
.ratecard-hero {
  background: var(--t-background-primary);
  border: 1px solid var(--t-border-color-medium);
  border-radius: var(--t-border-radius-md);
  box-shadow: var(--t-box-shadow-light);
  padding: var(--t-spacing-6) !important;
  margin: var(--t-spacing-5) !important;
}
.ratecard-kicker {
  font-size: var(--t-font-size-xxs) !important;
  font-weight: var(--t-font-weight-semi-bold) !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--t-accent-secondary) !important;
  margin-bottom: var(--t-spacing-1) !important;
}
.ratecard-hero-metrics {
  display: flex;
  gap: var(--t-spacing-3);
  flex-wrap: wrap;
}
.ratecard-hero-metrics > * {
  background: var(--t-background-tertiary) !important;
  border: none !important;             /* no double-border inside the bordered hero */
  border-radius: var(--t-border-radius-md) !important;
  padding: var(--t-spacing-3) var(--t-spacing-4) !important;
  box-shadow: none !important;
  min-width: 130px;
}
.ratecard-toolbar {
  padding: var(--t-spacing-2) var(--t-spacing-5) !important;
  background: var(--t-background-secondary);
}
.ratecard-search {
  background: var(--t-background-primary) !important;
  border: 1px solid var(--t-border-color-medium) !important;
  border-radius: var(--t-border-radius-md) !important;
  padding: var(--t-spacing-1_5) var(--t-spacing-3) !important;
  font-size: var(--t-font-size-sm) !important;
  width: 100%;
  outline: none;
  transition: border-color var(--t-animation-duration-fast) ease, box-shadow var(--t-animation-duration-fast) ease;
}
.ratecard-search:focus {
  border-color: var(--t-accent-primary) !important;
  box-shadow: 0 0 0 2px rgba(242,58,44,0.12) !important;
}
.ratecard-table-card {
  background: var(--t-background-primary) !important;
  border: 1px solid var(--t-border-color-medium) !important;
  border-radius: var(--t-border-radius-md) !important;
  box-shadow: var(--t-box-shadow-light) !important;
  margin: 0 var(--t-spacing-5) var(--t-spacing-5) !important;
  overflow: hidden !important;
}
.ratecard-table th {
  font-size: var(--t-font-size-xxs) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--t-font-color-tertiary) !important;
  background: var(--t-background-secondary) !important;
  border-bottom: 1px solid var(--t-border-color-medium) !important;
  padding: var(--t-spacing-2) var(--t-spacing-3) !important;
  font-weight: var(--t-font-weight-semi-bold) !important;
}
.ratecard-table td {
  padding: var(--t-spacing-2) var(--t-spacing-3) !important;
  border-bottom: 1px solid var(--t-border-color-light) !important;
  font-size: var(--t-font-size-sm) !important;
}
.ratecard-table tr:hover td { background: var(--t-background-secondary) !important; }
.ratecard-role-group td {
  padding: var(--t-spacing-1_5) var(--t-spacing-3) !important;
  font-size: var(--t-font-size-xxs) !important;
  font-weight: var(--t-font-weight-semi-bold) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--t-font-color-tertiary) !important;
  background: var(--t-background-secondary) !important;
  border-top: 1px solid var(--t-border-color-medium) !important;
  border-bottom: 1px solid var(--t-border-color-light) !important;
}
.ratecard-access {
  display: inline-flex !important;
  align-items: center !important;
  padding: 2px var(--t-spacing-2) !important;
  border-radius: var(--t-border-radius-pill) !important;
  font-size: var(--t-font-size-xxs) !important;
  font-weight: var(--t-font-weight-medium) !important;
  background: var(--t-background-tertiary) !important;
  color: var(--t-font-color-tertiary) !important;
  border: 1px solid var(--t-border-color-medium) !important;
}
.ratecard-access.manager {
  background: var(--t-accent-soft) !important;
  color: var(--t-accent-secondary) !important;
  border-color: rgba(242,58,44,0.2) !important;
}
.ratecard-md-rate, .ratecard-sell-rate, .ratecard-line-total {
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: 'tnum' 1 !important;
  color: var(--t-font-color-primary) !important;
}
.ratecard-sell-rate {
  color: var(--t-color-success) !important;
  font-weight: var(--t-font-weight-medium) !important;
}
.ratecard-md-input input {
  border: 1px solid var(--t-border-color-medium) !important;
  border-radius: var(--t-border-radius-sm) !important;
  background: var(--t-background-primary) !important;
  padding: var(--t-spacing-1) var(--t-spacing-2) !important;
  font-size: var(--t-font-size-sm) !important;
  font-variant-numeric: tabular-nums !important;
  text-align: right !important;
  width: 72px !important;
  outline: none !important;
  transition: border-color var(--t-animation-duration-fast) ease !important;
}
.ratecard-md-input input:focus {
  border-color: var(--t-accent-primary) !important;
  box-shadow: 0 0 0 2px rgba(242,58,44,0.10) !important;
}
.ratecard-grand-total td {
  background: var(--t-background-secondary) !important;
  border-top: 1px solid var(--t-border-color-medium) !important;
  font-weight: var(--t-font-weight-semi-bold) !important;
  color: var(--t-font-color-primary) !important;
  font-size: var(--t-font-size-sm) !important;
}

/* ── Tl member name cell (week view) ─────────────────────────────────────── */
.tl-row-h .who {
  min-width: 0;
  flex: 1;
}
.tl-row-h .who .nm {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Slot bar text ───────────────────────────────────────────────────────── */
.tl-slot .slot-label, .slot .slot-name, .block .block-name {
  font-size: var(--t-font-size-md) !important;
  font-weight: var(--t-font-weight-medium) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Project list improvements ───────────────────────────────────────────── */
.project-list-wrap, .proj-list-outer {
  background: var(--t-background-secondary);
  flex: 1; overflow: auto;
}

/* ── Pro-tip / notice banners ────────────────────────────────────────────── */
.notice-bar, .tip-bar, [class*="notice"], [class*="tip-"] {
  background: var(--t-color-info-bg) !important;
  border: 1px solid rgba(64,96,214,0.15) !important;
  border-radius: var(--t-border-radius-sm) !important;
  color: var(--t-font-color-secondary) !important;
  font-size: var(--t-font-size-xs) !important;
  padding: var(--t-spacing-2) var(--t-spacing-3) !important;
}

/* ── Modal overlay — make sure it covers properly ───────────────────────── */
.modal-shade, .modal-backdrop {
  position: fixed !important;
  left: 0 !important; right: 0 !important; bottom: 0 !important;
  top: var(--header-h) !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding-top: var(--t-spacing-6) !important;
  z-index: 50 !important;
}

/* ── Toast/snack positioning ─────────────────────────────────────────────── */
.toast-wrap {
  position: fixed !important;
  bottom: var(--t-spacing-5) !important;
  right: var(--t-spacing-5) !important;
  z-index: 200 !important;
  display: flex;
  flex-direction: column;
  gap: var(--t-spacing-2);
}


/* ==========================================================================
   Round 8-9 — Final polish: proj-chips, micro-interactions, consistency
   ========================================================================== */

/* ── Project color chips (bottom filter strip) ───────────────────────────── */
.proj-chip {
  font-size: var(--t-font-size-xs) !important;
  padding: var(--t-spacing-1_5) var(--t-spacing-3) !important;
  gap: var(--t-spacing-1) !important;
  color: var(--t-font-color-secondary) !important;
  border-right: 1px solid var(--t-border-color-light) !important;
  height: 36px !important;
  transition: var(--t-transition-bg), color var(--t-animation-duration-fast) ease !important;
}
.proj-chip:hover {
  background: var(--t-background-tertiary) !important;
  color: var(--t-font-color-primary) !important;
}
.proj-chip.active {
  background: var(--t-background-primary) !important;
  color: var(--t-font-color-primary) !important;
  font-weight: var(--t-font-weight-semi-bold) !important;
  box-shadow: inset 0 -2px 0 var(--proj-color, var(--t-accent-primary)) !important;
}
.proj-chip-dot {
  width: 7px; height: 7px;
  border-radius: var(--t-border-radius-xs) !important;
}
.proj-chip-name {
  font-size: var(--t-font-size-xs) !important;
}
.proj-chip-md {
  font-size: var(--t-font-size-xxs) !important;
  font-family: var(--t-code-font-family) !important;
  background: var(--t-background-tertiary) !important;
  color: var(--t-font-color-secondary) !important;
  border-radius: var(--t-border-radius-xs) !important;
  padding: 1px var(--t-spacing-1) !important;
}
.proj-chip-cv {
  font-size: var(--t-font-size-xxs) !important;
  font-family: var(--t-code-font-family) !important;
  color: var(--t-accent-secondary) !important;
  font-weight: var(--t-font-weight-semi-bold) !important;
}

/* ── Proj-bottom container ───────────────────────────────────────────────── */
.proj-bottom {
  border-top: 1px solid var(--t-border-color-medium) !important;
  background: var(--t-background-primary) !important;
}
.proj-card-row {
  background: var(--t-background-secondary) !important;
  border-bottom: 1px solid var(--t-border-color-medium) !important;
}

/* ── Holiday dots in calendar header ────────────────────────────────────── */
.holiday-dot {
  background: var(--t-color-warning) !important;
  opacity: 0.7;
}

/* ── Today button in toolbar ─────────────────────────────────────────────── */
.tb-today, button[data-today] {
  font-weight: var(--t-font-weight-semi-bold) !important;
  color: var(--t-font-color-primary) !important;
}

/* ── Year display in toolbar date label ──────────────────────────────────── */
.tb-yr, .year-label {
  font-size: var(--t-font-size-xxs) !important;
  color: var(--t-font-color-tertiary) !important;
  font-weight: var(--t-font-weight-medium) !important;
}

/* ── Input focus ring consistency ────────────────────────────────────────── */
input:focus, textarea:focus, select:focus, [contenteditable]:focus {
  outline: none !important;
  border-color: var(--t-accent-primary) !important;
  box-shadow: 0 0 0 2px rgba(24, 24, 27, 0.10) !important;
}

/* ── Checkbox styling ────────────────────────────────────────────────────── */
input[type="checkbox"] {
  accent-color: var(--t-accent-primary) !important;
  width: 14px; height: 14px;
}

/* ── Select dropdowns ────────────────────────────────────────────────────── */
select {
  border: 1px solid var(--t-border-color-medium) !important;
  border-radius: var(--t-border-radius-sm) !important;
  background: var(--t-background-primary) !important;
  color: var(--t-font-color-primary) !important;
  font-size: var(--t-font-size-sm) !important;
  padding: var(--t-spacing-1) var(--t-spacing-2) !important;
}

/* ── Dropdown menus (picker menus, date pickers) ─────────────────────────── */
.tb-picker-menu, .mth-dropdown, .picker-dropdown {
  background: var(--t-background-primary) !important;
  border: 1px solid var(--t-border-color-medium) !important;
  border-radius: var(--t-border-radius-md) !important;
  box-shadow: var(--t-box-shadow-super-heavy) !important;
}

/* ── PM Gantt: project row status dots ───────────────────────────────────── */
.pm-status-dot, .status-dot {
  width: 8px; height: 8px;
  border-radius: var(--t-border-radius-rounded) !important;
  flex-shrink: 0;
}

/* ── Numbers that show budget/cost ───────────────────────────────────────── */
.cost-pos, .profit-pos, .green-val { color: var(--t-color-success) !important; }
.cost-neg, .profit-neg, .red-val   { color: var(--t-color-danger) !important; }
.cost-warn, .warn-val              { color: var(--t-color-warning) !important; }

/* ── Scrollbar for the project gantt head ────────────────────────────────── */
.tl-project-gantt::-webkit-scrollbar       { height: 6px; width: 6px; }
.tl-project-gantt::-webkit-scrollbar-thumb {
  background: var(--t-border-color-medium);
  border-radius: var(--t-border-radius-pill);
}
.tl-project-gantt::-webkit-scrollbar-track { background: transparent; }

/* ── Focus visible for keyboard nav ──────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--t-accent-primary) !important;
  outline-offset: 2px !important;
}
button:focus:not(:focus-visible),
input:focus:not(:focus-visible) {
  outline: none !important;
}

/* ── Prevent layout shift on page transitions ─────────────────────────────── */
.app-body > * {
  min-width: 0;
  min-height: 0;
}

/* ── Final: ensure body bg matches Twenty secondary ─────────────────────── */
body {
  background: var(--t-background-secondary) !important;
}

/* ── Final: high-contrast toast visibility ───────────────────────────────── */
.toast-wrap {
  left: auto !important;
  right: 24px !important;
  bottom: 24px !important;
  transform: none !important;
  z-index: 1000 !important;
  max-width: min(560px, calc(100vw - 32px));
}
.toast {
  min-width: 360px;
  max-width: 100%;
  padding: 16px 20px !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  border-radius: 12px !important;
  background: #111827 !important;
  color: #fff !important;
  box-shadow: 0 20px 45px rgba(15,23,42,0.28), 0 4px 10px rgba(15,23,42,0.18) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  gap: 14px !important;
}
.toast.warn {
  border-color: rgba(245,158,11,0.45) !important;
  background: #78350f !important;
  color: #fff7ed !important;
}
.toast.err,
.toast.error {
  border-color: rgba(248,113,113,0.45) !important;
  background: #7f1d1d !important;
  color: #fff1f2 !important;
}
.toast.success {
  border-color: rgba(52,211,153,0.45) !important;
  background: #064e3b !important;
  color: #ecfdf5 !important;
}
.toast .i {
  width: 11px !important;
  height: 11px !important;
  flex: 0 0 11px;
  background: currentColor !important;
  opacity: 0.95;
}
@media (max-width: 640px) {
  .toast-wrap {
    left: 16px !important;
    right: 16px !important;
    bottom: 16px !important;
    max-width: none;
  }
  .toast {
    min-width: 0;
    width: 100%;
  }
}