/* ── FONTS ───────────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Roobert';
  src: url('./fonts/Roobert-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roobert';
  src: url('./fonts/Roobert-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roobert';
  src: url('./fonts/Roobert-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* ── TOKENS ─────────────────────────────────────────────────────────────── */
:root {
  --cobalt:       #0031CA;
  --cobalt-hover: #002399;
  --cobalt-dark:  #0026A0;
  --accent:       #0031CA;   /* alias — used site-wide for primary interactive colour */
  --cyan:         #74FFE0;
  --navy:         #061C22;
  --white:        #FFFFFF;
  --bg:           #F5F6F6;
  --surface:      #FFFFFF;
  --border:       #E1E1E1;
  --divider:      #CDD2D3;
  --text:         #061C22;
  --text-muted:   #9A9E9E;
  --light-cyan:   #E3FFF9;
  --radius:       8px;
  --shadow:       0 2px 8px rgba(0,0,0,.08);
  --shadow-md:    0 4px 20px rgba(0,0,0,.12);
  --sidebar-w:    228px;

  /* status colours */
  --c-todo:      #9A9E9E;
  --c-active:    #0031CA;
  --c-inprogress:#7C3AED;
  --c-blocked:   #DC2626;
  --c-done:      #059669;
  --c-warn:      #0284C7;
  --c-overdue:   #DC2626;
}

/* ── RESET ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 14px; color: var(--text); background: var(--bg); }
h1, h2, h3, .view-header h2, .settings-section h3, .sidebar-title, .tb-brand-name { font-family: 'Roobert', 'Inter', sans-serif; }
button { cursor: pointer; font: inherit; }
input, select, textarea { font: inherit; }
/* Bold only for structural headers — table cells and body text stay at 400 */
strong, b { font-weight: 500; }
td strong, td b { font-weight: 400; }
.hidden { display: none !important; }

/* ── LOADING SCREEN ─────────────────────────────────────────────────────── */
#screen-loading {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; background: var(--navy);
  color: var(--white); font-size: 1rem; gap: 12px;
}
#screen-loading::before {
  content: ''; width: 20px; height: 20px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.3); border-top-color: var(--cyan);
  animation: spin .8s linear infinite;
}
#screen-error { padding: 2rem; color: var(--c-blocked); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── LOGIN SCREEN ───────────────────────────────────────────────────────── */
#screen-login {
  min-height: 100vh; background: var(--navy);
  display: flex; align-items: center; justify-content: center;
}
.login-card {
  background: var(--surface); border-radius: 12px; padding: 2.5rem 2rem;
  width: 380px; text-align: center; box-shadow: var(--shadow-md);
}
.login-card img { height: 36px; margin-bottom: 1.5rem; }
.login-card h1 { font-size: 1.3rem; font-weight: 500; color: var(--navy); margin-bottom: .4rem; }
.login-card > p { color: var(--text-muted); margin-bottom: 1.5rem; font-size: .9rem; }
.login-card .form-group { text-align: left; margin-bottom: 1rem; }
.login-card .form-group label { display: block; font-weight: 500; font-size: .82rem; margin-bottom: .35rem; color: var(--text); }
.login-card .form-group input { width: 100%; }
.login-btn { width: 100%; margin-top: .5rem; padding: .75rem; font-size: .95rem; }
.login-error { color: var(--c-blocked); font-size: .85rem; margin-bottom: .75rem; text-align: left; }
.login-footer { margin-top: 1.25rem; color: var(--text-muted); font-size: .8rem; line-height: 1.5; }

/* ── SETUP SCREEN ───────────────────────────────────────────────────────── */
#screen-setup {
  min-height: 100vh; background: var(--navy);
  display: flex; align-items: center; justify-content: center; padding: 2rem;
}
.setup-card {
  background: var(--surface); border-radius: 12px; padding: 2.5rem;
  width: 540px; max-width: 100%; box-shadow: var(--shadow-md);
}
.setup-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 1rem; }
.setup-logo img { height: 32px; }
.setup-logo h1 { font-size: 1.2rem; font-weight: 500; color: var(--navy); }
.setup-sub { color: var(--text-muted); margin-bottom: 1.5rem; }
.setup-step { margin-bottom: 1rem; }
.setup-step label { display: block; font-weight: 500; margin-bottom: .4rem; }
.input-row { display: flex; gap: 8px; }
.input-row input { flex: 1; padding: .5rem .75rem; border: 1px solid var(--border); border-radius: var(--radius); }
.results-label { font-weight: 500; margin: 1rem 0 .5rem; }
.site-result {
  padding: .75rem 1rem; border: 1px solid var(--border); border-radius: var(--radius);
  margin-bottom: .4rem; cursor: pointer; transition: border-color .15s, background .15s;
}
.site-result:hover { border-color: var(--cobalt); background: #F0F4FF; }
.site-result.selected { border-color: var(--cobalt); background: #EEF3FF; }
.site-result strong { display: block; }
.site-result span { color: var(--text-muted); font-size: .82rem; }
.setup-confirm { width: 100%; margin-top: 1.25rem; }
.searching, .no-results { color: var(--text-muted); padding: .75rem 0; }
.seed-progress { color: var(--cobalt); font-weight: 500; margin-top: 1rem; }

/* ── TEAM CLOCK BAR ─────────────────────────────────────────────────────── */
:root { --clock-h: 64px; }

#team-clock-bar {
  position: fixed; top: 0; left: 0; right: 0; height: var(--clock-h);
  background: var(--navy); z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 0 1rem;
  border-bottom: 1px solid rgba(255,255,255,.1);
  overflow-x: auto; gap: 0;
}
#team-clock-bar::-webkit-scrollbar { height: 3px; }
#team-clock-bar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 2px; }

.clock-members { display: flex; align-items: center; gap: 0; }
.clock-person {
  display: flex; align-items: center; gap: .6rem;
  padding: .4rem 1.1rem; border-right: 1px solid rgba(255,255,255,.08);
  transition: background .15s; white-space: nowrap;
}
.clock-person:last-child { border-right: none; }
.clock-person:hover { background: rgba(255,255,255,.06); }
.clock-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem; font-weight: 500; color: #fff;
}
.clock-info { display: flex; flex-direction: column; line-height: 1.25; }
.clock-name { font-size: .76rem; font-weight: 500; color: rgba(255,255,255,.9); }
.clock-sub  { font-size: .64rem; color: rgba(255,255,255,.4); }
.clock-time {
  font-size: .82rem; font-weight: 500; font-variant-numeric: tabular-nums;
  margin-top: .05rem;
}
.clock-online  .clock-time { color: #34D399; }
.clock-offline .clock-time { color: rgba(255,255,255,.35); }
.clock-online  .clock-avatar { opacity: 1; }
.clock-offline .clock-avatar { opacity: .4; }

body.has-clock-bar #sidebar  { top: var(--clock-h); }
body.has-clock-bar #content  { padding-top: calc(var(--topbar-h) + 1.5rem + var(--clock-h)); }

/* ── APP TOP BAR ────────────────────────────────────────────────────────── */
:root { --topbar-h: 64px; }

#app-top-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--topbar-h);
  background: linear-gradient(90deg, #001E8C 0%, #061C22 100%);
  border-bottom: 1px solid rgba(255,255,255,.07);
  display: flex; align-items: center;
  padding: 0 1.1rem 0 0;
  gap: .35rem;
  z-index: 150;
}

.tb-spacer { flex: 1; }
.tb-divider {
  width: 1px; height: 20px;
  background: rgba(255,255,255,.14);
  margin: 0 .25rem;
}

.tb-btn {
  display: flex; align-items: center; gap: .4rem;
  border: none; background: transparent; cursor: pointer;
  font-family: inherit; font-size: .8rem;
  color: rgba(255,255,255,.6);
  padding: .35rem .55rem;
  border-radius: 6px;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.tb-btn:hover { background: rgba(255,255,255,.09); color: rgba(255,255,255,.95); }

.tb-search {
  border: 1px solid rgba(255,255,255,.16);
  gap: .5rem;
  padding: .3rem .65rem;
  color: rgba(255,255,255,.55);
  margin-left: .4rem;
  border-left-color: rgba(255,255,255,.22);
}
.tb-search:hover { border-color: rgba(116,255,224,.55); color: rgba(255,255,255,.85); }
.tb-search kbd {
  font-size: .68rem;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 4px;
  padding: .1rem .35rem;
  background: rgba(255,255,255,.06);
  font-family: monospace;
  color: rgba(255,255,255,.35);
}

.tb-icon-btn {
  width: 34px; height: 34px;
  justify-content: center;
  padding: 0;
  border-radius: 8px;
  color: rgba(255,255,255,.65);
}
.tb-icon-btn:hover { background: rgba(255,255,255,.1); color: rgba(255,255,255,.95); }
.tb-sun  { display: none; }
.tb-moon { display: block; }
[data-theme="dark"] .tb-sun  { display: block; }
[data-theme="dark"] .tb-moon { display: none; }

/* ── APP SHELL ──────────────────────────────────────────────────────────── */
#screen-app {
  display: flex; min-height: 100vh;
}

/* ── SIDEBAR ─────────────────────────────────────────────────────────────── */
#sidebar {
  width: var(--sidebar-w);
  background: linear-gradient(160deg, #001E8C 0%, #061C22 55%, #03141A 100%);
  color: var(--white);
  display: flex; flex-direction: column; flex-shrink: 0;
  position: fixed; top: var(--topbar-h); left: 0; bottom: 0; z-index: 100;
}
.sidebar-brand {
  padding: 1.25rem 1rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
}
.sidebar-logo-svg { height: 28px; width: auto; max-width: 160px; display: block; }
.sidebar-brand-label {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .1em;
  color: rgba(116,255,224,.9); font-weight: 500; font-family: 'Roobert', 'Inter', sans-serif;
  display: block; margin-top: .15rem; text-align: center;
}
.nav-group { padding: .85rem 0 .5rem; flex: 1; overflow-y: auto; }
.nav-label {
  padding: .75rem 1rem .3rem; font-size: .66rem; text-transform: uppercase;
  letter-spacing: .09em; color: rgba(255,255,255,.5); font-weight: 600;
}
.nav-label:first-child { padding-top: .35rem; }
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: .5rem .85rem;
  margin: 1px .45rem;
  width: calc(100% - .9rem);
  color: rgba(255,255,255,.65);
  cursor: pointer; border-radius: 8px;
  transition: background .15s, color .15s;
  font-size: .875rem; border: none; background: none; text-align: left;
}
.nav-item:hover { background: rgba(255,255,255,.09); color: var(--white); }
.nav-item.active {
  background: rgba(0,49,202,.55); color: #74FFE0;
  box-shadow: inset 3px 0 0 #74FFE0;
  font-weight: 500;
}
.nav-icon {
  width: 18px; height: 18px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.nav-icon svg { width: 18px; height: 18px; }
.sidebar-footer {
  border-top: 1px solid rgba(255,255,255,.08);
  padding: .75rem 1rem;
}
#user-bar { display: flex; flex-direction: column; gap: 4px; }
.sidebar-footer .btn-ghost { color: rgba(255,255,255,.75); border-color: rgba(255,255,255,.3); }
.sidebar-footer .btn-ghost:hover { color: var(--white); border-color: rgba(255,255,255,.6); background: rgba(255,255,255,.08); border-radius: 4px; }
.user-name { font-size: .82rem; color: var(--white); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-role-badge {
  font-size: .7rem; padding: .15rem .5rem; border-radius: 99px; width: fit-content;
  text-transform: uppercase; letter-spacing: .05em; font-weight: 500;
}
.role-admin  { background: var(--cyan); color: var(--navy); }
.role-editor { background: rgba(124,58,237,.4); color: #E9D5FF; }
.role-viewer { background: rgba(255,255,255,.15); color: rgba(255,255,255,.8); }

/* ── MAIN CONTENT ───────────────────────────────────────────────────────── */
#content {
  margin-left: var(--sidebar-w);
  flex: 1; padding: calc(var(--topbar-h) + 1.75rem) 2.25rem 3rem; min-height: 100vh;
  max-width: calc(100vw - var(--sidebar-w));
}
#content.page-transition {
  animation: pageIn .14s ease-out both;
}
@keyframes pageIn {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── VIEW HEADER ─────────────────────────────────────────────────────────── */
.view-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.5rem; padding-bottom: 1rem;
  border-bottom: 1px solid var(--divider);
  gap: 1rem; flex-wrap: wrap;
}
.view-header h2 {
  font-size: 1.55rem; font-weight: 700; letter-spacing: -.01em; font-family: 'Roobert', 'Inter', sans-serif;
  /* Light mode: cobalt → secondary blue gradient */
  background: linear-gradient(135deg, #0031CA 0%, #026FFF 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.site-label { font-size: .8rem; color: var(--text-muted); }

/* ── FILTER BAR ─────────────────────────────────────────────────────────── */
.filter-bar {
  display: flex; gap: 6px; align-items: center; margin-bottom: 1.25rem; flex-wrap: wrap;
}
.filter-bar input, .filter-bar select {
  padding: .45rem .75rem; border: 1.5px solid var(--border); border-radius: 7px;
  background: var(--white); min-width: 140px; font-size: .875rem;
}
.filter-bar input:focus, .filter-bar select:focus { outline: none; border-color: var(--cobalt); box-shadow: 0 0 0 3px rgba(116,255,224,.25); }

/* ── BUTTONS ─────────────────────────────────────────────────────────────── */
.btn-primary {
  padding: .52rem 1.15rem; background: var(--cobalt); color: var(--white);
  border: none; border-radius: 7px; font-weight: 600; font-family: 'Roobert', 'Inter', sans-serif;
  transition: background .15s, box-shadow .15s;
  box-shadow: 0 1px 3px rgba(0,49,202,.25);
  font-size: .875rem;
}
.btn-primary:hover { background: var(--cobalt-dark); box-shadow: 0 3px 10px rgba(0,49,202,.3), 0 0 0 3px rgba(116,255,224,.2); }
.btn-secondary {
  padding: .5rem 1.1rem; background: var(--white); color: var(--cobalt);
  border: 1.5px solid var(--cobalt); border-radius: 6px; font-weight: 500;
  font-family: 'Roobert', 'Inter', sans-serif; transition: background .15s;
}
.btn-secondary:hover { background: #F0F4FF; }
.btn-ghost {
  padding: .5rem 1rem; background: transparent; color: var(--text);
  border: 1.5px solid var(--border); border-radius: 7px; transition: color .15s, border-color .15s, background .15s;
  text-decoration: none; font-size: .875rem;
}
.btn-ghost:hover { text-decoration: none; border-color: #9BAABF; background: rgba(0,0,0,.03); }
.btn-ghost.small { padding: .35rem .75rem; font-size: .82rem; }
.btn-danger { padding: .5rem 1rem; background: #FEE2E2; color: var(--c-blocked); border: 1px solid #FECACA; border-radius: var(--radius); }
.btn-danger:hover { background: #FECACA; }
.btn-icon { background: none; border: none; font-size: 1rem; padding: .2rem .4rem; border-radius: 4px; }
.btn-icon:hover { background: var(--bg); }
.btn-icon.danger { color: var(--c-blocked); }

/* ── DASHBOARD ───────────────────────────────────────────────────────────── */
.stat-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 1rem; margin-bottom: 1.5rem;
}
.stat-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.1rem 1rem; cursor: pointer; transition: box-shadow .15s, border-color .15s;
  border-left: 4px solid var(--cobalt);
}
.stat-card:hover { box-shadow: var(--shadow); border-color: var(--cobalt); }
.stat-num { font-size: 2rem; font-weight: 500; color: var(--cobalt); line-height: 1; }
.stat-label { font-size: .8rem; color: var(--text-muted); margin-top: .3rem; }
.stat-card.warn .stat-num  { color: var(--c-warn); }
.stat-card.success .stat-num { color: var(--c-done); }
.stat-card.danger .stat-num  { color: var(--c-blocked); }

.dash-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.dash-panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem;
}
.dash-panel h3 { font-size: .9rem; font-weight: 600; margin-bottom: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.dash-task {
  display: flex; align-items: center; gap: 8px; padding: .5rem .4rem;
  border-radius: 6px; cursor: pointer; transition: background .15s;
}
.dash-task:hover { background: var(--bg); }
.dash-task-title { flex: 1; font-size: .88rem; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.status-dot.inprogress { background: var(--c-inprogress); }
.status-dot.blocked    { background: var(--c-blocked); }
.status-dot.todo       { background: var(--c-todo); }
.status-dot.done       { background: var(--c-done); }

.dash-event {
  display: flex; align-items: flex-start; gap: 10px; padding: .5rem .4rem;
  border-radius: 6px; cursor: pointer; transition: background .15s;
}
.dash-event:hover { background: var(--bg); }
.dash-event-date { font-size: .78rem; font-weight: 500; color: var(--cobalt); min-width: 60px; }
.dash-event-title { font-size: .88rem; font-weight: 400; }
.dash-event-loc { font-size: .78rem; color: var(--text-muted); }
.empty-state { color: var(--text-muted); font-size: .875rem; padding: .75rem 0; line-height: 1.5; }

/* ── KANBAN BOARD ────────────────────────────────────────────────────────── */
.kanban-board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem; align-items: start;
}
.kanban-col {
  background: var(--bg); border-radius: var(--radius);
  border: 1px solid var(--border); min-height: 200px;
}
.kanban-col-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .7rem 1rem; border-radius: var(--radius) var(--radius) 0 0;
  font-weight: 500; font-size: .78rem; text-transform: uppercase; letter-spacing: .07em;
}
.col-todo       { background: #F1F5F9; color: var(--c-todo); }
.col-inprogress { background: #EEF3FF; color: var(--cobalt); border-left: 3px solid var(--cobalt); }
.col-blocked    { background: #E0F2FE; color: #0369A1; }
.col-done       { background: #D1FAE5; color: var(--c-done); }
.col-count {
  background: rgba(0,0,0,.1); color: inherit;
  border-radius: 99px; padding: .1rem .5rem; font-size: .78rem;
}
.kanban-cards { padding: .5rem; display: flex; flex-direction: column; gap: .4rem; }

.task-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: 10px; padding: .85rem .95rem; cursor: pointer;
  transition: box-shadow .18s, border-color .18s, transform .18s;
  border-left: 3px solid var(--divider);
  box-shadow: 0 1px 3px rgba(6,28,34,.04);
}
.task-card:hover { box-shadow: 0 6px 20px rgba(0,49,202,.09); border-color: #BFCEF7; border-left-color: var(--cobalt); transform: translateY(-2px); }
.task-card.overdue { border-left-color: var(--c-blocked); }
.card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: .4rem; }
.task-id-sm { font-size: .72rem; font-weight: 500; color: var(--text-muted); }
.card-title { font-size: .875rem; font-weight: 500; line-height: 1.4; margin-bottom: .45rem; color: var(--text); }
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.card-owner { font-size: .75rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 55%; }
.card-due   { font-size: .72rem; color: var(--text-muted); }
.card-note  { font-size: .72rem; color: var(--c-blocked); margin-top: .3rem; font-style: italic; }
.text-danger { color: var(--c-blocked) !important; }
.add-task-inline {
  padding: .5rem; color: var(--text-muted); font-size: .82rem;
  cursor: pointer; border-radius: 6px; text-align: center;
  border: 1px dashed var(--border); transition: background .15s;
}
.add-task-inline:hover { background: var(--white); color: var(--cobalt); }

/* ── PRIORITY BADGES ─────────────────────────────────────────────────────── */
.pri-badge {
  font-size: .68rem; font-weight: 500; padding: .15rem .45rem; border-radius: 99px;
  text-transform: uppercase; letter-spacing: .04em;
}
.pri-critical { background: #FEE2E2; color: #991B1B; }
.pri-high     { background: #E0F2FE; color: #0369A1; }
.pri-med      { background: #E0E7FF; color: #3730A3; }

/* ── STATUS BADGES ───────────────────────────────────────────────────────── */
.status-badge {
  font-size: .68rem; font-weight: 700; padding: .22rem .65rem;
  border-radius: 99px; text-transform: uppercase; letter-spacing: .05em;
  white-space: nowrap;
}
.s-active     { background: #D1FAE5; color: #065F46; }          /* green  — it's running */
.s-confirmed  { background: #D1FAE5; color: #065F46; }
.s-todo, .s-planning, .s-tbd { background: #F1F5F9; color: var(--c-todo); }
.s-inprogress { background: #E0E9FF; color: #0031CA; }          /* cobalt — in flight */
.s-blocked    { background: #FEE2E2; color: #991B1B; }          /* red    — needs attention */
.s-overdue    { background: #FEE2E2; color: #991B1B; font-weight:800; }  /* red — AT RISK */
.s-paused     { background: #FEF3C7; color: #92400E; }          /* amber  — slowed, not broken */
.s-starting   { background: #FEF9C3; color: #854D0E; }          /* yellow — starting soon */
.s-ontrack    { background: #D1FAE5; color: #065F46; }          /* green  — on track */
.s-atrisk     { background: #FEE2E2; color: #991B1B; font-weight:800; } /* red — at risk */
.s-done       { background: #D1FAE5; color: #065F46; }
.s-admin      { background: var(--cyan); color: var(--navy); }
.s-editor     { background: #EDE9FE; color: #5B21B6; }
.s-viewer     { background: #F1F5F9; color: var(--c-todo); }

/* ── TYPE BADGES ─────────────────────────────────────────────────────────── */
/* Matches funnel-tag sizing for visual consistency across tables */
.type-badge {
  font-size: .68rem; font-weight: 600; padding: .18rem .52rem;
  border-radius: 4px; letter-spacing: .04em; text-transform: uppercase;
  white-space: nowrap; display: inline-block;
}
.type-showcase   { background: #DBEAFE; color: #1D4ED8; }   /* blue */
.type-external   { background: #EDE9FE; color: #5B21B6; }   /* purple */
.type-isv        { background: #E0E9FF; color: #0031CA; }   /* cobalt */
.type-webinar    { background: #F0FDF4; color: #166534; }   /* green */
.type-internal   { background: #F1F5F9; color: #374151; }   /* neutral */
.type-tradeshow  { background: #E0F2FE; color: #0369A1; }   /* sky */
.type-customer   { background: #FEF3C7; color: #92400E; }   /* amber */
.type-roundtable { background: #FCE7F3; color: #9D174D; }   /* pink */
.type-lunch      { background: #FFF7ED; color: #9A3412; }   /* orange */
.type-other      { background: #F1F5F9; color: var(--c-todo); }

/* ── DATA TABLE ──────────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }
.data-table {
  width: 100%; border-collapse: collapse; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
}
.data-table th {
  text-align: left; padding: .65rem 1rem; background: var(--bg);
  font-size: .72rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-muted); font-weight: 700; border-bottom: 2px solid var(--divider);
  white-space: nowrap;
}
.data-table td {
  padding: .8rem 1rem; border-bottom: 1px solid var(--divider); vertical-align: middle;
  border-left: none; border-right: none; font-size: .875rem; line-height: 1.4;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr.clickable { cursor: pointer; }
.data-table tr.clickable:hover td { background: rgba(116,255,224,.06); }
.desc-cell { max-width: 280px; font-size: .82rem; color: var(--text-muted); }

/* Shared column type rules used across all planning tables */
.data-table .td-action  { width: 2.5rem; text-align: center; padding-left: .5rem; padding-right: .5rem; }
.data-table .td-primary { font-weight: 500; max-width: 260px; white-space: normal; }
.data-table .td-date    { white-space: nowrap; }
.data-table .td-secondary { font-size: .82rem; color: var(--text-muted); }
.data-table .td-vertical  { font-size: .78rem; color: var(--text-muted); max-width: 200px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.data-table .td-link-cell { font-size: .82rem; white-space: nowrap; }

/* ── EVENTS ──────────────────────────────────────────────────────────────── */
.events-list { display: flex; flex-direction: column; gap: 0; }
.event-group-label {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-muted); font-weight: 500;
  padding: 1rem 0 .5rem; border-bottom: 2px solid var(--border); margin-bottom: .25rem;
}
.event-row {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: .85rem 1rem; border-bottom: 1px solid var(--border);
  background: var(--white); transition: background .15s; cursor: default;
}
.event-row:last-child { border-bottom: none; }
.event-row:hover { background: #FAFBFF; }
.event-row:first-of-type { border-radius: var(--radius) var(--radius) 0 0; }
.evt-done { opacity: .6; }
.evt-blocked { border-left: 3px solid var(--c-blocked); }
.evt-date-col { min-width: 80px; text-align: center; }
.evt-date { font-weight: 500; color: var(--cobalt); font-size: .88rem; }
.evt-end  { font-size: .75rem; color: var(--text-muted); }
.evt-info { flex: 1; }
.evt-title { font-weight: 400; margin-bottom: .3rem; }
.evt-meta  { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.evt-loc, .evt-owner, .evt-att { font-size: .8rem; color: var(--text-muted); }
.evt-notes { font-size: .78rem; color: var(--c-warn); margin-top: .3rem; font-style: italic; }
.evt-status-col { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }

/* ── SETTINGS ────────────────────────────────────────────────────────────── */
.settings-page-sub { font-size:.85rem; color:var(--text-muted); margin-top:.2rem; }

.settings-group-label {
  font-size:.68rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em;
  color:var(--text-muted); margin:.5rem 0 .5rem; padding-left:.1rem;
}
.settings-danger-label { color:#DC2626; }

.settings-section {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 1.35rem 1.4rem; margin-bottom: .85rem;
  box-shadow: 0 1px 4px rgba(6,28,34,.04);
  transition: box-shadow .18s, border-color .18s;
}
.settings-section:hover { box-shadow: 0 4px 14px rgba(0,49,202,.07); border-color: var(--border); }
.settings-section h3 {
  font-size: .95rem; font-weight: 600; color: var(--text); margin-bottom: .3rem;
}
.settings-section-head {
  display:flex; align-items:flex-start; justify-content:space-between; gap:1rem;
}
.settings-section-head > div { flex:1; }
.settings-hint { font-size: .82rem; color: var(--text-muted); margin-bottom: .5rem; line-height:1.5; }
.settings-ok { font-size:.82rem; color:var(--c-done); margin-top:.4rem; }
.settings-inline-code {
  font-family:'Courier New',monospace; font-size:.8rem;
  background:var(--bg); border:1px solid var(--border); border-radius:4px;
  padding:.05rem .35rem;
}

/* SQL collapse block */
.settings-sql-block { margin-top:.65rem; }
.settings-sql-toggle {
  display:inline-flex; align-items:center; gap:.4rem;
  background:none; border:1px solid var(--border); border-radius:5px;
  font-size:.76rem; color:var(--text-muted); padding:.25rem .6rem; cursor:pointer;
  transition:background .1s, color .1s;
}
.settings-sql-toggle:hover { background:var(--bg); color:var(--text); }
.settings-sql-toggle svg { transition:transform .2s; flex-shrink:0; }
.settings-sql-block.expanded .settings-sql-toggle svg { transform:rotate(180deg); }
.settings-sql-toggle span { line-height:1; }
.settings-sql-body { display:none; margin-top:.5rem; }
.settings-sql-block.expanded .settings-sql-body { display:block; }

.settings-code {
  font-family: 'Courier New', monospace; font-size: .78rem;
  background: #F3F5F9; border: 1px solid var(--border); border-radius: 6px;
  padding: .75rem 1rem; margin: .5rem 0 .75rem; white-space: pre-wrap;
  color: #1A2233; line-height: 1.6;
}
/* ── FEATURE FLAGS PANEL ─────────────────────────────────────────────────── */
.settings-ff-panel { padding:1rem 1.25rem; }
.settings-ff-row {
  display:flex; align-items:flex-start; gap:.85rem;
  padding:.85rem 0; border-bottom:1px solid var(--border);
}
.settings-ff-row:last-child { border-bottom:none; padding-bottom:0; }
.settings-ff-row:first-of-type { padding-top:0; }
.ff-icon {
  width:32px; height:32px; border-radius:8px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg); color:var(--text-muted); border:1px solid var(--border);
}
.ff-active .ff-icon { background:rgba(5,150,105,.08); color:#059669; border-color:rgba(5,150,105,.2); }
.ff-body { flex:1; min-width:0; }
.ff-label { font-size:.88rem; font-weight:500; color:var(--text); margin-bottom:.2rem; }
.ff-desc  { font-size:.78rem; color:var(--text-muted); line-height:1.5; }
.ff-status { flex-shrink:0; padding-top:.1rem; }
.ff-badge {
  display:inline-block; font-size:.72rem; font-weight:500;
  padding:.2rem .55rem; border-radius:20px;
}
.ff-on  { background:rgba(5,150,105,.1); color:#059669; }
.ff-off { background:rgba(220,38,38,.08); color:#DC2626; }

/* ── DANGER ZONE ─────────────────────────────────────────────────────────── */
/* ── COLLAPSIBLE SETTINGS SECTIONS ──────────────────────────────────────── */
.ss-hidden { display: none !important; }

.ss-head {
  cursor: pointer;
  user-select: none;
}
.ss-head:hover { background: rgba(0,0,0,.02); }
[data-theme="dark"] .ss-head:hover { background: rgba(255,255,255,.03); }

.ss-title {
  flex: 1;
  min-width: 0;
}

.ss-action {
  flex-shrink: 0;
}

.ss-chevron {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border-radius: 6px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--text-muted);
  transition: background .15s, color .15s;
  margin-left: .5rem;
}
.ss-chevron:hover { background: rgba(0,0,0,.06); color: var(--text); }
[data-theme="dark"] .ss-chevron:hover { background: rgba(255,255,255,.08); }
.ss-chevron svg { transition: transform .2s; display: block; }
.ss-chev-collapsed svg { transform: rotate(-90deg); }

/* ── DANGER ZONE ─────────────────────────────────────────────────────────── */
.settings-danger-section {
  border-color:#FCA5A5; background:#FFF5F5;
}
.settings-danger-section h3 { color:#DC2626; }
[data-theme="dark"] .settings-danger-section { background:#2B1616; border-color:#7F1D1D; }
[data-theme="dark"] .settings-danger-section h3 { color:#F87171; }

.doc-upload-btn {
  display: inline-flex; align-items: center; gap: .3rem;
  white-space: nowrap; flex-shrink: 0; cursor: pointer; font-size: .8rem;
}

/* ── MODALS ──────────────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(6,28,34,.5);
  display: flex; align-items: center; justify-content: center; z-index: 999; padding: 1rem;
}
.modal {
  background: var(--white); border-radius: 14px; width: 100%; max-width: 640px;
  max-height: 90vh; overflow-y: auto;
  box-shadow: 0 12px 48px rgba(6,28,34,.22), 0 2px 8px rgba(6,28,34,.08);
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: var(--white); z-index: 1;
}
.modal-header h3 { font-size: 1.15rem; font-weight: 600; color: #061C22; font-family: 'Roobert', 'Inter', sans-serif; }
.modal-close { background: none; border: none; font-size: 1.2rem; color: var(--text-muted); line-height: 1; padding: .25rem; }
.modal-close:hover { color: var(--text); }
.modal form { padding: 1.25rem; display: flex; flex-direction: column; gap: .75rem; }
.modal-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: .75rem; border-top: 1px solid var(--border); margin-top: .25rem;
}
.modal-footer > div { display: flex; gap: 8px; }

/* ── MODAL FORM SECTIONS ─────────────────────────────────────────────────── */

/* Section divider with label */
.mf-section {
  display: flex; flex-direction: column; gap: .6rem;
  padding-top: .8rem;
  border-top: 1px solid var(--border);
}
.mf-label {
  display: flex; align-items: center; gap: .35rem;
  font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-muted);
}
.mf-label svg { opacity: .5; flex-shrink: 0; }

/* Hero title row: large title input + compact status */
.mf-title-row {
  display: flex; align-items: flex-end; gap: .65rem;
}
.mf-title-row > .form-group:first-child { flex: 1; min-width: 0; }
.mf-title-row > .form-group.status-group { flex: 0 0 130px; }
.mf-title-input {
  font-size: 1rem; font-weight: 500; color: var(--text);
  padding: .65rem .85rem;
}
.mf-title-input::placeholder { font-weight: 400; }

/* F1 Attribution block */
.mf-f1-block {
  background: rgba(0,49,202,.04);
  border: 1.5px solid rgba(0,49,202,.14);
  border-radius: 10px;
  padding: .85rem .9rem .75rem;
  display: flex; flex-direction: column; gap: .65rem;
}
[data-theme="dark"] .mf-f1-block {
  background: rgba(77,128,255,.07);
  border-color: rgba(77,128,255,.2);
}
.mf-f1-header {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  margin-bottom: -.1rem;
}
.mf-f1-title {
  display: flex; align-items: center; gap: .35rem;
  font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--cobalt);
}
[data-theme="dark"] .mf-f1-title { color: #7CB3FF; }
.mf-f1-title svg { opacity: .85; }
.mf-f1-warn {
  display: flex; align-items: center; gap: .28rem;
  font-size: .68rem; font-weight: 600; color: #DC2626;
  white-space: nowrap;
}
[data-theme="dark"] .mf-f1-warn { color: #F87171; }
.mf-f1-block .f1-funnel-row { margin-top: 0; }

/* Performance block */
.mf-perf-block {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .85rem .9rem .75rem;
  display: flex; flex-direction: column; gap: .6rem;
}
.mf-perf-label {
  display: flex; align-items: center; gap: .35rem;
  font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-muted);
  margin-bottom: -.05rem;
}
.mf-perf-label svg { opacity: .5; flex-shrink: 0; }
.mf-perf-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: .6rem;
}
.mf-perf-grid.cols3 { grid-template-columns: 1fr 1fr 1fr; }

/* ── FORM ELEMENTS ───────────────────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.form-group.grow { flex: 3; }
.form-group label { font-size: .8rem; font-weight: 500; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.form-group input, .form-group select, .form-group textarea {
  padding: .58rem .8rem; border: 1.5px solid var(--border); border-radius: 7px;
  background: var(--surface); color: var(--text); width: 100%; transition: border-color .15s, box-shadow .15s;
  font-size: .875rem; line-height: 1.4;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none; border-color: var(--cobalt); box-shadow: 0 0 0 3px rgba(116,255,224,.28);
}
.form-group input:disabled, .form-group select:disabled, .form-group textarea:disabled {
  background: var(--bg); color: var(--text-muted); cursor: not-allowed;
}
.form-group textarea { resize: vertical; }
.form-row { display: flex; gap: .75rem; align-items: flex-start; }

/* ── TOAST ───────────────────────────────────────────────────────────────── */
.toast {
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9999;
  padding: .75rem 1.35rem; border-radius: 10px;
  font-weight: 500; font-size: .875rem; box-shadow: var(--shadow-md);
  transform: translateY(16px); opacity: 0; transition: all .22s cubic-bezier(.4,0,.2,1);
}
.toast.show { transform: translateY(0); opacity: 1; }
.toast-success { background: #D1FAE5; color: #065F46; border: 1px solid #A7F3D0; }
.toast-error   { background: #FEE2E2; color: #991B1B; border: 1px solid #FECACA; }
.toast-info    { background: #DBEAFE; color: #1D4ED8; border: 1px solid #BFDBFE; }

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .kanban-board { grid-template-columns: repeat(2, 1fr); }
  .dash-cols { grid-template-columns: 1fr; }
}

/* ── TABLET (≤1024px) ─────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  :root { --sidebar-w: 200px; }
  #content { padding-left: 1.5rem; padding-right: 1.5rem; }
}

/* ── MOBILE SIDEBAR OVERLAY ──────────────────────────────────────────────── */
#sidebar-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 99;
  background: rgba(6,28,34,.55);
  backdrop-filter: blur(2px);
}
#sidebar-overlay.mob-active { display: block; }

/* Hamburger — hidden on desktop */
.tb-hamburger { display: none !important; }

/* ── MOBILE (≤768px) ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Sidebar: off-canvas, slides in */
  #sidebar {
    transform: translateX(-100%);
    transition: transform .25s cubic-bezier(.22,.68,0,1.12);
    z-index: 200; top: 0; /* cover full height including topbar */
    box-shadow: none;
  }
  #sidebar.mob-open {
    transform: translateX(0);
    box-shadow: 4px 0 32px rgba(0,0,0,.35);
  }

  /* Hamburger visible on mobile */
  .tb-hamburger { display: flex !important; }

  /* Content fills full width */
  #content {
    margin-left: 0;
    padding: calc(var(--topbar-h) + 1rem) 1rem 5rem; /* 5rem bottom = above mobile nav */
    max-width: 100vw;
  }

  /* Hide clock strip entirely — no room on phones */
  .tb-clock-strip { display: none; }

  /* Shrink search to icon-only */
  .tb-search span { display: none; }
  .tb-search kbd  { display: none; }
  .tb-search { padding: .35rem .42rem; min-width: 0; }

  /* Hide less-critical top bar buttons on small screens */
  #tb-shortcuts-btn { display: none; }

  /* Kanban and grids go single-column */
  .kanban-board { grid-template-columns: 1fr; }

  /* Forms stack vertically */
  .form-row { flex-direction: column; }

  /* Modal fills screen, scrollable */
  .modal-inner {
    width: 100vw; max-width: 100vw;
    margin: 0; border-radius: 16px 16px 0 0;
    max-height: 92dvh; overflow-y: auto;
    position: fixed; bottom: 0; left: 0; right: 0;
  }
  .modal-overlay { align-items: flex-end; }

  /* View header — stack on mobile */
  .view-header { flex-direction: column; align-items: flex-start; gap: .5rem; }
  .view-header h2 { font-size: 1.25rem; }

  /* Dashboard stat cards: 2-col on mobile */
  .dash-stats-strip { grid-template-columns: repeat(2, 1fr); gap: .5rem; }
  .dsc-number { font-size: 1.6rem; }

  /* Dashboard area grid: single column */
  .dash-area-grid { grid-template-columns: 1fr; gap: .75rem; }
  .dash-camp-section,
  .dash-compliance-strip { grid-column: 1; }

  /* Area cards: tighter on mobile */
  .area-section { padding: .85rem .9rem; }

  /* Tables: allow horizontal scroll */
  .table-wrap, .bch-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .data-table { min-width: 580px; }

  /* Filter bar: wrap and scroll */
  .filter-bar { flex-wrap: wrap; gap: .4rem; overflow-x: auto; }

  /* Budget category header: stack on mobile */
  .budget-cat-header { flex-direction: column; align-items: flex-start; gap: .6rem; padding: .85rem 1rem; }
  .bch-right { flex-wrap: wrap; gap: .6rem; }
  .bch-progress-wrap { order: -1; width: 100%; }
  .bch-bar { width: 100%; max-width: 200px; }

  /* Calendar: smaller cells */
  .cal-cell { min-height: 60px; padding: .25rem .2rem; }
  .cal-evt   { font-size: .6rem; }
  .cal-day-header { font-size: .6rem; padding: .3rem .1rem; }

  /* Month tabs: scroll horizontally */
  .month-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .25rem; }
  .month-tab  { flex-shrink: 0; }

  /* Kanban cards */
  .task-card { padding: .7rem .8rem; }

  /* Settings sections */
  .settings-section { padding: .9rem; }
  .ss-title h3 { font-size: .95rem; }
}

/* ── SMALL MOBILE (≤480px) ───────────────────────────────────────────────── */
@media (max-width: 480px) {
  .tb-brand-label { display: none; }
  .tb-brand { padding: 0 .6rem 0 .75rem; gap: .2rem; }
  #tb-meeting-btn { display: none; }

  /* Stat cards: still 2-col but smaller numbers */
  .dash-stats-strip { gap: .35rem; }
  .dsc-number { font-size: 1.4rem; }
  .dsc-label  { font-size: .72rem; }
  .dash-stat-card { padding: .8rem .9rem; }

  /* Area section headers compress */
  .area-section-header { flex-wrap: wrap; gap: .3rem; }
}

/* ── MOBILE BOTTOM NAV ───────────────────────────────────────────────────── */
#mob-bottom-nav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 150;
  background: var(--navy);
  border-top: 1px solid rgba(255,255,255,.1);
  padding: 0 env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
  height: 56px;
  grid-template-columns: repeat(5, 1fr);
  align-items: stretch;
}
@media (max-width: 768px) { #mob-bottom-nav { display: grid; } }

.mob-nav-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; border: none; background: none; cursor: pointer;
  color: rgba(255,255,255,.45); font-size: .58rem; font-weight: 500;
  font-family: inherit; padding: .3rem .2rem;
  transition: color .15s;
  text-transform: uppercase; letter-spacing: .04em;
}
.mob-nav-item svg { width: 20px; height: 20px; flex-shrink: 0; }
.mob-nav-item.active { color: var(--cyan); }
.mob-nav-item:hover  { color: rgba(255,255,255,.8); }

/* Prevent body scroll when sidebar is open */
body.mob-sidebar-open { overflow: hidden; }

/* ── MOBILE-SPECIFIC COMPONENT OVERRIDES ─────────────────────────────────── */
@media (max-width: 768px) {
  /* Hero banner: stack layout, hide decorative orbs */
  .dash-hero { flex-direction: column; align-items: flex-start; gap: .6rem; padding: 1rem 1.1rem; }
  .dash-hero-right { align-self: flex-start; }
  .dash-hero-greet { font-size: 1.1rem; }
  .dash-hero-orb-1, .dash-hero-orb-3 { display: none; }
  .dash-hero-icon { width: 32px; height: 32px; }

  /* Stat card icons: hide on very small to save space */
  .dsc-icon { display: none; }

  /* Area section: tighter header */
  .area-section-header { padding-bottom: .5rem; margin-bottom: .5rem; }
  .area-section-title { font-size: .8rem; }

  /* Camp row: truncate long names */
  .dash-camp-name { max-width: 60vw; }
  .dash-del-count, .dash-camp-due { font-size: .65rem; }

  /* F1 tag pair: stack on mobile */
  .f1-tag-pair { flex-direction: column; gap: .5rem; }

  /* Budget header: tighter */
  .bch-title { font-size: .82rem; }
  .bch-stat-val { font-size: .82rem; }

  /* Goals hero bar: 2 col */
  .goals-hero-bar { grid-template-columns: repeat(2, 1fr) !important; }

  /* Chart cards: full width */
  .chart-card { min-width: 0; }

  /* View header actions: wrap */
  .view-header-actions { flex-wrap: wrap; gap: .35rem; }
  .view-header-actions .btn { font-size: .75rem; padding: .3rem .65rem; }

  /* Filters: scroll horizontally with fade hint */
  .filter-bar { padding-bottom: .35rem; }

  /* Summary stat cards on mobile */
  .summary-stat-card { padding: .7rem .85rem; }
  .summary-stat-card .sv { font-size: 1.35rem; }

  /* Modal: bottom sheet on mobile */
  .modal-header { padding: 1rem 1.1rem .6rem; }
  .modal-inner form { padding: 0 1.1rem 1rem; }
  .mf-title-row { flex-direction: column; gap: .5rem; }
  .mf-section { padding: .75rem 0 0; }
}

/* ── MONTH TABS ──────────────────────────────────────────────────────────── */
.month-tabs {
  display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 1rem;
}
.month-tab {
  padding: .4rem .9rem; border-radius: 99px; font-size: .82rem; font-weight: 500;
  border: 1px solid var(--border); background: var(--white); color: var(--text-muted);
  cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.month-tab:hover { background: var(--bg); border-color: var(--cobalt); color: var(--cobalt); }
.month-tab.active { background: var(--cobalt); color: var(--white); border-color: var(--cobalt); }

/* ── PILLAR BADGES ───────────────────────────────────────────────────────── */
.pillar-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .68rem; font-weight: 600; padding: .18rem .52rem;
  border-radius: 4px; text-transform: uppercase; letter-spacing: .04em;
  white-space: nowrap;
}
.pillar-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

.pillar-campaign  { background: #DBEAFE; color: #1D4ED8; }
.pillar-campaign .pillar-dot  { background: #1D4ED8; }

.pillar-brand     { background: #EDE9FE; color: #5B21B6; }
.pillar-brand .pillar-dot     { background: #5B21B6; }

.pillar-authority { background: #D1FAE5; color: #065F46; }
.pillar-authority .pillar-dot { background: #059669; }

.pillar-partners  { background: #E0F2FE; color: #0369A1; }
.pillar-partners .pillar-dot  { background: #0284C7; }

.pillar-employer  { background: #FCE7F3; color: #9D174D; }
.pillar-employer .pillar-dot  { background: #DB2777; }

.pillar-misc      { background: #F1F5F9; color: var(--c-todo); }
.pillar-misc .pillar-dot      { background: var(--c-todo); }

/* Blog / editorial pillar colour classes */
.pillar-casestudy    { background: #FEF3C7; color: #92400E; }
.pillar-casestudy .pillar-dot { background: #D97706; }

.pillar-compliance   { background: #E0E9FF; color: #0031CA; }
.pillar-compliance .pillar-dot { background: #0031CA; }

.pillar-marketplace  { background: #F0FDF4; color: #166534; }
.pillar-marketplace .pillar-dot { background: #16A34A; }

.pillar-product      { background: #E3FFF9; color: #065F46; }
.pillar-product .pillar-dot { background: #059669; }

.pillar-industry     { background: #FDF4FF; color: #6B21A8; }
.pillar-industry .pillar-dot { background: #9333EA; }

.pillar-customerstory { background: #FFF1F2; color: #9F1239; }
.pillar-customerstory .pillar-dot { background: #E11D48; }

.pillar-event        { background: #FFF7ED; color: #9A3412; }
.pillar-event .pillar-dot { background: #EA580C; }

/* ── REGION / COUNTRY TAGS ───────────────────────────────────────────────── */
.region-tag, .country-tag {
  font-size: .68rem; font-weight: 600; padding: .18rem .52rem;
  border-radius: 4px; background: #F1F5F9; color: #4B5563;
  text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
  display: inline-block;
}
/* Per-region colours — applied via data-region attribute */
.region-tag[data-region="sa"]       { background: #D1FAE5; color: #065F46; }
.region-tag[data-region="uk"]       { background: #DBEAFE; color: #1D4ED8; }
.region-tag[data-region="americas"] { background: #EDE9FE; color: #5B21B6; }
.region-tag[data-region="apac"]     { background: #FEF3C7; color: #92400E; }
.region-tag[data-region="global"]   { background: #E0E9FF; color: #0031CA; }
.region-tag[data-region="canada"]   { background: #FFF1F2; color: #9F1239; }

/* ── FUNNEL TAGS ─────────────────────────────────────────────────────────── */
.funnel-tag {
  font-size: .68rem; font-weight: 600; padding: .18rem .52rem;
  border-radius: 4px; text-transform: uppercase; letter-spacing: .04em;
  white-space: nowrap; display: inline-block;
}
.funnel-tofu  { background: #E0F2FE; color: #0369A1; }
.funnel-mofu  { background: #DBEAFE; color: #1D4ED8; }
.funnel-bofu  { background: #D1FAE5; color: #065F46; }
.funnel-other { background: #F1F5F9; color: var(--c-todo); }

/* ── SOCIAL STATUS BADGES ────────────────────────────────────────────────── */
.s-published   { background: #D1FAE5; color: #065F46; }
.s-scheduled   { background: #DBEAFE; color: #1D4ED8; }
.s-draft       { background: #EDE9FE; color: #5B21B6; }
.s-not-started { background: #F1F5F9; color: var(--c-todo); }
.s-approved    { background: #E0F2FE; color: #0369A1; }

/* ── BLOG STATUS BADGES ──────────────────────────────────────────────────── */
.s-published-blog  { background: #D1FAE5; color: #065F46; }
.s-in-progress     { background: #EDE9FE; color: #5B21B6; }
.s-in-review       { background: #E0F2FE; color: #0369A1; }
.s-backlog         { background: #F1F5F9; color: var(--c-todo); }

/* ── PAID STATUS BADGES ──────────────────────────────────────────────────── */
.s-live      { background: #D1FAE5; color: #065F46; }
.s-upcoming  { background: #E0E9FF; color: #0031CA; }
.s-paused    { background: #FEF3C7; color: #92400E; }
.s-completed { background: #D1FAE5; color: #065F46; }
.s-cancelled { background: #FEE2E2; color: #991B1B; }

/* ── CALLOUT BANNER (prominent in-page callout) ─────────────────────────── */
.callout-banner {
  display: flex; gap: .9rem; align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
  transition: box-shadow .18s;
}
.callout-banner:hover { box-shadow: 0 4px 16px rgba(0,49,202,.07); }
.callout-banner.callout-warn {
  border-color: rgba(245,158,11,.3);
}
.callout-banner.callout-danger {
  border-color: rgba(239,68,68,.3);
}
.callout-banner-icon {
  flex-shrink: 0; margin-top: .1rem;
  color: var(--cobalt);
}
.callout-banner.callout-warn  .callout-banner-icon { color: #D97706; }
.callout-banner.callout-danger .callout-banner-icon { color: #EF4444; }
.callout-banner-body { flex: 1; min-width: 0; }
.callout-banner-title {
  font-size: .67rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--cobalt); margin-bottom: .3rem;
}
.callout-banner.callout-warn  .callout-banner-title { color: #B45309; }
.callout-banner.callout-danger .callout-banner-title { color: #DC2626; }
.callout-banner-text {
  font-size: .84rem; line-height: 1.65; color: var(--text);
}
.callout-banner-actions { margin-top: .6rem; display: flex; gap: .5rem; }

[data-theme="dark"] .callout-banner            { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .callout-banner.callout-warn { border-color: rgba(245,158,11,.25); }
[data-theme="dark"] .callout-banner.callout-warn .callout-banner-title  { color: #FCD34D; }
[data-theme="dark"] .callout-banner.callout-warn .callout-banner-icon   { color: #FCD34D; }
[data-theme="dark"] .callout-banner-title       { color: var(--cyan); }
[data-theme="dark"] .callout-banner-icon        { color: var(--cyan); }

/* ── ALERT BANNER ────────────────────────────────────────────────────────── */
.alert-banner {
  display: flex; align-items: center; gap: 10px;
  padding: .75rem 1rem; border-radius: var(--radius); margin-bottom: 1rem;
  font-size: .88rem; font-weight: 500;
}
.alert-banner.warn {
  background: #E0F2FE; color: #0369A1; border: 1px solid #0EA5E9;
}
.alert-banner .btn-ghost { border-color: currentColor; color: inherit; }
.alert-banner.danger {
  background: #FEE2E2; color: #991B1B; border: 1px solid #FECACA;
}
.alert-banner.info {
  background: #E3FFF9; color: #065F46; border: 1px solid #74FFE0;
}

/* ── TABLE UTILITIES ─────────────────────────────────────────────────────── */
.table-link {
  color: var(--cobalt); text-decoration: none; font-weight: 500;
}
.table-link:hover { text-decoration: underline; }

/* Shared cell type classes — use these in all module tables */

/* Primary content cell: title, topic, caption */
.td-primary { font-size: .875rem; font-weight: 500; color: var(--text); max-width: 260px; }
.td-primary .td-sub { display: block; font-size: .75rem; font-weight: 400; color: var(--text-muted); margin-top: .1rem; }

/* Date cell — always nowrap */
.td-date { white-space: nowrap; font-size: .875rem; color: var(--text); }
.td-date .text-muted { font-size: .875rem; }

/* Secondary text cell: owner, location, placement description */
.td-secondary { font-size: .82rem; color: var(--text-muted); max-width: 160px; }

/* Vertical text — plain muted, truncates if needed */
.td-vertical { font-size: .78rem; color: var(--text-muted); max-width: 220px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Truncating topic/caption cell */
.topic-cell {
  max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: .875rem;
}

/* Edit action column — fixed narrow width */
.td-action { width: 2.5rem; text-align: center; }

/* Link-present / link-absent cell */
.td-link-cell { font-size: .82rem; }

.note-sm {
  font-size: .75rem; color: var(--text-muted); font-style: italic; margin-top: .2rem;
}

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

.url-ok      { color: var(--c-done); font-size: .8rem; font-weight: 500; }
.url-missing { color: var(--c-blocked); font-size: .8rem; font-weight: 500; }

.row-warn td { background: #F0F9FF !important; }
.row-warn:hover td { background: #E0F2FE !important; }
[data-theme="dark"] .row-warn td { background: #0C2640 !important; }
[data-theme="dark"] .row-warn:hover td { background: #0D2F50 !important; }
[data-theme="dark"] .act-log-row:hover { background: var(--navy); }
[data-theme="dark"] .act-diff-pill { background: var(--navy); border-color: var(--border); }

/* ── FILTER COUNT ────────────────────────────────────────────────────────── */
.filter-count {
  font-size: .78rem; color: var(--text-muted); align-self: center; white-space: nowrap;
}

/* ── DASHBOARD — social + editorial panels ───────────────────────────────── */
.dash-social-row, .dash-blog-row {
  display: flex; align-items: flex-start; gap: 8px;
  padding: .45rem .4rem; border-radius: 6px; cursor: pointer; transition: background .15s;
}
.dash-social-row:hover, .dash-blog-row:hover { background: var(--bg); }
.dash-row-date { font-size: .75rem; font-weight: 500; color: var(--cobalt); min-width: 52px; }
.dash-row-title { font-size: .85rem; flex: 1; }
.dash-row-tag { flex-shrink: 0; }

/* ── DASHBOARD — headline stats strip ───────────────────────────────────── */
.dash-stats-strip {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: .75rem; margin-bottom: 1rem;
}
.dash-stat-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 1.1rem 1.25rem;
  display: flex; flex-direction: column; gap: .15rem;
  position: relative; overflow: hidden;
  transition: box-shadow .18s, border-color .18s, transform .18s;
}
.dash-stat-card:hover { box-shadow: 0 4px 16px rgba(0,49,202,.08); transform: translateY(-1px); border-color: var(--divider); }
.dash-stat-card.dsc-alert { border-color: #FCA5A5; background: #FFF8F8; }
.dsc-number { font-size: 2rem; font-weight: 700; color: var(--text); line-height: 1.05; margin-top: .25rem; }
.dsc-label  { font-size: .78rem; font-weight: 500; color: var(--text); margin-top: .1rem; }
.dsc-sub    { font-size: .7rem; color: var(--text-muted); line-height: 1.4; margin-top: .1rem; }
.dsc-flag   { color: #DC2626; font-weight: 600; }

/* ── DASHBOARD — area grid ───────────────────────────────────────────────── */
.dash-area-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@media (max-width: 900px) { .dash-area-grid { grid-template-columns: 1fr; } }

/* ── Campaigns full-width row ────────────────────────────────────────────── */
.dash-camp-section { grid-column: 1 / -1; }
.dash-camp-list    { display: flex; flex-direction: column; gap: .3rem; margin-top: .5rem; }
.dash-camp-row {
  padding: .6rem .75rem; border-radius: 8px; cursor: pointer;
  border: none; background: transparent;
  transition: background .15s;
}
.dash-camp-row:hover { background: var(--bg); }
.dash-camp-row-top  { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.dash-camp-name     { font-size: .875rem; font-weight: 500; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-del-count     { font-size: .7rem; color: var(--text-muted); white-space: nowrap; }

/* ── Next-up item highlight ──────────────────────────────────────────────── */
.area-item.next-up {
  background: #EFF6FF; border-left: 3px solid var(--cobalt);
  margin-left: -3px; padding-left: calc(.4rem + 3px);
  border-radius: 0 6px 6px 0;
}
.next-up-label {
  display: inline-flex; align-items: center;
  font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  background: var(--cobalt); color: #fff;
  padding: .1rem .38rem; border-radius: 3px;
  margin-right: .35rem; flex-shrink: 0; vertical-align: middle;
}

/* ── Compliance footer strip ─────────────────────────────────────────────── */
.dash-compliance-strip  { grid-column: 1 / -1; }
.dash-compliance-inner  {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.dash-comp-tags { display: flex; gap: .4rem; flex-wrap: wrap; }

@media (max-width: 900px) {
  .dash-stats-strip  { grid-template-columns: repeat(2, 1fr); }
  .dash-camp-section { grid-column: 1; }
  .dash-compliance-strip { grid-column: 1; }
}

.area-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.1rem 1.2rem;
  transition: box-shadow .18s;
}
.area-section:hover { box-shadow: 0 2px 12px rgba(0,0,0,.06); }
.area-section-header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem;
}
.area-section-header h3 { margin: 0; font-size: .95rem; font-weight: 600; }
.area-status-row { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .6rem; }
.area-stat {
  font-size: .72rem; font-weight: 500; padding: .2rem .5rem;
  border-radius: 99px; background: var(--bg);
}
.area-stat.active  { background: #DBEAFE; color: #1D4ED8; }
.area-stat.todo    { background: #F3F4F6; color: #374151; }
.area-stat.blocked { background: #FEE2E2; color: #DC2626; }
.area-stat.danger  { background: #FEE2E2; color: #DC2626; }
.area-stat.done    { background: #D1FAE5; color: #065F46; }

/* Area section period/subtitle */
.area-period {
  display: block; font-size: .7rem; color: var(--text-muted); margin-top: .05rem; font-weight: 400;
}

/* Area body: donut left + items right */
.area-body {
  display: flex; gap: .75rem; align-items: flex-start; margin-top: .4rem;
}
.area-donut-col {
  display: flex; flex-direction: column; align-items: center; gap: .4rem; flex-shrink: 0;
}
.area-donut-legend {
  display: flex; flex-direction: column; gap: .18rem;
}
.adl-item {
  display: flex; align-items: center; gap: .3rem; font-size: .68rem; color: var(--text-muted); white-space: nowrap;
}
.adl-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.area-items-col { flex: 1; min-width: 0; }

/* Date label in area items */
.area-item-date {
  font-size: .7rem; color: var(--text-muted); font-weight: 400;
}
.area-item-date-primary {
  font-size: .74rem; font-weight: 700; color: var(--cobalt); letter-spacing: .01em; line-height: 1.2; white-space: nowrap;
}
.area-item-name {
  font-size: .8rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3;
}
.custom-text-wrap {
  padding: .2rem .1rem .25rem;
}
.custom-tag-input {
  width: 100%; box-sizing: border-box;
  font-size: .8rem; padding: .28rem .45rem;
  border: 1px solid #D1D5DB; border-radius: 5px;
  outline: none; color: var(--text);
  transition: border-color .15s;
}
.custom-tag-input:focus { border-color: var(--cobalt); box-shadow: 0 0 0 3px rgba(116,255,224,.25); }
.custom-tag-input:disabled { background: #F9FAFB; color: var(--text-muted); }

.area-items { display: flex; flex-direction: column; gap: .3rem; }
.area-item {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; padding: .42rem .5rem; border-radius: 6px; cursor: pointer;
  transition: background .15s; min-width: 0;
}
.area-item:hover { background: var(--bg); }
.area-item-title { font-size: .83rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── F1 COMPLIANCE WIDGET ───────────────────────────────────────────────── */
.f1-compliance-section { grid-column: span 1; }
.compliance-ring {
  width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 500; font-size: .9rem;
  border: 4px solid var(--border);
}
.compliance-ring.success { border-color: #10B981; color: #065F46; }
.compliance-ring.warn    { border-color: #0EA5E9; color: #0369A1; }
.compliance-ring.danger  { border-color: #EF4444; color: #DC2626; }
.compliance-pct { font-size: .85rem; font-weight: 500; }

/* ── SUB-NAV ─────────────────────────────────────────────────────────────── */
.sub-nav {
  display: flex; gap: 4px; margin-bottom: 1.5rem;
  background: var(--bg); border-radius: 10px; padding: 4px;
  border: 1px solid var(--border); width: fit-content;
}
.sub-nav-btn {
  padding: .42rem 1rem; border-radius: 7px; font-size: .82rem; font-weight: 500;
  border: none; background: transparent; color: var(--text-muted); cursor: pointer;
  transition: background .15s, color .15s;
}
.sub-nav-btn:hover  { background: var(--surface); color: var(--text); }
.sub-nav-btn.active { background: var(--surface); color: var(--cobalt); font-weight: 600; box-shadow: 0 1px 4px rgba(0,0,0,.1); }

/* ── F1 KPI GRID ──────────────────────────────────────────────────────────── */
.kpi-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
}
@media (max-width: 800px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } }
.kpi-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 1.1rem 1.2rem;
  position: relative; overflow: hidden;
  transition: box-shadow .2s, transform .2s;
}
.kpi-card:hover { box-shadow: 0 6px 24px rgba(0,49,202,.1); transform: translateY(-2px); }
.kpi-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--cobalt), var(--cyan));
  border-radius: 14px 14px 0 0;
}
.kpi-label  { font-size: .72rem; color: var(--text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .07em; margin-bottom: .45rem; }
.kpi-target { font-size: 1.9rem; font-weight: 700; color: var(--text); line-height: 1; letter-spacing: -.02em; }
.kpi-unit   { font-size: .85rem; font-weight: 500; color: var(--text-muted); }
.kpi-actual { font-size: .78rem; color: var(--text-muted); margin-top: .35rem; }
/* KPI table inline text colours — theme-aware classes */
.kpi-tbl-target { color: var(--cobalt); font-weight: 500; }
.kpi-tbl-owner  { color: var(--text-muted); }
[data-theme="dark"] .kpi-tbl-target { color: #74FFE0 !important; }
[data-theme="dark"] .kpi-tbl-owner  { color: rgba(255,255,255,.55) !important; }
/* Goals KPI table accent column — same treatment */
[data-theme="dark"] td[style*="--accent"],
[data-theme="dark"] td[style*="var(--accent)"] { color: #74FFE0 !important; }
[data-theme="dark"] strong[style*="--accent"],
[data-theme="dark"] strong[style*="var(--accent)"] { color: #74FFE0 !important; }
.kpi-note   { font-size: .72rem; color: var(--text-muted); margin-top: .25rem; }

/* ── GATE CARDS ──────────────────────────────────────────────────────────── */
.gates-list { display: flex; flex-direction: column; gap: .6rem; }
.gate-card {
  display: flex; align-items: center; gap: 1rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 1rem 1.25rem;
  transition: box-shadow .18s, transform .18s, border-color .18s;
}
.gate-card:hover {
  box-shadow: 0 6px 24px rgba(0,49,202,.08);
  transform: translateY(-2px);
  border-color: rgba(0,49,202,.25);
}
.gate-card.gate-done     { opacity: .75; }
.gate-card.gate-urgent   { border-color: rgba(0,49,202,.3); }
.gate-card.gate-overdue  { border-color: rgba(239,68,68,.35); }
.gate-card.gate-upcoming { }
.gate-num  {
  font-size: .85rem; font-weight: 700; color: var(--text-muted); min-width: 1.75rem;
  background: var(--bg); border-radius: 6px; padding: .3rem .45rem;
  text-align: center; line-height: 1; border: 1px solid var(--border);
}
.gate-body { flex: 1; min-width: 0; }
.gate-title{ font-weight: 600; font-size: .9rem; }
.gate-meta { display: flex; gap: 1rem; font-size: .75rem; color: var(--text-muted); margin-top: .25rem; flex-wrap: wrap; }

/* ── F1 EDITABLE STATES ──────────────────────────────────────────────────── */
/* Rows/cards that open an edit modal on click */
.f1-editable-row { cursor: pointer; }
.f1-editable-row:hover td { background: rgba(0,49,202,.04); }
[data-theme="dark"] .f1-editable-row:hover td { background: rgba(116,255,224,.04); }
.f1-editable-card { cursor: pointer; transition: box-shadow .15s, transform .1s; }
.f1-editable-card:hover { box-shadow: 0 4px 14px rgba(0,49,202,.12); transform: translateY(-1px); }

/* KPI status pill — clickable when in edit mode */
.kpi-pill-click { cursor: pointer; transition: opacity .15s; }
.kpi-pill-click:hover { opacity: .75; }

/* ── SPRINT PLAN BOARD ───────────────────────────────────────────────────── */
.sprint-plan-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
  align-items: start;
}
@media (max-width: 900px) { .sprint-plan-grid { grid-template-columns: 1fr; } }
.sprint-month-col {
  border-radius: 16px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: 0 2px 12px rgba(0,31,102,.06);
  transition: box-shadow .2s;
}
.sprint-month-col:hover { box-shadow: 0 6px 28px rgba(0,31,102,.11); }
.sprint-month-header { padding: .85rem 1.1rem; position: relative; overflow: hidden; }
.sprint-month-header::after {
  content: ''; position: absolute; top: -40%; right: -5%;
  width: 80px; height: 80px; border-radius: 50%;
  background: rgba(255,255,255,.07); pointer-events: none;
}
.sprint-month-header.spm-may { background: linear-gradient(135deg, #0031CA 0%, #0052cc 100%); }
.sprint-month-header.spm-jun { background: linear-gradient(135deg, #0284C7 0%, #0EA5E9 100%); }
.sprint-month-header.spm-jul { background: linear-gradient(135deg, #061C22 0%, #0E3040 100%); }
.sprint-month-name  { font-size: .78rem; font-weight: 700; color: rgba(255,255,255,.95); text-transform: uppercase; letter-spacing: .1em; }
.sprint-month-theme { font-size: .72rem; color: rgba(255,255,255,.65); margin-top: .15rem; }
.sprint-month-body  { display: flex; flex-direction: column; gap: 0; }
.sprint-item-card {
  padding: .9rem 1.1rem; border-bottom: 1px solid var(--border);
  transition: background .12s, padding-left .12s;
}
.sprint-item-card:last-child { border-bottom: none; }
.sprint-f1-card  { background: var(--surface); }
.sprint-f1-card:hover { background: var(--bg); padding-left: 1.35rem; }
.sprint-gate-card {
  background: var(--surface);
  border-left: 2px solid rgba(0,49,202,.25);
}
.sprint-gate-card:hover { background: rgba(116,255,224,.05); padding-left: 1.35rem; border-left-color: rgba(0,49,202,.5); }
.sprint-item-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: .35rem; gap: .5rem; }
.sprint-week-badge {
  font-size: .62rem; font-weight: 700; padding: .18rem .5rem;
  border-radius: 99px; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap;
}
.swb-f1   { background: rgba(0,49,202,.1); color: #0031CA; }
.swb-gate { background: linear-gradient(135deg, #0031CA, #0EA5E9); color: #fff; box-shadow: 0 2px 6px rgba(0,49,202,.25); }
.sprint-item-dates { font-size: .68rem; color: var(--text-muted); white-space: nowrap; }
.sprint-item-desc  { font-size: .8rem; color: var(--text); line-height: 1.55; }
.sprint-item-owner { font-size: .7rem; color: var(--text-muted); margin-top: .35rem; font-style: italic; }

/* Drag-and-drop on sprint items */
.sprint-editable { cursor: grab; }
.sprint-editable:active { cursor: grabbing; }
.sprint-month-body.sprint-drop-over { background: #EFF4FF; outline: 2px dashed #0031CA; outline-offset: -2px; border-radius: 0 0 10px 10px; }

/* Edit button on sprint cards */
.sprint-card-edit {
  background: none; border: none; cursor: pointer; padding: .1rem .3rem;
  font-size: .7rem; color: #9CA3AF; border-radius: 4px; line-height: 1; opacity: 0;
  transition: opacity .15s, color .1s;
}
.sprint-item-card:hover .sprint-card-edit { opacity: 1; }
.sprint-card-edit:hover { color: #0031CA; }

/* Theme edit button inside header */
.spm-edit-theme { color: rgba(255,255,255,.7) !important; border-color: rgba(255,255,255,.3) !important; }
.spm-edit-theme:hover { color: #fff !important; border-color: rgba(255,255,255,.7) !important; }

/* Add item button at bottom of month */
.sprint-add-btn {
  display: block; width: calc(100% - 2rem); margin: .5rem 1rem .75rem;
  padding: .5rem; border: 1.5px dashed #D1D5DB; border-radius: 8px;
  background: transparent; color: #9CA3AF; font-size: .78rem; cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.sprint-add-btn:hover { border-color: #0031CA; color: #0031CA; background: #EFF4FF; }

/* ── KPI STATUS PILLS ────────────────────────────────────────────────────── */
.kpi-status-pill {
  font-size: .63rem; font-weight: 700; padding: .22rem .6rem;
  border-radius: 99px; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap;
}
.ks-inprogress { background: linear-gradient(135deg, #0031CA, #0052cc); color: #fff; box-shadow: 0 2px 6px rgba(0,49,202,.3); }
.ks-building   { background: linear-gradient(135deg, #7C3AED, #9B59B6); color: #fff; box-shadow: 0 2px 6px rgba(124,58,237,.3); }
.ks-notstarted { background: var(--bg); color: var(--text-muted); border: 1px solid var(--border); }
.ks-complete   { background: linear-gradient(135deg, #059669, #34D399); color: #fff; box-shadow: 0 2px 6px rgba(5,150,105,.3); }

/* ── STEADY-STATE ROW ────────────────────────────────────────────────────── */
.steady-state-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 1.25rem;
}
@media (max-width: 800px) { .steady-state-row { grid-template-columns: repeat(2, 1fr); } }
.steady-state-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 1rem 1rem .9rem; text-align: center;
  transition: box-shadow .2s, transform .2s;
  position: relative; overflow: hidden;
}
.steady-state-card:hover { box-shadow: 0 6px 20px rgba(0,49,202,.1); transform: translateY(-2px); }
.steady-state-card::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--cobalt), var(--cyan));
}
.steady-state-val { font-size: 2.1rem; font-weight: 800; color: var(--cobalt); line-height: 1; letter-spacing: -.03em; }
.steady-state-lbl { font-size: .72rem; color: var(--text-muted); margin-top: .4rem; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; }

/* ── GATE GRID (new 2×2) ──────────────────────────────────────────────────── */
.gate-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
}
@media (max-width: 800px) { .gate-grid { grid-template-columns: 1fr; } }
.gate-grid-card {
  border-radius: 14px; padding: 1.3rem 1.4rem;
  background: var(--surface); border: 1px solid var(--border);
  position: relative; overflow: hidden;
  transition: box-shadow .2s, transform .18s, border-color .18s;
}
.gate-grid-card:hover {
  box-shadow: 0 8px 32px rgba(0,49,202,.09);
  transform: translateY(-3px);
  border-color: rgba(0,49,202,.2);
}
/* Top gradient accent bar per card */
.gate-grid-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #0031CA, #74FFE0);
  opacity: 0; transition: opacity .2s;
}
.gate-grid-card:hover::before { opacity: 1; }
.gg-done    { opacity: .72; }
.gg-done::before { background: linear-gradient(90deg, #059669, #34D399); opacity: 1; }
.gg-urgent::before  { background: linear-gradient(90deg, #DC2626, #F87171); opacity: 1; }
.gg-prepare::before { background: linear-gradient(90deg, #0031CA, #74FFE0); opacity: 1; }
.gate-grid-circle {
  width: 2.2rem; height: 2.2rem; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: .82rem; font-weight: 800; margin-bottom: .6rem;
}
.ggc-done    { background: linear-gradient(135deg, #0031CA, #74FFE0); color: #fff; }
.ggc-urgent  { background: rgba(220,38,38,.12); color: #DC2626; border: 1.5px solid rgba(220,38,38,.3); }
.ggc-prepare { background: linear-gradient(135deg, #0031CA, #026FFF); color: #fff; }
.gate-grid-badge {
  display: inline-block; font-size: .6rem; font-weight: 700; padding: .2rem .5rem;
  border-radius: 100px; text-transform: uppercase; letter-spacing: .07em; margin-bottom: .5rem;
}
.ggb-done    { background: rgba(0,49,202,.08); color: var(--cobalt); }
.ggb-urgent  { background: rgba(220,38,38,.1);  color: #DC2626; }
.ggb-prepare { background: rgba(0,49,202,.08);  color: var(--cobalt); }
.gate-grid-title { font-size: .95rem; font-weight: 700; color: var(--text); margin-bottom: .2rem; }
.gate-grid-sub   { font-size: .72rem; color: var(--text-muted); font-weight: 500; margin-bottom: .6rem; }
.gg-urgent .gate-grid-sub { color: #DC2626; }
.gate-grid-desc  { font-size: .8rem; color: var(--text); line-height: 1.6; margin-bottom: .65rem; }
.gate-grid-owner { font-size: .72rem; color: var(--text-muted); font-style: italic; }

/* ── GANTT CHART ─────────────────────────────────────────────────────────── */
.gantt-outer { border-radius: 12px; border: 1px solid var(--border); margin-top: .5rem; overflow: hidden; box-shadow: var(--shadow); transition: box-shadow .18s; }
.gantt-outer:hover { box-shadow: var(--shadow-md); }
.gantt-tbl { border-collapse: collapse; width: 100%; min-width: 960px; font-size: .75rem; }
.gantt-tbl thead tr:first-child th { height: 2rem; }
.gantt-act-hdr {
  text-align: left; padding: .5rem .75rem; white-space: nowrap;
  font-size: .67rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: #fff; min-width: 160px; position: sticky; left: 0; z-index: 2;
  background: #0A0F1E;
}
.gantt-tbl thead tr:first-child .gantt-act-hdr { background: #0A0F1E; }
.gantt-mo-hdr {
  text-align: center; padding: .45rem; font-size: .7rem; font-weight: 700;
  color: #fff; letter-spacing: .09em;
  border-left: 1px solid rgba(255,255,255,.12);
}
.gantt-mo-may  { background: linear-gradient(90deg, #0031CA, #0040E0); }
.gantt-mo-june { background: linear-gradient(90deg, #0284C7, #0EA5E9); }
.gantt-mo-july { background: linear-gradient(90deg, #061C22, #0E3040); }
.gantt-wk-hdr {
  text-align: center; padding: .3rem .2rem; font-size: .64rem; font-weight: 600;
  color: var(--text-muted); background: var(--surface); border: 1px solid var(--border); min-width: 78px;
}
.gantt-wk-dates { font-size: .57rem; font-weight: 400; color: var(--text-muted); margin-top: .05rem; }
.gantt-row { border-bottom: 1px solid var(--border); transition: background .15s; }
.gantt-row:last-child { border-bottom: none; }
.gantt-row:hover { background: rgba(0,49,202,.025); }
.gantt-row:hover .gantt-row-lbl { background: rgba(0,49,202,.04); }
.gantt-row-lbl {
  padding: .5rem .75rem; font-size: .78rem; font-weight: 500; white-space: nowrap;
  color: var(--text); background: var(--surface); border-right: 1px solid var(--border);
  position: sticky; left: 0; z-index: 1; transition: background .1s;
}
.gantt-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: .4rem; vertical-align: middle; box-shadow: 0 0 0 2px rgba(255,255,255,.6); }
.gantt-cell-empty { padding: .35rem .2rem; background: var(--bg); border: 1px solid var(--border); }
.gantt-cell-filled { padding: .25rem .2rem; border: 1px solid var(--border); }
.gantt-pill {
  border-radius: 99px; padding: .22rem .55rem; font-size: .63rem; font-weight: 600;
  text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: block; letter-spacing: .02em;
}
/* Gantt edit interactions */
.gantt-lbl-edit { cursor: pointer; transition: background .15s; }
.gantt-lbl-edit:hover { background: rgba(0,49,202,.06); }
.gantt-cell-add {
  text-align: center; color: var(--border); font-size: .9rem; cursor: pointer;
  transition: background .15s, color .15s;
}
.gantt-cell-add:hover { background: rgba(0,49,202,.06); color: var(--cobalt); }
.gantt-cell-click .gantt-pill { cursor: pointer; transition: opacity .12s, transform .1s; }
.gantt-cell-click .gantt-pill:hover { opacity: .82; transform: scale(1.04); }

/* Gantt colour picker in modal */
.gantt-color-grid { display: flex; gap: .5rem; flex-wrap: wrap; }
.gcg-opt { cursor: pointer; }
.gcg-opt input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.gcg-swatch {
  display: flex; align-items: center; justify-content: center;
  padding: .28rem .65rem; border-radius: 5px; font-size: .68rem;
  font-weight: 500; color: #fff; cursor: pointer; border: 2px solid transparent;
  transition: border-color .12s, transform .1s;
}
.gcg-opt input:checked + .gcg-swatch { border-color: #374151; transform: scale(1.06); box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.gcg-swatch:hover { transform: scale(1.04); }

.gantt-legend { display: flex; gap: 1.25rem; flex-wrap: wrap; margin-top: .75rem; padding: .1rem 0; }
.gl-item { display: flex; align-items: center; gap: .35rem; font-size: .73rem; color: #6B7280; }
.gl-dot  { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* ── F1 PROGRESS PANEL (dashboard) ──────────────────────────────────────── */
.f1-progress-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.1rem 1.4rem 1.2rem;
  margin-bottom: 1.25rem;
  box-shadow: 0 2px 16px rgba(0,49,202,.07), 0 1px 4px rgba(0,0,0,.04);
  position: relative; overflow: hidden;
}
.f1-progress-panel::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--cobalt) 0%, var(--cyan) 100%);
}
.f1-progress-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1rem;
}
.f1-progress-title {
  display: flex; align-items: center; gap: .5rem;
  font-size: .88rem; color: var(--text); font-weight: 600;
}
.f1-prog-pct {
  font-size: 1.6rem; font-weight: 800; line-height: 1; letter-spacing: -.03em;
  background: linear-gradient(135deg, var(--cobalt), var(--cyan));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.f1-progress-body {
  display: flex; align-items: flex-end; gap: 1.5rem;
}
.f1-prog-bars {
  flex: 1; display: flex; flex-direction: column; gap: .65rem;
}
.f1-prog-bar-row {
  display: flex; align-items: center; gap: .65rem;
}
.f1-prog-bar-label {
  width: 7.5rem; flex-shrink: 0;
  font-size: .75rem; color: var(--text-muted); white-space: nowrap; font-weight: 500;
}
.f1-prog-count {
  font-size: .7rem; color: var(--text-muted); margin-left: .15rem;
}
.f1-prog-track {
  flex: 1; height: 8px; background: var(--bg);
  border-radius: 99px; overflow: hidden;
  border: 1px solid var(--border);
}
.f1-prog-fill {
  height: 100%; border-radius: 99px;
  transition: width .8s cubic-bezier(.4,0,.2,1);
  min-width: 4px;
  background: linear-gradient(90deg, #0031CA, #74FFE0);
}
.f1-prog-val {
  width: 2.75rem; text-align: right; flex-shrink: 0;
  font-size: .75rem; font-weight: 700; color: var(--text);
}
.f1-gate-dots {
  display: flex; gap: .6rem; flex-shrink: 0;
}
.f1-gate-dot-item {
  display: flex; flex-direction: column; align-items: center;
  gap: .25rem; cursor: pointer;
  transition: transform .15s;
}
.f1-gate-dot-item:hover { transform: translateY(-2px); }
.f1-gate-dot {
  width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 2px solid;
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem; font-weight: 800;
  transition: box-shadow .15s, transform .15s;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.f1-gate-dot-item:hover .f1-gate-dot {
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
}
.f1-gate-dot-label {
  font-size: .63rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.f1-gate-dot-sub {
  font-size: .6rem; color: var(--text-muted); white-space: nowrap;
}

@media (max-width: 700px) {
  .f1-progress-body  { flex-direction: column; gap: .9rem; align-items: stretch; }
  .f1-gate-dots      { justify-content: space-between; }
  .f1-prog-bar-label { width: 5.5rem; }
}

/* ── CAMPAIGN TYPE BADGE ─────────────────────────────────────────────────── */
.camp-type-badge {
  font-size: .65rem; font-weight: 500; padding: .15rem .45rem;
  border-radius: 4px; text-transform: uppercase; letter-spacing: .05em;
}
.camp-type-badge.f1  { background: var(--cobalt); color: #fff; }
.camp-type-badge.bau { background: #6B7280; color: #fff; }

/* ── VIEW TOGGLE ─────────────────────────────────────────────────────────── */
.view-toggle {
  display: flex; background: var(--bg); border-radius: 9px;
  border: 1px solid var(--border); padding: 3px; gap: 2px;
}
.view-toggle button {
  background: none; border: none; padding: .3rem .75rem;
  font-size: .8rem; font-weight: 500; color: var(--text-muted); cursor: pointer;
  border-radius: 6px; transition: background .15s, color .15s;
}
.view-toggle button:hover { background: rgba(0,0,0,.05); color: var(--text); }
.view-toggle button.active {
  background: var(--cobalt); color: #fff;
  box-shadow: 0 1px 4px rgba(0,49,202,.3);
}

/* ── CAMPAIGN DETAIL ─────────────────────────────────────────────────────── */

/* Overview card — two-panel layout */
.cd-overview-card {
  display: flex; gap: 0;
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: 12px; margin-bottom: 1.25rem; overflow: hidden;
}
.cd-overview-left {
  flex: 1; min-width: 0; display: flex; flex-direction: column;
  gap: .9rem; padding: 1.25rem 1.5rem;
}
.cd-overview-divider {
  width: 1px; background: var(--border); flex-shrink: 0;
}
.cd-overview-right {
  width: 260px; flex-shrink: 0; display: flex; flex-direction: column;
  gap: .8rem; padding: 1.25rem 1.25rem;
}
.cd-description {
  margin: 0; font-size: .875rem; color: var(--text); line-height: 1.65;
}

/* Launch date pill */
.cd-launch-pill {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--cobalt); color: #fff;
  font-size: .82rem; font-weight: 700; letter-spacing: .01em;
  padding: .35rem .85rem; border-radius: 99px;
  align-self: flex-start;
}

/* Owner / secondary meta row */
.cd-owner-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: .2rem .1rem;
}

/* Shared field label used across overview panels */
.cd-meta-label {
  font-size: .68rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-muted);
}
.cd-meta-val {
  font-size: .82rem; color: var(--text); font-weight: 500;
}
.cd-meta-val.cd-date { color: var(--cobalt); font-weight: 600; }

/* HubSpot links row */
.cd-links-row {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}
.cd-field-label {
  font-size: .68rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-muted); white-space: nowrap;
}
.cd-asset-link {
  font-size: .78rem; color: var(--cobalt); text-decoration: none;
  padding: .18rem .6rem; border: 1px solid var(--cobalt);
  border-radius: 99px; transition: background .15s, color .15s;
}
.cd-asset-link:hover { background: var(--cobalt); color: #fff; }

/* F1 compliance badge */
.cd-f1-badge {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: .45rem .75rem; border-radius: 8px;
  font-size: .8rem; font-weight: 500; line-height: 1.4;
}
.cd-f1-badge.f1-ok   { background: #ECFDF5; color: #059669; border: 1px solid #A7F3D0; }
.cd-f1-badge.f1-warn { background: #FFFBEB; color: #D97706; border: 1px solid #FDE68A; }

/* ICP tag groups */
.cd-tag-group { display: flex; flex-direction: column; gap: .25rem; }
.cd-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.cd-chip {
  font-size: .74rem; padding: .2rem .6rem; border-radius: 99px; font-weight: 500;
}
.cd-chip-vert { background: #EFF6FF; color: #1D4ED8; }
.cd-chip-pers { background: #F5F3FF; color: #6D28D9; }

/* Pipeline section */
.cd-pipeline-section {
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: 12px; padding: 1.25rem 1.5rem;
}
.cd-pipeline-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: .9rem;
}
.cd-del-count {
  font-size: .82rem; color: var(--text-muted); font-weight: 400;
}
.cd-progress-strip {
  display: flex; height: 6px; border-radius: 99px; overflow: hidden;
  gap: 1px; background: var(--border); margin-bottom: 1.1rem;
}
.cd-empty-deliverables {
  text-align: center; padding: 2.75rem 1rem;
}
.cd-empty-icon { font-size: 2rem; margin-bottom: .25rem; }

/* Legacy meta pills (kept for backward compat) */
.meta-pill {
  display: flex; align-items: center; gap: .4rem; background: var(--bg);
  border: 1px solid var(--border); border-radius: 99px;
  padding: .2rem .7rem; font-size: .78rem;
}
.meta-label { color: var(--text-muted); font-weight: 500; }
.camp-section {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 1rem 1.1rem;
}
.camp-section-header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem;
}
.camp-section-header h3 { margin: 0; font-size: .9rem; font-weight: 500; }

@media (max-width: 720px) {
  .cd-overview-card { flex-direction: column; }
  .cd-overview-divider { width: 100%; height: 1px; }
  .cd-overview-right { width: 100%; border-top: 1px solid var(--border); }
}

/* ── DELIVERABLES ────────────────────────────────────────────────────────── */
.deliverable-list { display: flex; flex-direction: column; gap: .35rem; }
.deliverable-row {
  display: flex; align-items: center; gap: .6rem;
  padding: .4rem .5rem; border-radius: 6px; background: var(--bg);
  font-size: .83rem;
}
.deliverable-row.done .deliverable-title { text-decoration: line-through; color: var(--text-muted); }
.deliverable-title { flex: 1; }
.asset-link-list { display: flex; flex-direction: column; gap: .4rem; }
.asset-link {
  display: flex; align-items: center; gap: .5rem; padding: .4rem .6rem;
  background: var(--bg); border-radius: 6px; font-size: .83rem;
  color: var(--cobalt); text-decoration: none; border: 1px solid var(--border);
}
.asset-link:hover { background: #EEF2FF; }

/* ── CALENDAR ────────────────────────────────────────────────────────────── */
.cal-nav {
  display: flex; align-items: center; gap: 1rem; margin-bottom: .75rem;
}
.calendar-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 1px; background: var(--divider);
  border: 1px solid var(--divider); border-radius: 12px; overflow: hidden;
}
.cal-day-header {
  background: var(--navy); text-align: center;
  font-size: .68rem; font-weight: 600; color: var(--cyan);
  padding: .5rem .3rem; text-transform: uppercase; letter-spacing: .07em;
}
.cal-cell {
  background: var(--surface); padding: .45rem .4rem; min-height: 88px;
  vertical-align: top; display: flex; flex-direction: column; gap: .2rem;
  overflow: hidden;
}
.cal-cell.empty { background: var(--bg); }
.cal-cell.today { outline: 2px solid var(--cobalt); outline-offset: -2px; }
.cal-day-num { font-size: .72rem; font-weight: 600; color: var(--text-muted); margin-bottom: .1rem; }
.cal-cell.today .cal-day-num { color: var(--cobalt); font-weight: 700; }
.cal-evt {
  font-size: .65rem; padding: .12rem .38rem; border-radius: 4px;
  background: var(--cobalt); color: #fff; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  width: 100%; box-sizing: border-box; font-weight: 500;
  transition: opacity .15s, transform .12s;
}
.cal-evt:hover { opacity: .82; transform: translateX(1px); }
/* Event-type chips — all use cobalt spectrum for cohesion */
.cal-evt.type-webinar    { background: #026FFF; color: #fff; }
.cal-evt.type-tradeshow  { background: #0031CA; color: #fff; }
.cal-evt.type-conference { background: var(--navy); color: var(--cyan); }

/* ── AD VARIANTS ─────────────────────────────────────────────────────────── */
.variant-list { display: flex; flex-direction: column; gap: .4rem; }
.variant-row {
  display: flex; align-items: center; gap: .4rem;
  background: var(--bg); border-radius: 6px; padding: .4rem .5rem;
}
.variant-row input, .variant-row select {
  font-size: .8rem; padding: .25rem .4rem;
  border: 1px solid var(--border); border-radius: 4px; background: #fff;
}
.variant-count {
  font-size: .75rem; font-weight: 500; background: #EEF2FF;
  color: var(--cobalt); padding: .15rem .45rem; border-radius: 99px;
}

/* ── COMPLETED AT BOTTOM ─────────────────────────────────────────────────── */
.row-done { opacity: .55; }
.row-done:hover { opacity: .8; }
.done-divider td {
  padding: .4rem .6rem; font-size: .72rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-muted); background: var(--bg);
  border-top: 2px solid var(--border);
}

/* ── PLATFORM TAG ────────────────────────────────────────────────────────── */
.platform-tag {
  display: inline-block; font-size: .68rem; font-weight: 600; padding: .18rem .52rem;
  border-radius: 4px; background: #EFF1F5; color: #374151;
  white-space: nowrap; text-transform: uppercase; letter-spacing: .04em;
}
/* Per-platform brand colours */
.platform-tag[data-platform="linkedin"]  { background: #DBEAFE; color: #1e40af; }
.platform-tag[data-platform="instagram"] { background: #FCE7F3; color: #9D174D; }
.platform-tag[data-platform="facebook"]  { background: #EFF6FF; color: #1D4ED8; }
.platform-tag[data-platform="youtube"]   { background: #FEE2E2; color: #991B1B; }
.platform-tag[data-platform="reddit"]    { background: #FFF1F2; color: #9A3412; }
/* Multi-value chip container (platform, event type) */
.platform-tag-list { display: flex; flex-wrap: wrap; gap: .25rem; max-width: 220px; }

/* ── REQ MARKER ──────────────────────────────────────────────────────────── */
.req { color: #DC2626; font-weight: 500; }

/* ── BTN SMALL ───────────────────────────────────────────────────────────── */
.btn-primary.small { padding: .3rem .7rem; font-size: .78rem; }

/* ── SUMMARY MODAL ───────────────────────────────────────────────────────── */
.summary-body { max-height: 65vh; overflow-y: auto; padding: .25rem 0; }
.summary-stat-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-bottom: 1rem;
}
.summary-stat-card {
  background: #E3FFF9; border-radius: 8px; padding: .8rem .9rem;
  text-align: center;
}
.summary-stat-card .sv { font-size: 1.65rem; font-weight: 500; color: var(--cobalt); line-height: 1; }
.summary-stat-card .sl { font-size: .72rem; color: var(--text-muted); margin-top: .25rem; font-weight: 500; }
.summary-stat-card.warn .sv { color: #0284C7; }
.summary-stat-card.ok   .sv { color: #059669; }
.summary-section { margin-bottom: 1rem; }
.summary-section:last-child { margin-bottom: 0; }
.summary-section-title {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-muted); font-weight: 500; margin-bottom: .5rem; padding-bottom: .3rem;
  border-bottom: 1px solid var(--border);
}
.summary-rows { display: flex; flex-direction: column; gap: .3rem; }
.summary-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .85rem; padding: .2rem 0;
}
.summary-row-label { color: var(--text); }
.summary-row-value { font-weight: 500; color: var(--navy); }
.summary-alert { background: #E0F2FE; border: 1px solid #7DD3FC; border-radius: 6px; padding: .5rem .75rem; font-size: .82rem; color: #0369A1; margin-top: .75rem; }
.summary-ok-banner { background: #D1FAE5; border: 1px solid #6EE7B7; border-radius: 6px; padding: .5rem .75rem; font-size: .82rem; color: #065F46; margin-top: .75rem; }

/* ── ACTIVITY LOG ────────────────────────────────────────────────────────── */
.activity-log-list { display: flex; flex-direction: column; gap: .25rem; max-height: 480px; overflow-y: auto; }
.activity-entry {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .5rem .7rem; border-radius: 6px; background: var(--bg);
  font-size: .81rem; border: 1px solid transparent;
}
.activity-entry:hover { background: #EEF2FF; border-color: var(--border); }
.activity-meta { display: flex; align-items: center; gap: .45rem; flex: 1; min-width: 0; }
.activity-action { font-weight: 500; font-size: .78rem; }
.activity-table { background: var(--border); border-radius: 4px; padding: .1rem .35rem; font-size: .72rem; color: var(--text-muted); }
.activity-summary { color: var(--text); font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity-right { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.activity-user { font-size: .72rem; color: var(--text-muted); }
.activity-ts { font-size: .72rem; color: var(--text-muted); white-space: nowrap; }

/* ── TEAM MANAGEMENT TABLE ───────────────────────────────────────────────── */
.team-member-row {
  display: flex; align-items: center; gap: .6rem;
  padding: .45rem .5rem; border-radius: 6px; background: var(--bg);
  font-size: .83rem; margin-bottom: .3rem;
}
.team-member-row input { font-size: .8rem; padding: .25rem .45rem; border: 1px solid var(--border); border-radius: 4px; }

/* ── VIEW ACTIONS ──────────────────────────────────────────────────────────── */
.view-actions { display: flex; gap: .5rem; align-items: center; margin-left: auto; }


/* ── DRAG AND DROP ───────────────────────────────────────────────────────── */
.kanban-cards.drag-over { background: rgba(0,49,202,.06); border-radius: 8px; outline: 2px dashed var(--cobalt); }
.task-card[draggable="true"] { cursor: grab; }
.task-card[draggable="true"]:active { cursor: grabbing; opacity: .7; }

/* ── CALENDAR EVENTS (extra types) ──────────────────────────────────────── */
/* Calendar module-type chips — cobalt spectrum, light mode */
.cal-evt.cal-campaign{ background: rgba(0,49,202,.12); color: #0031CA; }
.cal-evt.cal-social  { background: rgba(2,111,255,.12); color: #026FFF; }
.cal-evt.cal-blog    { background: rgba(0,49,202,.08); color: #0044DD; }
.cal-evt.cal-paid    { background: rgba(116,255,224,.18); color: #005A8E; }
.cal-evt.cal-done    { background: rgba(155,163,175,.15); color: #9A9E9E; text-decoration: line-through; }
/* Calendar module-type chips — dark mode */
[data-theme="dark"] .cal-evt.cal-campaign { background: rgba(0,49,202,.3);   color: #93C5FD; }
[data-theme="dark"] .cal-evt.cal-social   { background: rgba(2,111,255,.25); color: #7DD3FC; }
[data-theme="dark"] .cal-evt.cal-blog     { background: rgba(0,49,202,.2);   color: #BFDBFE; }
[data-theme="dark"] .cal-evt.cal-paid     { background: rgba(116,255,224,.15); color: #74FFE0; }
.btn-sm { padding: .3rem .7rem; font-size: .8rem; }
.btn-xs { padding: .2rem .5rem; font-size: .75rem; border-radius: 4px; background: var(--bg); border: 1px solid var(--border); color: var(--text-muted); }
.btn-xs:hover { background: var(--border); }
.inline-input { width: 100%; border: 1px solid transparent; border-radius: 4px; padding: .25rem .4rem; font-size: .82rem; background: transparent; }
.inline-input:hover, .inline-input:focus { border-color: var(--border); background: var(--surface); outline: none; }

/* ── DONUT CHARTS ────────────────────────────────────────────────────────── */
.charts-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.chart-card {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #E1E1E1);
  border-radius: 16px;
  padding: 1.25rem 1.1rem 1.1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 1px 4px rgba(6,28,34,.05), 0 2px 12px rgba(0,49,202,.04);
  transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
  min-width: 0;
}
.chart-card:hover {
  box-shadow: 0 8px 28px rgba(0,49,202,.1), 0 2px 8px rgba(6,28,34,.06);
  border-color: #BFCEF7;
  transform: translateY(-2px);
}
.chart-card-title, .chart-title {
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-muted, #6B7897);
  margin-bottom: .65rem;
  align-self: flex-start;
}
.donut-wrap { display: flex; align-items: center; gap: .75rem; }
.chart-card svg { display: block; overflow: visible; }
.donut-legend {
  display: flex;
  flex-direction: column;
  gap: .18rem;
  width: 100%;
  margin-top: .55rem;
}
.legend-item {
  display: flex;
  align-items: center;
  gap: .38rem;
  font-size: .7rem;
  line-height: 1.35;
  padding: .05rem 0;
}
.legend-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.legend-label { color: var(--text, #1A2233); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; font-size: .69rem; }
.legend-val   { font-weight: 600; color: var(--text, #1A2233); flex-shrink: 0; min-width: 1.4rem; text-align: right; }
.legend-pct   { font-size: .63rem; color: var(--text-muted, #9CA3AF); flex-shrink: 0; min-width: 2.4rem; text-align: right; }
.legend-target { font-size: .65rem; color: var(--text-muted, #9CA3AF); }
/* SVG donut text / track */
.donut-track       { stroke: rgba(0,0,0,.07); }
.donut-center-count { fill: var(--text, #061C22); font-weight: 600; }
.donut-center-label { fill: var(--text-muted, #9CA3AF); }
.donut-empty-track  { stroke: var(--border, #E5E7EB); }

/* ── MULTI-SELECT DROPDOWN ───────────────────────────────────────────────── */
.multi-select-wrap { position: relative; }
.multi-select-trigger {
  display: flex; align-items: center; justify-content: space-between;
  border: 1.5px solid var(--border); border-radius: 7px; padding: .45rem .6rem;
  background: var(--surface); color: var(--text); cursor: pointer; font-size: .85rem; min-width: 140px;
  gap: .4rem; transition: border-color .15s;
}
.multi-select-trigger:hover { border-color: var(--cobalt); }
.multi-select-dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 300;
  background: var(--surface); border: 1.5px solid var(--border); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18); max-height: 240px; overflow-y: auto;
  padding: .35rem 0;
}
.multi-select-dropdown label {
  display: flex; align-items: center; gap: .5rem;
  padding: .42rem .75rem; font-size: .84rem; color: var(--text); cursor: pointer; user-select: none;
  text-transform: none; letter-spacing: normal; font-weight: 400;
}
.multi-select-dropdown label:hover { background: rgba(116,255,224,.08); color: var(--cobalt); }
.multi-select-dropdown input[type=checkbox] { accent-color: var(--cobalt); width: 14px; height: 14px; flex-shrink: 0; }
.multi-select-dropdown .ms-divider { height: 1px; background: var(--border); margin: .35rem 0; }
.multi-select-dropdown input[type=text].ms-custom {
  margin: .35rem .5rem; width: calc(100% - 1rem); padding: .3rem .5rem;
  border: 1px solid var(--border); border-radius: 5px; font-size: .82rem;
  background: var(--bg); color: var(--text);
}

/* ── DELIVERABLES KANBAN ─────────────────────────────────────────────────── */
.deliverables-section { margin-top: 1.5rem; }
.deliverables-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.deliverables-header h4 { font-size: 1rem; font-weight: 500; color: #061C22; text-transform: uppercase; letter-spacing: .04em; }
/* ── CAMPAIGN CARDS VIEW ─────────────────────────────────────────────────── */
.camp-group { margin-bottom: 1.75rem; }
.camp-group-header {
  display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem;
}
.camp-group-label {
  font-size: .8rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-muted);
}
.camp-group-count {
  font-size: .75rem; font-weight: 600; background: var(--bg);
  border-radius: 99px; padding: .1rem .5rem; color: var(--text-muted);
}
.camp-card-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); gap: 1rem;
}
.camp-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 1.1rem 1.2rem; cursor: pointer;
  transition: box-shadow .18s, border-color .18s, transform .18s;
  display: flex; flex-direction: column; gap: .5rem; position: relative;
  box-shadow: 0 1px 4px rgba(6,28,34,.05);
}
.camp-card:hover {
  box-shadow: 0 6px 22px rgba(0,49,202,.1); border-color: #BFCEF7; transform: translateY(-2px);
}
.camp-card.s-done { opacity: .7; }
.camp-card-top {
  display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
}
.camp-card-edit {
  margin-left: auto; opacity: 0; transition: opacity .15s;
  background: none; border: none; cursor: pointer; font-size: .85rem; padding: .1rem .3rem;
}
.camp-card:hover .camp-card-edit { opacity: 1; }
.camp-card-title {
  font-size: .95rem; font-weight: 600; color: var(--text); line-height: 1.35;
}
.camp-card-meta {
  display: flex; flex-wrap: wrap; gap: .3rem; align-items: center;
}
.camp-card-chip {
  font-size: .72rem; color: var(--text-muted); background: var(--bg);
  border-radius: 4px; padding: .15rem .4rem;
}
.camp-card-dates {
  display: flex; gap: .75rem; flex-wrap: wrap;
}
.camp-card-date-item {
  font-size: .75rem; color: var(--text-muted);
}
.camp-card-date-label {
  font-weight: 600; color: #374151; text-transform: uppercase;
  font-size: .65rem; letter-spacing: .04em; margin-right: .2rem;
}
.camp-card-desc {
  font-size: .78rem; color: var(--text-muted); line-height: 1.5;
}
.camp-card-deliverables {
  margin-top: .25rem; border-top: 1px solid var(--border); padding-top: .5rem;
}
.camp-card-del-header {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .75rem; color: var(--text-muted); margin-bottom: .25rem;
}
.camp-card-del-live { font-weight: 600; color: #059669; }
.camp-card-del-legend {
  display: flex; flex-wrap: wrap; gap: .4rem .75rem; margin-top: .3rem;
}
.camp-del-leg-item {
  display: flex; align-items: center; gap: .25rem;
  font-size: .68rem; color: var(--text-muted);
}
.camp-del-leg-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.camp-card-no-del {
  font-size: .75rem; color: var(--text-muted); font-style: italic;
}
.camp-card-no-del a { color: var(--cobalt); text-decoration: none; }
.camp-card-no-del a:hover { text-decoration: underline; }
.camp-card-link-row { margin-top: .25rem; }
.camp-card-ext-link {
  font-size: .75rem; color: var(--cobalt); text-decoration: none;
  display: inline-flex; align-items: center; gap: .2rem;
}
.camp-card-ext-link:hover { text-decoration: underline; }
.camp-card-add {
  border: 1.5px dashed #D1D5DB; border-radius: 12px; padding: 1.5rem 1rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .4rem; cursor: pointer; color: #9CA3AF; font-size: .82rem;
  transition: border-color .15s, color .15s;
}
.camp-card-add:hover { border-color: var(--cobalt); color: var(--cobalt); }

/* Deliverable progress bar */
.camp-del-bar {
  display: flex; height: 6px; border-radius: 99px; overflow: hidden;
  background: var(--border);
}
.camp-del-bar > div {
  transition: flex .4s cubic-bezier(.4,0,.2,1);
  background: linear-gradient(90deg, #0031CA, #74FFE0);
}

/* ── DELIVERABLES 5-COLUMN PIPELINE ─────────────────────────────────────── */
.del-pipeline-wrap { overflow-x: auto; margin-top: .75rem; padding-bottom: .5rem; }
.del-kanban { display: grid; grid-template-columns: repeat(5, minmax(180px,1fr)); gap: .75rem; min-width: 900px; }
.del-col { background: #F8F9FB; border-radius: 8px; padding: .75rem; min-height: 180px; }
.del-col-header { font-size: .72rem; font-weight: 500; text-transform: uppercase; letter-spacing: .07em; margin-bottom: .6rem; display: flex; align-items: center; justify-content: space-between; }
.del-col-header.dc-notstarted { color: #6B7897; }
.del-col-header.dc-inprogress { color: #0031CA; }
.del-col-header.dc-inreview   { color: #0284C7; }
.del-col-header.dc-approved   { color: #7C3AED; }
.del-col-header.dc-live       { color: #059669; }
.del-col-header.dc-completed  { color: #059669; }
.del-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: 10px; padding: .85rem .95rem; position: relative;
  cursor: pointer; transition: box-shadow .18s, border-color .18s, transform .18s;
  font-size: .875rem; margin-bottom: .5rem;
  box-shadow: 0 1px 3px rgba(6,28,34,.04);
}
.del-card:hover { box-shadow: 0 4px 14px rgba(0,49,202,.08); border-color: #BFCEF7; transform: translateY(-1px); }
.del-card.del-done { opacity: .55; text-decoration: line-through; }
.del-card-name { font-weight: 500; color: #061C22; margin-bottom: .3rem; }
.del-card-meta { font-size: .72rem; color: #6B7897; display: flex; flex-wrap: wrap; gap: .3rem; }
.del-card-links a { color: #0031CA; font-size: .72rem; text-decoration: none; }
.del-card-links a:hover { text-decoration: underline; }
.add-del-btn { width: 100%; border: 1px dashed #C7D0E0; border-radius: 6px; padding: .4rem; font-size: .78rem; color: #6B7897; background: none; cursor: pointer; margin-top: .35rem; }
.add-del-btn:hover { background: #E3FFF9; border-color: #0031CA; color: #0031CA; }
.del-progress { display: flex; align-items: center; gap: .75rem; background: #F8F9FB; border-radius: 8px; padding: .65rem 1rem; margin-bottom: 1rem; }
.del-progress-text { font-size: .82rem; color: #6B7897; }
.del-progress-text strong { color: #059669; }

/* ── LIVE PREVIEW / BETA NOTICE MODAL ───────────────────────────────────── */
.beta-notice-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(6,28,34,.68); backdrop-filter: blur(5px);
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
  opacity: 0; transition: opacity .3s ease;
}
.beta-notice-overlay.beta-notice-visible { opacity: 1; }
.beta-notice-card {
  background: #fff; border-radius: 18px;
  max-width: 520px; width: 100%;
  box-shadow: 0 32px 96px rgba(0,49,202,.2), 0 4px 20px rgba(6,28,34,.18);
  overflow: hidden;
  transform: translateY(20px) scale(.98);
  transition: transform .32s cubic-bezier(.22,.68,0,1.2);
}
.beta-notice-overlay.beta-notice-visible .beta-notice-card {
  transform: translateY(0) scale(1);
}
.beta-notice-accent {
  height: 4px;
  background: linear-gradient(90deg, var(--cobalt) 0%, var(--cyan) 100%);
}
.beta-notice-body { padding: 2rem 2.25rem 1.85rem; }
.beta-notice-icon {
  width: 52px; height: 52px; border-radius: 13px;
  background: rgba(0,49,202,.06); border: 1px solid rgba(0,49,202,.12);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.1rem;
}
.beta-notice-label {
  font-size: .67rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .12em; color: var(--cobalt); margin-bottom: .4rem;
}
.beta-notice-title {
  font-size: 1.45rem; font-weight: 700; color: var(--navy);
  margin: 0 0 .2rem; line-height: 1.2;
  font-family: 'Roobert', 'Inter', sans-serif;
}
.beta-notice-sub {
  font-size: .82rem; color: var(--text-muted); margin: 0 0 1.1rem;
}
.beta-notice-desc {
  font-size: .875rem; color: var(--text); line-height: 1.65;
  margin: 0 0 1.1rem;
}
.beta-notice-features {
  list-style: none; padding: 0;
  margin: 0 0 1.5rem;
  display: flex; flex-direction: column; gap: .45rem;
  background: var(--bg); border-radius: 10px; padding: .85rem 1rem;
  border: 1px solid var(--border);
}
.beta-notice-features li {
  display: flex; align-items: center; gap: .6rem;
  font-size: .82rem; color: var(--text);
}
.beta-notice-features li::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--cobalt); flex-shrink: 0;
}
.beta-notice-cta {
  width: 100%; display: flex; align-items: center;
  justify-content: center; gap: .5rem;
  padding: .85rem 1rem; font-size: .9rem;
  margin-bottom: .9rem; border-radius: 10px;
}
.beta-notice-footer {
  font-size: .75rem; color: var(--text-muted);
  text-align: center; margin: 0; line-height: 1.5;
}
.beta-notice-settings-link {
  background: none; border: none; color: var(--cobalt);
  cursor: pointer; font-size: inherit; padding: 0;
  text-decoration: underline; font-family: inherit;
}
.beta-notice-settings-link:hover { color: var(--cobalt-hover); }

/* Beta notice — dark mode */
[data-theme="dark"] .beta-notice-card { background: #0D1626; border: 1px solid rgba(116,255,224,.12); }
[data-theme="dark"] .beta-notice-title { color: #fff; }
[data-theme="dark"] .beta-notice-sub { color: rgba(255,255,255,.5); }
[data-theme="dark"] .beta-notice-desc { color: rgba(255,255,255,.65); }
[data-theme="dark"] .beta-notice-label { color: #74FFE0; }
[data-theme="dark"] .beta-notice-icon { background: rgba(116,255,224,.08); border-color: rgba(116,255,224,.2); }
[data-theme="dark"] .beta-notice-features { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }
[data-theme="dark"] .beta-notice-features li { color: rgba(255,255,255,.8); }
[data-theme="dark"] .beta-notice-features li::before { background: #74FFE0; }
[data-theme="dark"] .beta-notice-footer { color: rgba(255,255,255,.4); }
[data-theme="dark"] .beta-notice-settings-link { color: #74FFE0; }
[data-theme="dark"] .beta-notice-settings-link:hover { color: #5CECD1; }

/* ── DROP LINE INDICATOR ─────────────────────────────────────────────────── */
.drop-line {
  height: 3px; background: #0031CA; border-radius: 2px; margin: 2px 0;
  box-shadow: 0 0 0 2px rgba(0,49,202,.2);
  pointer-events: none;
}

/* ── TAG COMPLIANCE INLINE ───────────────────────────────────────────────── */
.tag-missing-inline { font-size: .7rem; color: #0284C7; font-weight: 500; }

/* ── MULTI-CHECK LIST ────────────────────────────────────────────────────── */
/* overflow-y: scroll (not auto) reserves scrollbar space so width stays stable */
.multi-check-list {
  height: 148px;
  overflow-y: scroll;
  border: 1.5px solid var(--border);
  border-radius: 7px;
  padding: .35rem .5rem;
  background: var(--surface);
  width: 100%;
  box-sizing: border-box;
}
/* Use !important to definitively beat .form-group label's uppercase/muted styles */
.multi-check-list label,
.form-group .multi-check-list label {
  display: flex !important;
  align-items: center !important;
  gap: .45rem;
  padding: .28rem .25rem;
  font-size: .82rem !important;
  font-weight: 400 !important;
  color: var(--text) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  cursor: pointer;
  user-select: none;
  line-height: 1.4;
  min-width: 0;
  border-radius: 4px;
  transition: background .1s, color .1s;
}
.multi-check-list label:hover,
.form-group .multi-check-list label:hover { background: rgba(116,255,224,.08); color: var(--cobalt) !important; }
/* Checkbox always on left, fixed size, never shrinks */
.multi-check-list input[type="checkbox"] {
  flex-shrink: 0 !important;
  width: 14px;
  height: 14px;
  accent-color: var(--cobalt);
  cursor: pointer;
  margin: 0;
}
.multi-check-list label span {
  flex: 1;
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}
/* Two-column tag row — Vertical + Persona share the row, Funnel on its own */
.f1-tag-pair { display: flex; gap: .75rem; align-items: flex-start; }
.f1-tag-pair .form-group { flex: 1 1 0; min-width: 0; }
.f1-funnel-row { display: flex; gap: .75rem; margin-top: .25rem; }
.f1-funnel-row .form-group { flex: 0 0 180px; }

/* ── DEL KANBAN IMPROVEMENTS ─────────────────────────────────────────────── */
.del-card-title { font-size: .875rem; font-weight: 600; color: var(--text); margin-bottom: .35rem; line-height: 1.35; }
.del-card-links { display: flex; flex-direction: column; gap: .15rem; margin-top: .3rem; }
.del-asset-link { font-size: .72rem; color: var(--cobalt); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.del-asset-link:hover { text-decoration: underline; }
.del-card-assets { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .35rem; }
.del-asset-chip { display: inline-flex; align-items: center; gap: .2rem; font-size: .68rem; background: var(--surface); border: 1px solid var(--stroke); border-radius: 4px; padding: .15rem .35rem; cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); transition: background .15s, border-color .15s; }
.del-asset-chip:hover { background: rgba(0,49,202,.07); border-color: var(--cobalt); color: var(--cobalt); }
.del-delete { position: absolute; top: .35rem; right: .35rem; opacity: 0; transition: opacity .15s; font-size: .75rem !important; }
.del-card { position: relative; }
.del-card:hover .del-delete { opacity: 1; }
.camp-section { margin-bottom: 1.5rem; }
.camp-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem; }
.camp-section-header h3 { margin: 0; font-size: 1rem; font-weight: 600; color: #061C22; }

/* ── TEAM MEMBER DRAG REORDER ────────────────────────────────────────────── */
.team-members-grid { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.team-members-header,
.team-member-row {
  display: grid;
  grid-template-columns: 28px 1fr 1fr 1.4fr 90px 36px;
  align-items: center;
  gap: 0;
}
.team-members-header {
  background: #F8F9FB; border-bottom: 1px solid var(--border);
  padding: .45rem .75rem;
  font-size: .72rem; font-weight: 500; text-transform: uppercase;
  letter-spacing: .07em; color: var(--text-muted);
}
.team-member-row {
  border-bottom: 1px solid var(--border); padding: .35rem .75rem;
  background: var(--surface); cursor: default;
  transition: background .12s;
}
.team-member-row:last-child { border-bottom: none; }
.team-member-row:hover { background: #F8F9FB; }
.team-member-row.dragging { opacity: .4; }
.team-member-row.drag-over { outline: 2px solid #0031CA; outline-offset: -2px; background: rgba(0,49,202,.04); }
.tm-drag-col { display: flex; align-items: center; justify-content: center; color: #C7D0E0; }
.tm-name-col, .tm-loc-col, .tm-tz-col { padding: 0 .25rem; }
.tm-time-col { font-size: .8rem; color: var(--text-muted); white-space: nowrap; padding: 0 .25rem; }
.tm-del-col { display: flex; align-items: center; justify-content: center; }
.drag-handle { cursor: grab; }
.drag-handle:active { cursor: grabbing; }
.tm-input {
  width: 100%; border: 1px solid transparent; border-radius: 4px;
  padding: .2rem .35rem; font-size: .83rem; background: transparent;
  font-family: inherit; color: var(--text);
}
.tm-input:hover, .tm-input:focus {
  border-color: var(--border); background: var(--surface); outline: none;
  box-shadow: 0 0 0 2px rgba(0,49,202,.1);
}

/* ── SORTABLE TABLE HEADERS ──────────────────────────────────────────────── */
.sortable-th {
  cursor: pointer; user-select: none; white-space: nowrap;
  transition: color .15s;
}
.sortable-th:hover { color: #0031CA; }
.sort-th-icon { margin-left: .25rem; font-size: .8em; opacity: .6; }
.sortable-th:hover .sort-th-icon { opacity: 1; color: #0031CA; }

/* ── DONUT TOOLTIP ───────────────────────────────────────────────────────── */
#donut-tooltip {
  position: fixed; z-index: 9999; pointer-events: none;
  background: #061C22; color: #fff;
  padding: .4rem .7rem; border-radius: 7px;
  font-size: .78rem; line-height: 1.45;
  box-shadow: 0 4px 14px rgba(0,0,0,.3);
  opacity: 0; transition: opacity .12s;
  white-space: nowrap;
}
#donut-tooltip.visible { opacity: 1; }
#donut-tooltip strong { color: #74FFE0; display: block; margin-bottom: .1rem; }
.donut-seg {
  cursor: pointer;
  transition: opacity .15s, filter .15s;
  stroke-linecap: round;
}
.donut-seg:hover {
  opacity: .85;
  filter: brightness(1.12) drop-shadow(0 0 4px currentColor);
}

/* ── CHAT WIDGET ─────────────────────────────────────────────────────────── */
/* ── FAB PILL BAR — shared container for True Pro | +Add | Chat ──────────── */
#fab-bar {
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 500;
  display: flex; flex-direction: row; align-items: center; gap: 0;
  background: #061C22;
  border: 1px solid rgba(116,255,224,.15);
  border-radius: 999px; padding: 5px;
  box-shadow: 0 12px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(116,255,224,.08);
}
#fab-bar .fab-divider {
  width: 1px; height: 26px; background: rgba(255,255,255,.1); flex-shrink: 0;
}
/* Chat widget: just the panel overlay, not a positioned container */
#chat-widget {
  position: static;
  display: contents;
}
#chat-fab {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.07); color: rgba(255,255,255,.8);
  border: none; box-shadow: none;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s, transform .15s;
  cursor: pointer;
}
#chat-fab:hover { background: rgba(116,255,224,.15); color: #74FFE0; transform: scale(1.08); }
#chat-fab.chat-open { background: rgba(116,255,224,.2); color: #74FFE0; }
#chat-fab svg { width: 18px; height: 18px; }
#chat-panel {
  position: fixed; bottom: 5.5rem; right: 1.5rem; z-index: 520;
  width: 340px; height: 440px;
  background: #061C22;
  border: 1px solid rgba(116,255,224,.15);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(116,255,224,.08);
  display: flex; flex-direction: column; overflow: hidden;
}
.chat-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .85rem 1rem;
  background: rgba(116,255,224,.06);
  border-bottom: 1px solid rgba(116,255,224,.12);
  color: #fff;
}
.chat-header span { font-size: .92rem; font-weight: 600; color: #fff; }
.chat-header button { background: none; border: none; color: rgba(255,255,255,.4); font-size: 1rem; cursor: pointer; padding: .1rem .3rem; transition: color .12s; }
.chat-header button:hover { color: #fff; }
.chat-backend-badge {
  font-size: .62rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  background: rgba(116,255,224,.12); color: #74FFE0;
  border: 1px solid rgba(116,255,224,.3);
  border-radius: 99px; padding: .1rem .5rem; margin-left: .5rem;
  box-shadow: 0 0 8px rgba(116,255,224,.4), 0 0 20px rgba(116,255,224,.15);
  animation: live-pulse 2.5s ease-in-out infinite;
}
@keyframes live-pulse {
  0%, 100% { box-shadow: 0 0 6px rgba(116,255,224,.35), 0 0 16px rgba(116,255,224,.1); }
  50%       { box-shadow: 0 0 12px rgba(116,255,224,.6), 0 0 28px rgba(116,255,224,.25); }
}
#chat-messages-list {
  flex: 1; overflow-y: auto; padding: .85rem .75rem;
  display: flex; flex-direction: column; gap: .65rem;
  background: transparent;
}
.chat-msg { display: flex; align-items: flex-end; gap: .6rem; }
.chat-mine { flex-direction: row-reverse; }
.chat-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .6rem; font-weight: 700; color: #fff;
  flex-shrink: 0; margin-bottom: .2rem;
}
.chat-bubble-wrap { display: flex; flex-direction: column; max-width: 78%; }
.chat-mine .chat-bubble-wrap { align-items: flex-end; }
.chat-sender { font-size: .66rem; color: rgba(255,255,255,.35); margin-bottom: .2rem; padding: 0 .4rem; font-weight: 500; }
.chat-sender-mine { text-align: right; }
.chat-bubble {
  background: rgba(255,255,255,.08); border: none;
  border-radius: 14px 14px 14px 4px;
  padding: .5rem .8rem; font-size: .84rem; line-height: 1.5;
  word-break: break-word; color: rgba(255,255,255,.92);
}
.chat-mine .chat-bubble {
  background: rgba(0,49,202,.55); color: #fff; border: none;
  border-radius: 14px 14px 4px 14px;
}
.chat-time { font-size: .62rem; color: rgba(255,255,255,.25); margin-top: .18rem; padding: 0 .4rem; }
.chat-mine .chat-time { text-align: right; }
.chat-empty { text-align: center; color: rgba(255,255,255,.3); font-size: .82rem; padding: 2.5rem 1rem; line-height: 1.6; }
/* ── Chat bubble row (bubble + hover actions) ── */
.chat-bubble-row { display: flex; align-items: center; gap: .25rem; }
.chat-mine .chat-bubble-row { flex-direction: row-reverse; }
.chat-actions { display: flex; gap: .05rem; opacity: 0; transition: opacity .15s; flex-shrink: 0; }
.chat-msg:hover .chat-actions { opacity: 1; }
.chat-react-btn {
  background: rgba(255,255,255,.07); border: none; cursor: pointer;
  font-size: .8rem; padding: .2rem .25rem; border-radius: 8px;
  line-height: 1; transition: background .1s, transform .1s;
  width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
}
.chat-react-btn:hover { background: rgba(255,255,255,.15); transform: scale(1.15); }
.chat-delete-btn {
  background: none; border: none; cursor: pointer;
  padding: .2rem; border-radius: 6px;
  color: rgba(255,255,255,.25); line-height: 1;
  display: flex; align-items: center;
  transition: background .1s, color .1s;
}
.chat-delete-btn:hover { background: rgba(239,68,68,.15); color: #EF4444; }
/* ── Reaction pills ── */
.chat-reactions { display: flex; flex-wrap: wrap; gap: .2rem; margin-top: .3rem; padding: 0 .4rem; }
.chat-mine .chat-reactions { justify-content: flex-end; }
.chat-reaction-pill {
  display: inline-flex; align-items: center; gap: .2rem;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);
  border-radius: 99px; padding: .15rem .5rem;
  font-size: .75rem; cursor: pointer; line-height: 1.4; color: rgba(255,255,255,.65);
  transition: background .1s, border-color .1s, transform .1s; user-select: none;
}
.chat-reaction-pill:hover { background: rgba(255,255,255,.12); transform: scale(1.05); }
.chat-reaction-pill.reacted { background: rgba(116,255,224,.12); border-color: rgba(116,255,224,.3); color: #74FFE0; font-weight: 600; }
/* Light mode — keep chat panel dark (theme-independent) */
[data-theme="light"] #chat-panel { background: #061C22; border-color: rgba(116,255,224,.15); }
[data-theme="light"] .chat-bubble { color: rgba(255,255,255,.92); }
[data-theme="light"] .chat-sender { color: rgba(255,255,255,.35); }
[data-theme="light"] .chat-time { color: rgba(255,255,255,.25); }
[data-theme="light"] .chat-empty { color: rgba(255,255,255,.3); }
.chat-footer {
  display: flex; gap: .5rem; padding: .65rem .75rem;
  border-top: 1px solid rgba(255,255,255,.07);
  background: rgba(0,0,0,.1);
}
#chat-input {
  flex: 1; border: 1px solid rgba(255,255,255,.1); border-radius: 22px;
  padding: .45rem .9rem; font-size: .84rem; outline: none;
  font-family: inherit; background: rgba(255,255,255,.06); color: #fff;
}
#chat-input::placeholder { color: rgba(255,255,255,.25); }
#chat-input:focus { border-color: rgba(116,255,224,.35); box-shadow: 0 0 0 2px rgba(116,255,224,.07); }
.chat-send-btn {
  background: rgba(116,255,224,.12); color: #74FFE0;
  border: 1px solid rgba(116,255,224,.2);
  border-radius: 22px; padding: .45rem 1rem;
  font-size: .82rem; font-weight: 600; cursor: pointer;
  transition: background .15s, border-color .15s;
  white-space: nowrap;
}
.chat-send-btn:hover { background: rgba(116,255,224,.22); border-color: rgba(116,255,224,.4); }
/* ── WORKLOAD POPOVER ───────────────────────────────────────────────────────── */
#workload-popover {
  position: fixed; z-index: 1200;
  width: 300px; max-height: 480px;
  background: var(--white); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,.14);
  display: flex; flex-direction: column; overflow: hidden;
}
#workload-popover.hidden { display: none; }
.wl-header {
  display: flex; align-items: center; gap: .6rem;
  padding: .85rem 1rem; border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.wl-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 600; color: #fff;
}
.wl-header-info { flex: 1; min-width: 0; }
.wl-header-name { font-weight: 600; font-size: .88rem; color: var(--text); }
.wl-header-meta { font-size: .72rem; color: var(--text-muted); margin-top: .05rem; }
.wl-close {
  background: none; border: none; cursor: pointer; color: var(--text-muted);
  font-size: .9rem; padding: .2rem .35rem; border-radius: 6px;
  line-height: 1; transition: background .1s, color .1s; flex-shrink: 0;
}
.wl-close:hover { background: var(--border); color: var(--text); }
.wl-body { overflow-y: auto; padding: .5rem 0; flex: 1; }
.wl-empty { text-align: center; color: var(--text-muted); font-size: .82rem; padding: 2rem 1rem; }
.wl-section { padding: .35rem 0; }
.wl-section + .wl-section { border-top: 1px solid var(--border); }
.wl-section-header {
  display: flex; align-items: center; gap: .35rem;
  padding: .35rem 1rem .2rem; font-size: .72rem; font-weight: 600;
  color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em;
}
.wl-section-header svg { opacity: .7; }
.wl-count {
  background: var(--border); color: var(--text-muted);
  border-radius: 10px; padding: .05rem .35rem; font-size: .68rem; font-weight: 600;
}
.wl-item {
  display: flex; align-items: center; gap: .5rem; justify-content: space-between;
  padding: .3rem 1rem; font-size: .8rem; color: var(--text);
  transition: background .1s;
}
.wl-item:hover { background: var(--surface); }
.wl-item-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-item-sub   { display: block; font-size: .7rem; color: var(--muted); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-badge {
  flex-shrink: 0; font-size: .65rem; font-weight: 500;
  padding: .1rem .4rem; border-radius: 6px; white-space: nowrap;
}
.wl-badge-active  { background: #D1FAE5; color: #065F46; }
.wl-badge-done    { background: #E5E7EB; color: #374151; }
.wl-badge-blocked { background: #FEE2E2; color: #991B1B; }
.wl-badge-plan    { background: #EFF6FF; color: #1E40AF; }
.wl-badge-neutral { background: var(--border); color: var(--text-muted); }
/* Dark mode */
[data-theme="dark"] #workload-popover { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .wl-badge-active  { background: #064E3B; color: #6EE7B7; }
[data-theme="dark"] .wl-badge-done    { background: #374151; color: #D1D5DB; }
[data-theme="dark"] .wl-badge-blocked { background: #7F1D1D; color: #FCA5A5; }
[data-theme="dark"] .wl-badge-plan    { background: #1E3A5F; color: #93C5FD; }
/* Clickable clock members */
.clock-person { cursor: pointer; }
.clock-person:hover { opacity: .85; }

.chat-unread-dot {
  position: absolute; top: 6px; right: 6px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #74FFE0; border: 2px solid var(--cobalt);
}

/* ── TOP BAR BRAND SECTION ───────────────────────────────────────────────── */
.tb-brand {
  width: var(--sidebar-w); min-width: var(--sidebar-w); height: 100%; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  gap: .28rem;
  padding: 0 1rem 0 1.25rem;
  border-right: 1px solid rgba(255,255,255,.12);
}
.tb-brand-logo { height: 26px; width: auto; display: block; flex-shrink: 0; }
.tb-brand-label {
  font-size: .57rem; text-transform: uppercase; letter-spacing: .08em;
  color: rgba(116,255,224,.7); font-weight: 500;
  font-family: 'Roobert', 'Inter', sans-serif;
  white-space: nowrap;
}

/* ── TOP BAR CLOCK PILLS ─────────────────────────────────────────────────── */
.tb-clock-strip {
  display: flex; align-items: center; gap: .25rem;
  flex-shrink: 1; overflow-x: auto; overflow-y: hidden;
  padding: 0 .6rem;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}
.tb-clock-strip::-webkit-scrollbar { display: none; } /* Chrome/Safari */
.tb-clock-strip:empty { display: none; padding: 0; }
.tb-clock-pill {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .18rem .44rem; border-radius: 20px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  cursor: pointer; font-size: .71rem; white-space: nowrap;
  transition: background .15s, border-color .15s;
}
.tb-clock-pill:hover { background: rgba(255,255,255,.11); border-color: rgba(116,255,224,.45); }
.tb-clk-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255,255,255,.25);
}
.tb-clock-pill.clock-online  .tb-clk-dot {
  background: #74FFE1;
  box-shadow: 0 0 5px rgba(116,255,224,.65);
}
.tb-clk-name { color: rgba(255,255,255,.72); font-weight: 500; }
.tb-clk-time { font-variant-numeric: tabular-nums; color: rgba(255,255,255,.4); }
.tb-clock-pill.clock-online  .tb-clk-time { color: #74FFE1; }
.tb-clock-pill.clock-offline .tb-clk-time { opacity: .35; }
.tb-clk-you {
  font-size: .57rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: rgba(116,255,225,.65); margin-left: .1rem;
}
.tb-clock-pill.clock-self { border-color: rgba(116,255,225,.28); }

/* ── DASHBOARD — AREA STAT CHIPS (replaces donuts) ───────────────────────── */
.area-stats-row {
  display: flex; align-items: center; gap: .38rem; flex-wrap: wrap; margin-bottom: .6rem;
}
.area-stat-chip {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .71rem; color: var(--text-muted);
  background: var(--bg); border-radius: 20px; padding: .17rem .52rem;
  border: 1px solid var(--border); white-space: nowrap;
}
.area-stat-chip strong { color: var(--text); font-weight: 600; margin-left: .1rem; }
.asc-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

/* ── DASHBOARD — HERO BANNER ─────────────────────────────────────────────── */
.dash-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--navy) 0%, #062050 55%, var(--cobalt) 100%);
  border-radius: 14px; padding: 1.4rem 1.6rem;
  margin-bottom: 1rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.dash-hero-orb {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(116,255,224,.18) 0%, transparent 70%);
}
.dash-hero-orb-1 { width: 220px; height: 220px; top: -60px; right: -30px; }
.dash-hero-orb-2 { width: 130px; height: 130px; bottom: -65px; right: 28%; opacity: .65; }
.dash-hero-orb-3 { width: 80px;  height: 80px;  top: 10px;   right: 200px; opacity: .35; }
.dash-hero-left  { min-width: 0; }
.dash-hero-greet {
  display: flex; align-items: center; gap: .55rem;
  font-size: 1.35rem; font-weight: 600; color: white; line-height: 1.2;
}
.dash-hero-icon {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  background: rgba(116,255,224,.14);
  display: flex; align-items: center; justify-content: center;
  color: var(--cyan);
}
.dash-hero-icon svg { width: 18px; height: 18px; }
.dash-hero-meta {
  display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
  margin-top: .42rem; font-size: .78rem; color: rgba(255,255,255,.55);
}
.dash-hero-sep { color: rgba(255,255,255,.25); }
.dash-hero-sprint {
  color: var(--cyan); font-weight: 500;
  display: inline-flex; align-items: center; gap: .3rem;
}
.dash-hero-sprint-gate { color: #FCD34D; }
.dash-hero-right { flex-shrink: 0; }
.dash-hero .btn-ghost {
  color: rgba(255,255,255,.82); border-color: rgba(255,255,255,.25);
  background: rgba(255,255,255,.07);
}
.dash-hero .btn-ghost:hover {
  background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.42); color: white;
}

/* ── DASHBOARD — STAT CARD MODULE ACCENTS + ICONS ───────────────────────── */
.dash-stat-card { cursor: pointer; }
.dsc-icon {
  position: absolute; top: .88rem; right: .88rem;
  width: 30px; height: 30px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,49,202,.07); color: var(--cobalt);
}
.dsc-icon svg { width: 14px; height: 14px; }
.dsc-social .dsc-icon    { background: rgba(0,49,202,.07); color: var(--cobalt); }
.dsc-editorial .dsc-icon { background: rgba(0,49,202,.07); color: var(--cobalt); }
.dsc-paid .dsc-icon      { background: rgba(0,49,202,.07); color: var(--cobalt); }
.dsc-events .dsc-icon    { background: rgba(0,49,202,.07); color: var(--cobalt); }

/* ── DASHBOARD — AREA SECTION MODULE ACCENTS ────────────────────────────── */
.as-campaigns { border-left: 3px solid var(--cobalt); }
.as-social    { border-left: 3px solid var(--cobalt); }
.as-editorial { border-left: 3px solid var(--cobalt); }
.as-paid      { border-left: 3px solid var(--cobalt); }
.as-events    { border-left: 3px solid var(--cobalt); }
.as-compliance { border-left: 3px solid var(--cyan); }

/* ── DASHBOARD — SECTION HEADER ICON ────────────────────────────────────── */
.ash-left { display: flex; align-items: flex-start; gap: .65rem; }
.ash-icon {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  margin-top: .05rem;
}
.ash-icon svg { width: 15px; height: 15px; }
.as-campaigns .ash-icon { background: rgba(0,49,202,.08); color: var(--cobalt); }
.as-social    .ash-icon { background: rgba(0,49,202,.08); color: var(--cobalt); }
.as-editorial .ash-icon { background: rgba(0,49,202,.08); color: var(--cobalt); }
.as-paid      .ash-icon { background: rgba(0,49,202,.08); color: var(--cobalt); }
.as-events    .ash-icon { background: rgba(0,49,202,.08); color: var(--cobalt); }
.as-compliance .ash-icon { background: rgba(116,255,224,.12); color: #0D9488; }

/* ── DASHBOARD — F1 COMPLIANCE REDESIGN ─────────────────────────────────── */
.dash-compliance-body {
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
}
.compliance-ring-lg {
  width: 72px; height: 72px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.05rem;
  border: 5px solid var(--border);
}
.compliance-ring-lg.success { border-color: #10B981; color: #065F46; }
.compliance-ring-lg.warn    { border-color: #F59E0B; color: #92400E; }
.compliance-ring-lg.danger  { border-color: #EF4444; color: #991B1B; }
.dash-compliance-modules {
  flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: .55rem;
}
.comp-module-row   { display: flex; align-items: center; gap: .6rem; }
.comp-module-label { font-size: .76rem; color: var(--text-muted); min-width: 76px; white-space: nowrap; }
.comp-bar  { flex: 1; height: 6px; background: var(--border); border-radius: 99px; overflow: hidden; }
.comp-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, #0031CA, #74FFE0); transition: width .6s cubic-bezier(.4,0,.2,1); }
.comp-fill.c-social    { background: linear-gradient(90deg, #0031CA, #74FFE0); }
.comp-fill.c-editorial { background: linear-gradient(90deg, #0031CA, #74FFE0); }
.comp-module-count { font-size: .74rem; font-weight: 600; color: var(--text); min-width: 36px; text-align: right; white-space: nowrap; }

/* ── DARK MODE ──────────────────────────────────────────────────────────────── */
[data-theme="dark"] {
  --bg:          #0B0F18;   /* page background — deepest level */
  --surface:     #141C2B;   /* card surface    — one step up   */
  --surface-2:   #1B2438;   /* elevated (modal, popover)       */
  --border:      #242E42;
  --text:        #E1E7F0;
  --text-muted:  #7E8DA8;
  --cobalt:      #4D80FF;
  --cobalt-dark: #3A6EF0;
  --shadow:      0 2px 12px rgba(0,0,0,.55);
  --shadow-md:   0 6px 28px rgba(0,0,0,.65);
  --c-done:      #34D399;
  --c-blocked:   #F87171;
}
[data-theme="dark"] body { background: var(--bg); }
/* data-table dark overrides consolidated below in the comprehensive block */
[data-theme="dark"] .task-card,
[data-theme="dark"] .camp-card,
[data-theme="dark"] .del-card { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .area-item:hover { background: #1A2035; }
[data-theme="dark"] .area-item.next-up { background: #1A2B4A; border-color: var(--cobalt); }
[data-theme="dark"] .dash-camp-row { background: var(--bg); border-color: var(--border); }
[data-theme="dark"] .dash-camp-row:hover { background: #1A2B4A; border-color: #2D4B8C; }
[data-theme="dark"] .modal { background: var(--surface-2, #1B2438); }
[data-theme="dark"] .modal-header { background: var(--surface-2, #1B2438); border-color: var(--border); }
[data-theme="dark"] .form-group input,
[data-theme="dark"] .form-group select,
[data-theme="dark"] .form-group textarea { background: var(--bg); color: var(--text); border-color: var(--border); }
[data-theme="dark"] .filter-bar input,
[data-theme="dark"] .filter-bar select { background: var(--bg); color: var(--text); border-color: var(--border); }
[data-theme="dark"] .month-tab { background: var(--surface); border-color: var(--border); color: var(--text-muted); }
[data-theme="dark"] .month-tab.active { background: var(--cobalt); color: #fff; border-color: var(--cobalt); }
[data-theme="dark"] .sub-nav { background: var(--bg); border-color: var(--border); }
[data-theme="dark"] .sub-nav-btn.active { background: var(--surface); color: var(--cobalt); }
[data-theme="dark"] .kpi-card,
[data-theme="dark"] .gate-card,
[data-theme="dark"] .sprint-item-card,
[data-theme="dark"] .sprint-month-col { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .gate-card.gate-urgent  { border-color: rgba(77,128,255,.3); }
[data-theme="dark"] .gate-card.gate-overdue { border-color: rgba(239,68,68,.3); }
[data-theme="dark"] .sprint-f1-card { background: var(--surface); }
[data-theme="dark"] .sprint-f1-card:hover { background: #1A2035; }
[data-theme="dark"] .sprint-gate-card { background: var(--surface); border-left-color: rgba(77,128,255,.3); }
[data-theme="dark"] .cd-overview-card,
[data-theme="dark"] .cd-pipeline-section { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .cd-overview-divider { background: var(--border); }
[data-theme="dark"] .cd-chip-vert { background: #1A2B4A; color: #90BAF9; }
[data-theme="dark"] .cd-chip-pers { background: #221A40; color: #C4B5FD; }
[data-theme="dark"] .dash-stat-card { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .dash-stat-card:hover { border-color: #3A4D6E; }
[data-theme="dark"] .dash-stat-card.dsc-alert { background: #1F1018; border-color: #7F1D1D; }
[data-theme="dark"] .view-toggle button:hover { background: rgba(255,255,255,.07); color: var(--text); }
[data-theme="dark"] .f1-progress-panel { background: var(--surface); border-color: var(--border); }
/* settings-section dark overrides consolidated in the comprehensive block below */
[data-theme="dark"] .settings-code { background: var(--bg); color: var(--text); border-color: var(--border); }
[data-theme="dark"] .settings-sql-toggle { border-color:var(--border); }
[data-theme="dark"] .settings-sql-toggle:hover { background:var(--bg); }
[data-theme="dark"] .ff-icon { background:#1A2035; border-color:var(--border); }
[data-theme="dark"] .ff-active .ff-icon { background:rgba(5,150,105,.15); border-color:rgba(5,150,105,.25); }
[data-theme="dark"] .settings-inline-code { background:var(--bg); border-color:var(--border); }
[data-theme="dark"] .btn-ghost { border-color: var(--border); color: var(--text-muted); }
[data-theme="dark"] .btn-ghost:hover { background: rgba(255,255,255,.06); border-color: #4D6A9A; color: var(--text); }
[data-theme="dark"] .btn-secondary { background: var(--surface); border-color: var(--cobalt); color: var(--cobalt); }
[data-theme="dark"] .toast-info    { background: #1A2B4A; color: #93C5FD; border-color: #2D4B8C; }
[data-theme="dark"] .toast-success { background: #0D2B1C; color: #6EE7B7; border-color: #065F46; }
[data-theme="dark"] .toast-error   { background: #2B0D0D; color: #FCA5A5; border-color: #991B1B; }
[data-theme="dark"] .kanban-col    { background: #1A2035; border-color: var(--border); }
[data-theme="dark"] .camp-card:hover { border-color: #4D6A9A; }
[data-theme="dark"] .add-task-inline { border-color: var(--border); color: var(--text-muted); }
[data-theme="dark"] .add-task-inline:hover { background: var(--surface); color: var(--cobalt); }
[data-theme="dark"] .view-toggle { background: var(--bg); border-color: var(--border); }
[data-theme="dark"] #chat-panel { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .chat-bubble { background: #1A2035; color: var(--text); }
[data-theme="dark"] .chat-mine .chat-bubble { background: #1A2B4A; }
[data-theme="dark"] #chat-input { background: var(--bg); color: var(--text); border-color: var(--border); }
[data-theme="dark"] .area-section { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .summary-stat-card { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .activity-entry { background: #1A2035; }
[data-theme="dark"] .activity-entry:hover { background: #1A2B4A; border-color: var(--border); }

/* ── SIDEBAR ICON BUTTONS ────────────────────────────────────────────────── */
.sidebar-icon-btn {
  background: none; border: none; cursor: pointer;
  padding: .2rem .35rem; font-size: .9rem; line-height: 1;
  border-radius: 4px; color: rgba(255,255,255,.55);
  transition: color .15s, background .15s;
}
.sidebar-icon-btn:hover { color: #fff; background: rgba(255,255,255,.1); }

/* ── CMD+K SEARCH OVERLAY ─────────────────────────────────────────────────── */
.cmd-k-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(6,28,34,.65); backdrop-filter: blur(4px);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 12vh;
}
.cmd-k-overlay.hidden { display: none; }
.cmd-k-modal {
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: 14px; width: 100%; max-width: 580px;
  box-shadow: 0 24px 80px rgba(0,0,0,.35); overflow: hidden;
  animation: cmdKIn .12s ease-out;
}
@keyframes cmdKIn {
  from { opacity: 0; transform: scale(.97) translateY(-8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.cmd-k-input-wrap {
  display: flex; align-items: center; gap: .75rem;
  padding: .9rem 1.1rem; border-bottom: 1px solid var(--border);
}
.cmd-k-search-icon { flex-shrink: 0; color: var(--text-muted); }
#cmd-k-input {
  flex: 1; border: none; outline: none; font-size: 1rem;
  background: transparent; color: var(--text);
  font-family: 'Roobert','Inter',sans-serif;
}
#cmd-k-input::placeholder { color: var(--text-muted); }
.cmd-k-esc-badge {
  font-family: monospace; font-size: .72rem;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 4px; padding: .15rem .45rem;
  color: var(--text-muted); white-space: nowrap; flex-shrink: 0;
}
.cmd-k-results { max-height: 360px; overflow-y: auto; padding: .4rem 0; }
.cmd-k-section-label {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-muted); padding: .5rem 1.1rem .25rem; font-weight: 600;
}
.cmd-k-result-item {
  display: flex; align-items: center; gap: .75rem;
  padding: .6rem 1.1rem; cursor: pointer; transition: background .08s;
}
.cmd-k-result-item:hover,
.cmd-k-result-item.cmd-k-focused { background: rgba(0,49,202,.08); }
[data-theme="dark"] .cmd-k-result-item:hover,
[data-theme="dark"] .cmd-k-result-item.cmd-k-focused { background: rgba(77,128,255,.14); }
.cmd-k-result-icon { font-size: .95rem; flex-shrink: 0; width: 22px; text-align: center; }
.cmd-k-result-text { min-width: 0; }
.cmd-k-result-label {
  font-size: .875rem; color: var(--text); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cmd-k-result-sub   { font-size: .75rem; color: var(--text-muted); margin-top: .05rem; }
.cmd-k-empty { padding: 1.75rem; text-align: center; color: var(--text-muted); font-size: .875rem; }
[data-theme="dark"] .cmd-k-modal { background: #161B27; border-color: #252D40; }
[data-theme="dark"] #cmd-k-input { color: #E1E7F0; }
[data-theme="dark"] .cmd-k-esc-badge { background: #0E1117; border-color: #252D40; }

/* ── QUICK-ADD FAB ────────────────────────────────────────────────────────── */
.quick-add-fab-wrap {
  position: static;
  display: contents; /* participates in #fab-bar flex */
}
.quick-add-fab-wrap.hidden { display: none; }
.quick-add-btn {
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,.15);
  color: #fff; border: none;
  font-size: 1.45rem; font-weight: 300; line-height: 1;
  box-shadow: none;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .15s, transform .15s;
}
.quick-add-btn:hover { background: rgba(116,255,224,.2); color: #74FFE0; transform: scale(1.1); }
#qa-plus-icon { display: block; transition: transform .2s cubic-bezier(.4,0,.2,1); }
.quick-add-menu {
  position: fixed; bottom: 5.5rem; right: 1.5rem; z-index: 520;
  display: flex; flex-direction: column; gap: .35rem;
  background: #061C22;
  border: 1px solid rgba(116,255,224,.15);
  border-radius: 16px; padding: .6rem;
  box-shadow: 0 12px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(116,255,224,.08);
  animation: qaMenuIn .18s cubic-bezier(.2,0,.2,1);
  min-width: 200px;
}
.quick-add-menu.hidden { display: none; }
@keyframes qaMenuIn {
  from { opacity: 0; transform: translateY(12px) scale(.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.qa-option {
  display: flex; align-items: center; gap: .75rem;
  background: transparent; color: #fff;
  border: none; border-radius: 10px;
  padding: .6rem .85rem; font-size: .85rem; font-weight: 500;
  cursor: pointer; white-space: nowrap; text-align: left;
  transition: background .12s, transform .12s;
  position: relative;
}
.qa-option:hover {
  background: rgba(116,255,224,.1);
  transform: translateX(-2px);
}
.qa-option:hover .qa-option-icon svg { color: #74FFE0; }
.qa-option-icon {
  width: 32px; height: 32px; border-radius: 8px;
  background: rgba(255,255,255,.07);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background .12s;
  color: rgba(255,255,255,.8);
}
.qa-option:hover .qa-option-icon {
  background: rgba(116,255,224,.15);
  color: #74FFE0;
}
.qa-option-label { display: flex; flex-direction: column; }
.qa-option-label strong { font-weight: 500; font-size: .84rem; line-height: 1.2; }
.qa-option-label span { font-size: .72rem; color: rgba(255,255,255,.45); line-height: 1.2; margin-top: .1rem; }
.qa-menu-divider { height: 1px; background: rgba(255,255,255,.08); margin: .2rem .1rem; }
/* Light mode — keep menu dark regardless of theme (same pattern as True Pro panel) */
[data-theme="light"] .quick-add-menu {
  background: #061C22;
  border-color: rgba(116,255,224,.15);
}
[data-theme="light"] .qa-option { color: #fff; }
[data-theme="light"] .qa-option-label span { color: rgba(255,255,255,.45); }

/* ── MEETING MODE ─────────────────────────────────────────────────────────── */
body.meeting-mode #sidebar          { transform: translateX(-100%); transition: transform .25s ease; }
body.meeting-mode #content          { margin-left: 0; max-width: 100vw; padding-top: 1.75rem !important; }
body.meeting-mode #team-clock-bar   { display: none !important; }
body.meeting-mode #app-top-bar      { display: none !important; }
body.meeting-mode .view-actions     { display: none !important; }
body.meeting-mode .camp-card-edit,
body.meeting-mode .camp-card-clone,
body.meeting-mode .del-delete,
body.meeting-mode .sprint-card-edit { display: none !important; }
body.meeting-mode #fab-bar { opacity: .25; pointer-events: none; }

#meeting-exit-btn {
  display: none; position: fixed; top: 1rem; right: 1rem; z-index: 300;
  background: var(--cobalt); color: #fff; border: none;
  padding: .5rem 1rem; border-radius: 8px; font-size: .82rem; font-weight: 600;
  cursor: pointer; gap: .4rem; align-items: center;
  box-shadow: 0 2px 10px rgba(0,49,202,.35);
  transition: background .15s;
}
#meeting-exit-btn:hover { background: var(--cobalt-dark); }
body.meeting-mode #meeting-exit-btn { display: flex !important; }

/* ── (week strip removed) ────────────────────────────────────────────────── */
.week-strip {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 1.25rem;
  overflow: hidden;
  transition: box-shadow .15s;
}
.week-strip:hover { box-shadow: 0 2px 10px rgba(0,0,0,.07); }

.week-strip-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1rem;
  cursor: pointer;
  user-select: none;
  gap: .75rem;
}
.week-strip-header:hover { background: var(--bg); }

.week-strip-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  font-size: .875rem;
  color: var(--text);
}
.wk-icon { font-size: 1rem; }

.week-range-label {
  font-size: .78rem;
  color: var(--text-muted);
  font-weight: 400;
}

.wk-badge {
  font-size: .7rem;
  font-weight: 600;
  border-radius: 999px;
  padding: .15rem .55rem;
  letter-spacing: .02em;
}
.wk-overdue { background: #FEE2E2; color: #B91C1C; }
.wk-today   { background: #FEF3C7; color: #92400E; }
.wk-count   { background: var(--bg); color: var(--text-muted); border: 1px solid var(--border); }

.week-chevron {
  flex-shrink: 0;
  color: var(--text-muted);
  transition: transform .2s ease;
}
.week-chevron.open { transform: rotate(180deg); }

.week-strip-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: .5rem;
  padding: 0 .75rem .75rem;
}
.week-strip-items.hidden { display: none; }

.week-item {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .55rem .7rem;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--bg);
  cursor: pointer;
  transition: border-color .15s, background .15s;
  position: relative;
}
.week-item:hover { border-color: var(--cobalt); background: #f0f4ff; }
.urg-overdue { border-left: 3px solid #EF4444 !important; }
.urg-today   { border-left: 3px solid #F59E0B !important; }
.urg-week    { border-left: 3px solid var(--cobalt) !important; }

.week-item-icon { font-size: .95rem; flex-shrink: 0; margin-top: .05rem; }

.week-item-text { flex: 1; min-width: 0; }
.week-item-label {
  font-size: .8rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.week-item-sub {
  font-size: .72rem;
  color: var(--text-muted);
  margin-top: .15rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wk-urg-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: .3rem;
}
.wk-dot-overdue { background: #EF4444; }
.wk-dot-today   { background: #F59E0B; }
.wk-dot-week    { background: var(--cobalt); }

/* ── CAMPAIGN CLONE BUTTON ───────────────────────────────────────────────── */
.camp-card-actions {
  display: flex;
  align-items: center;
  gap: .15rem;
}
.camp-card-clone {
  background: none;
  border: none;
  padding: .2rem .35rem;
  border-radius: 5px;
  font-size: .85rem;
  cursor: pointer;
  color: var(--text-muted);
  opacity: 0;
  transition: opacity .15s, background .15s;
  line-height: 1;
  letter-spacing: -.02em;
}
.camp-card:hover .camp-card-clone,
.camp-card:hover .camp-card-edit  { opacity: 1; }
.camp-card-clone:hover { background: var(--bg); color: var(--cobalt); }

/* ── ACTIVITY FEED ───────────────────────────────────────────────────────── */
.dash-activity-section { grid-column: 1 / -1; }

/* Table layout */
.act-log-table {
  width: 100%;
  display: table;
  border-collapse: collapse;
}
.act-log-row {
  display: table-row;
  border-bottom: 1px solid var(--border);
  transition: background .12s;
  cursor: default;
}
.act-log-row:last-child { border-bottom: none; }
.act-log-row:hover { background: var(--bg); }

.act-log-row > * {
  display: table-cell;
  padding: .55rem .85rem;
  vertical-align: middle;
  font-size: .8rem;
  white-space: nowrap;
}

/* Badge col */
.act-badge {
  display: inline-block;
  padding: .18rem .52rem;
  border-radius: 4px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Record type col */
.act-log-type {
  color: var(--text-muted);
  font-size: .75rem;
  white-space: nowrap;
  min-width: 90px;
}

/* Record name col */
.act-log-name {
  color: var(--text);
  font-weight: 500;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Changed fields col */
.act-log-changes {
  width: 100%;   /* takes remaining space */
  white-space: normal;
}
.act-diff-pill {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: .1rem .42rem;
  font-size: .7rem;
  margin: .15rem .2rem .15rem 0;
}
.act-diff-field {
  color: var(--text-muted);
  font-weight: 500;
}
.act-diff-arrow {
  color: var(--text-muted);
  font-size: .65rem;
}
.act-diff-to {
  color: var(--text);
  font-weight: 600;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Who col */
.act-log-who {
  color: var(--text-muted);
  font-size: .75rem;
  white-space: nowrap;
  min-width: 100px;
}

/* When col */
.act-log-when {
  color: var(--text-muted);
  font-size: .72rem;
  text-align: right;
  white-space: nowrap;
  padding-right: 1rem !important;
  min-width: 70px;
}

/* Empty state */
.act-log-empty {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: 1.5rem 1rem;
  color: var(--text-muted);
  font-size: .82rem;
}
.act-log-empty svg { flex-shrink: 0; opacity: .45; }

/* ── WEEKLY DIGEST BUTTON ────────────────────────────────────────────────── */
.digest-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .78rem;
}

/* ── ONBOARDING MODAL ────────────────────────────────────────────────────── */
.onboard-wrap { min-width: 520px; }
@media (max-width: 600px) { .onboard-wrap { min-width: 0; } }

.onboard-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border);
}
.onboard-logo {
  background: #f0f4ff;
  border-radius: 10px;
  padding: .6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.onboard-sections { padding: 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 1.25rem; }

.onboard-nav-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .6rem;
}
@media (max-width: 560px) { .onboard-nav-grid { grid-template-columns: repeat(2, 1fr); } }

.onboard-nav-item {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: .75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  color: var(--text);
}
.onboard-nav-item:hover { border-color: var(--cobalt); background: #f0f4ff; }
.onboard-nav-item svg { color: var(--cobalt); margin-bottom: .15rem; }
.onboard-nav-item strong { font-size: .82rem; }
.onboard-nav-item span { font-size: .72rem; color: var(--text-muted); line-height: 1.4; }

.onboard-section-label {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted);
  margin: 0 0 .5rem;
}

.onboard-tools-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .6rem;
}
@media (max-width: 600px) { .onboard-tools-grid { grid-template-columns: repeat(2, 1fr); } }

.onboard-tool-item {
  display: flex;
  flex-direction: column;
  gap: .22rem;
  padding: .65rem .75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
}
.onboard-tool-item svg { color: var(--cobalt); margin-bottom: .1rem; flex-shrink: 0; }
.onboard-tool-item strong { font-size: .78rem; }
.onboard-tool-item span { font-size: .69rem; color: var(--text-muted); line-height: 1.45; }
.onboard-tool-clickable {
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.onboard-tool-clickable:hover {
  border-color: var(--cobalt);
  background: #f0f4ff;
}
.onboard-tool-clickable:hover strong { color: var(--cobalt); }
[data-theme="dark"] .onboard-tool-clickable:hover { background: rgba(0,49,202,.15); }

/* ── ONBOARDING SPOTLIGHT ───────────────────────────────────────────────────── */
@keyframes onboard-spotlight-pulse {
  0%   { box-shadow: 0 0 0 2px #6EFF3A, 0 0 0 2px  rgba(110,255,58,.8); }
  55%  { box-shadow: 0 0 0 2px #6EFF3A, 0 0 0 26px rgba(110,255,58,.0); }
  100% { box-shadow: 0 0 0 2px #6EFF3A, 0 0 0 2px  rgba(110,255,58,.8); }
}
.onboard-spotlight-ring {
  animation: onboard-spotlight-pulse 1.5s ease-out 3;
}

.onboard-tips {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .5rem;
}
.onboard-tip {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .78rem;
  color: var(--text-muted);
  padding: .5rem .75rem;
  background: var(--bg);
  border-radius: 7px;
  border: 1px solid var(--border);
}
.onboard-tip kbd {
  font-size: .72rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: .1rem .4rem;
  font-family: monospace;
  font-weight: 700;
  color: var(--cobalt);
  flex-shrink: 0;
}
.onboard-tip svg { flex-shrink: 0; color: var(--cobalt); }

/* ── CMD-K SVG ICON ALIGNMENT ────────────────────────────────────────────── */
.cmd-k-svg-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  opacity: .75;
}
.cmd-k-result-item.cmd-k-focused .cmd-k-svg-icon { opacity: 1; }

/* ── DARK MODE ADDITIONS ─────────────────────────────────────────────────── */
[data-theme="dark"] .tb-search              { border-color: rgba(255,255,255,.18); }
[data-theme="dark"] .camp-card-clone:hover  { background: rgba(0,49,202,.2); }
[data-theme="dark"] .onboard-nav-item:hover { background: rgba(0,49,202,.15); }
[data-theme="dark"] .onboard-logo          { background: rgba(0,49,202,.15); }

/* ── DARK MODE — COMPREHENSIVE TEXT & SURFACE FIXES ─────────────────────── */

/* Chart / donut cards */
[data-theme="dark"] .chart-card { background: var(--surface); border-color: var(--border); box-shadow: 0 2px 12px rgba(0,0,0,.18); }
[data-theme="dark"] .chart-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,.28); }
[data-theme="dark"] .chart-card-title,
[data-theme="dark"] .chart-title { color: var(--text-muted); }
[data-theme="dark"] .legend-label,
[data-theme="dark"] .legend-val  { color: var(--text); }
[data-theme="dark"] .legend-pct,
[data-theme="dark"] .legend-target { color: var(--text-muted); }
[data-theme="dark"] .donut-track { stroke: rgba(255,255,255,.08); }
[data-theme="dark"] .donut-empty-track { stroke: var(--border); }

/* Multi-select and multi-check — already use CSS variables; dark mode shadow tweak only */
[data-theme="dark"] .multi-select-dropdown { box-shadow: 0 8px 32px rgba(0,0,0,.55); }
[data-theme="dark"] .multi-select-dropdown label:hover { color: #74FFE0 !important; }
[data-theme="dark"] .multi-check-list label:hover,
[data-theme="dark"] .form-group .multi-check-list label:hover { color: #74FFE0 !important; }

/* Sprint plan cards */
[data-theme="dark"] .sprint-gate-card        { background: var(--surface); border-left-color: rgba(77,128,255,.3); }
[data-theme="dark"] .sprint-gate-card:hover  { background: rgba(116,255,224,.05); border-left-color: rgba(77,128,255,.55); }
[data-theme="dark"] .sprint-item-desc        { color: var(--text); }
[data-theme="dark"] .sprint-item-dates       { color: var(--text-muted); }
[data-theme="dark"] .sprint-item-owner       { color: var(--text-muted); }
[data-theme="dark"] .swb-f1                  { background: rgba(77,128,255,.2); color: var(--cyan); }
[data-theme="dark"] .swb-gate                { background: rgba(77,128,255,.2); color: var(--cobalt); }
[data-theme="dark"] .sprint-add-btn          { border-color: var(--border); color: var(--text-muted); }
[data-theme="dark"] .sprint-add-btn:hover    { border-color: var(--cobalt); color: var(--cobalt); background: rgba(0,49,202,.12); }
[data-theme="dark"] .sprint-month-body.sprint-drop-over { background: rgba(0,49,202,.15); outline-color: var(--cobalt); }

/* Gantt chart */
[data-theme="dark"] .gantt-row               { border-color: var(--border); }
[data-theme="dark"] .gantt-row-lbl           { background: var(--surface); color: var(--text); border-right-color: var(--border); }
[data-theme="dark"] .gantt-wk-hdr            { background: #1A2035; color: var(--text-muted); border-color: var(--border); }
[data-theme="dark"] .gantt-wk-dates          { color: var(--text-muted); }
[data-theme="dark"] .gantt-cell-empty        { background: #0E1117; border-color: var(--border); }
[data-theme="dark"] .gantt-cell-filled       { border-color: var(--border); }
[data-theme="dark"] .gantt-lbl-edit:hover    { background: rgba(0,49,202,.15); }
[data-theme="dark"] .gantt-cell-add          { color: var(--border); }
[data-theme="dark"] .gantt-cell-add:hover    { background: rgba(0,49,202,.15); color: var(--cobalt); }
[data-theme="dark"] .gl-item                 { color: var(--text-muted); }

/* Gate / KPI grid */
[data-theme="dark"] .gate-grid-card   { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .gate-grid-card:hover { border-color: rgba(77,128,255,.25); }
[data-theme="dark"] .gate-grid-title  { color: var(--text); }
[data-theme="dark"] .gate-grid-desc   { color: var(--text-muted); }
[data-theme="dark"] .gg-urgent        { border-color: rgba(239,68,68,.25); }
[data-theme="dark"] .gg-urgent .gate-grid-sub { color: #FCA5A5; }
[data-theme="dark"] .ggb-done    { background: rgba(116,255,224,.12); color: var(--cyan); }
[data-theme="dark"] .ggb-urgent  { background: rgba(239,68,68,.15);   color: #FCA5A5; }
[data-theme="dark"] .ggb-prepare { background: rgba(77,128,255,.15);  color: #93C5FD; }
[data-theme="dark"] .ggc-urgent  { background: rgba(239,68,68,.15); color: #FCA5A5; border-color: rgba(239,68,68,.3); }

/* Alert & summary banners */
[data-theme="dark"] .alert-banner.warn    { background: #0C2640; color: #7DD3FC;  border-color: #1E4D7A; }
[data-theme="dark"] .alert-banner.danger  { background: #2B0D0D; color: #FCA5A5;  border-color: #7F1D1D; }
[data-theme="dark"] .alert-banner.info    { background: #0C2620; color: #6EE7B7;  border-color: #0D5240; }
[data-theme="dark"] .summary-alert        { background: #0C2640; color: #7DD3FC;  border-color: #1E4D7A; }
[data-theme="dark"] .summary-ok-banner    { background: #0D2B1C; color: #6EE7B7;  border-color: #065F46; }

/* Data table & event rows */
[data-theme="dark"] .data-table               { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .data-table th            { background: var(--bg); color: var(--text-muted); border-color: var(--border); }
[data-theme="dark"] .data-table td            { border-color: var(--border); }
[data-theme="dark"] .data-table tr.clickable:hover td { background: rgba(116,255,224,.05); }
[data-theme="dark"] .settings-section         { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .settings-section:hover   { border-color: var(--border); box-shadow: none; }
[data-theme="dark"] .evt-row     { background: var(--surface); }
[data-theme="dark"] .evt-row:hover { background: #1A2035; }

/* Area stats */
[data-theme="dark"] .area-stat.todo { background: #1A2035; color: var(--text); }

/* Modal header */
[data-theme="dark"] .modal-header h3 { color: var(--text); }

/* Campaign / deliverable text */
[data-theme="dark"] .del-card-name           { color: var(--text); }
[data-theme="dark"] .camp-section-header h3  { color: var(--text); }
[data-theme="dark"] .deliverables-header h4  { color: var(--text); }
[data-theme="dark"] .cd-f1-badge.f1-warn     { background: rgba(217,119,6,.15); color: #FCD34D; border-color: rgba(217,119,6,.4); }

/* ── DARK MODE — DASHBOARD REDESIGN ─────────────────────────────────────── */
[data-theme="dark"] .dash-hero { background: linear-gradient(135deg, #020B18 0%, #061C2E 55%, #0022A0 100%); }
[data-theme="dark"] .dash-stat-card .dsc-icon  { background: rgba(0,49,202,.15); color: #6B9FFF; }
[data-theme="dark"] .dsc-social .dsc-icon      { background: rgba(0,49,202,.15); color: #6B9FFF; }
[data-theme="dark"] .dsc-editorial .dsc-icon   { background: rgba(0,49,202,.15); color: #6B9FFF; }
[data-theme="dark"] .dsc-paid .dsc-icon        { background: rgba(0,49,202,.15); color: #6B9FFF; }
[data-theme="dark"] .dsc-events .dsc-icon      { background: rgba(0,49,202,.15); color: #6B9FFF; }
[data-theme="dark"] .as-social    { border-left-color: var(--cobalt); }
[data-theme="dark"] .as-editorial { border-left-color: var(--cobalt); }
[data-theme="dark"] .as-paid      { border-left-color: var(--cobalt); }
[data-theme="dark"] .as-events    { border-left-color: var(--cobalt); }
[data-theme="dark"] .as-compliance { border-left-color: var(--cyan); }
[data-theme="dark"] .as-social    .ash-icon { color: var(--cobalt); background: rgba(0,49,202,.12); }
[data-theme="dark"] .as-editorial .ash-icon { color: var(--cobalt); background: rgba(0,49,202,.12); }
[data-theme="dark"] .as-paid      .ash-icon { color: var(--cobalt); background: rgba(0,49,202,.12); }
[data-theme="dark"] .as-events    .ash-icon { color: var(--cobalt); background: rgba(0,49,202,.12); }
[data-theme="dark"] .as-compliance .ash-icon { color: #2DD4BF; background: rgba(45,212,191,.1); }
[data-theme="dark"] .compliance-ring-lg.success { border-color: #34D399; color: #A7F3D0; }
[data-theme="dark"] .compliance-ring-lg.warn    { border-color: #FCD34D; color: #FDE68A; }
[data-theme="dark"] .compliance-ring-lg.danger  { border-color: #F87171; color: #FCA5A5; }

/* Area stat chips — dark mode */
[data-theme="dark"] .area-stat-chip { background: rgba(255,255,255,.04); border-color: var(--border); }

/* F1 progress panel & Gantt legend */
[data-theme="dark"] .f1-progress-title { color: var(--text); }
[data-theme="dark"] .f1-progress-panel { border-color: var(--border); }

/* View/page title headings */
[data-theme="dark"] .view-header h2 {
  /* Dark mode: white → cyan gradient */
  background: linear-gradient(135deg, #FFFFFF 0%, #74FFE0 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
[data-theme="dark"] .summary-row-value { color: var(--text); }

/* ── OWNER CHIPS ──────────────────────────────────────────────────────────── */
.owner-chips { display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.25rem; }
.owner-chip {
  display:flex; align-items:center; gap:.3rem;
  padding:.2rem .65rem; border:1.5px solid var(--border); border-radius:20px;
  font-size:.78rem; cursor:pointer; background:var(--bg);
  transition:background .12s, border-color .12s, color .12s; user-select:none;
}
.owner-chip:hover { border-color:var(--accent); }
.owner-chip.checked { background:var(--accent); color:#fff; border-color:var(--accent); }
.owner-chip.disabled-chip { cursor:default; pointer-events:none; opacity:.65; }
.owner-chip input[type=checkbox] { display:none; }
.owner-chips.disabled .owner-chip { cursor:default; pointer-events:none; }

/* ── TEAM OVERVIEW (dashboard) ───────────────────────────────────────────── */
.team-overview-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:.6rem; margin-top:.75rem;
}
.team-card {
  display:flex; align-items:center; gap:.75rem;
  background:var(--bg); border:1px solid var(--border); border-radius:10px;
  padding:.7rem .9rem;
}
.team-card-avatar {
  width:2.2rem; height:2.2rem; border-radius:50%;
  background:var(--accent); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:.78rem; font-weight:700; flex-shrink:0;
}
.team-card-body { flex:1; min-width:0; }
.team-card-name { font-size:.82rem; font-weight:600; color:var(--text); margin-bottom:.25rem; }
.team-card-badges { display:flex; flex-wrap:wrap; gap:.25rem; }
.team-card-badge {
  font-size:.7rem; font-weight:600; padding:.1rem .45rem; border-radius:12px;
}
.team-card-badge.camp  { background:rgba(0,49,202,.12); color:#0031CA; }
.team-card-badge.event { background:rgba(5,150,105,.12); color:#059669; }
.team-card-badge.paid  { background:rgba(217,119,6,.12); color:#D97706; }
.team-card-badge.blog  { background:rgba(124,58,237,.12); color:#7C3AED; }
.team-card-badge.social{ background:rgba(14,165,233,.12); color:#0EA5E9; }
.team-card-empty { font-size:.75rem; color:var(--text-muted); }
.team-card-count {
  font-size:1.1rem; font-weight:700; color:var(--text-muted);
  flex-shrink:0; min-width:1.5rem; text-align:right;
}
[data-theme="dark"] .team-card { background:var(--surface); }
[data-theme="dark"] .team-card-badge.camp  { background:rgba(0,49,202,.22); color:#93C5FD; }
[data-theme="dark"] .team-card-badge.event { background:rgba(5,150,105,.22); color:#6EE7B7; }
[data-theme="dark"] .team-card-badge.paid  { background:rgba(217,119,6,.22); color:#FCD34D; }
[data-theme="dark"] .team-card-badge.blog  { background:rgba(124,58,237,.22); color:#C4B5FD; }
[data-theme="dark"] .team-card-badge.social{ background:rgba(14,165,233,.22); color:#7DD3FC; }

/* ── AGENTIC AUTOMATION ──────────────────────────────────────────────────── */
/* ── AGENTIC MODULE ──────────────────────────────────────────────────────── */
.agentic-section-hdr {
  display:flex; justify-content:space-between; align-items:center;
  cursor:pointer; gap:.5rem; padding:.2rem 0;
}
.agentic-section-hdr:hover { opacity:.85; }
.agentic-section-hdr h3 { margin:0; font-size:1rem; font-weight:700; letter-spacing:-.01em; }
.agentic-collapse-btn { padding:.2rem .4rem; }

/* Agentic info cards — Note / Executive Summary (replaces callout-banner) */
.agentic-info-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
  transition: box-shadow .18s, border-color .18s;
}
.agentic-info-card:hover {
  box-shadow: 0 4px 16px rgba(0,49,202,.06);
  border-color: rgba(0,49,202,.18);
}
.agentic-info-card-hdr {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: .1rem;
}
.agentic-info-card-label {
  font-size: .65rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--cobalt);
}
[data-theme="dark"] .agentic-info-card { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .agentic-info-card-label { color: var(--cyan); }

/* Agentic content cards — clean, no accent borders */
.agentic-card {
  background: var(--surface);
}
.agentic-card .agentic-section-hdr h3 { color: var(--text); }

/* Roadmap Progress — integrates with page, no dark island */
.agentic-tracker-section {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  padding: 1.4rem 1.5rem 1.25rem !important;
  position: relative; overflow: hidden;
}
/* Gradient top accent bar */
.agentic-tracker-section::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #0031CA, #74FFE0);
}
.agentic-tracker-section h3 { color: var(--text) !important; font-size:1.05rem !important; }
.agentic-tracker-section .text-muted { color: var(--text-muted) !important; }
.agentic-tracker-section .status-badge { font-size:.65rem; }

.agentic-overall-bar {
  height:8px; background:var(--bg); border-radius:99px; overflow:hidden;
  margin-top:.75rem; border: 1px solid var(--border);
}
.agentic-overall-fill {
  height:100%; background:linear-gradient(90deg, #0031CA, #74FFE0);
  border-radius:99px; transition:width .6s cubic-bezier(.4,0,.2,1);
}
.agentic-phase-tracker {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:.75rem; margin-top:1.1rem;
}
.agentic-phase-tracker-item {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 10px; padding: .9rem 1rem;
  transition: background .18s, transform .18s, box-shadow .18s, border-color .18s;
  position: relative; overflow: hidden;
}
.agentic-phase-tracker-item:hover {
  background: var(--surface);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,49,202,.08);
  border-color: rgba(0,49,202,.2);
}
.agentic-phase-tracker-item::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, #0031CA, #74FFE0);
}
.aptl { font-size:.82rem; font-weight:700; color:var(--text); margin-bottom:.15rem; }
.aptp { font-size:.7rem; color:var(--text-muted); margin-bottom:.6rem; }
.apt-bar-wrap { display:flex; align-items:center; gap:.5rem; }
.apt-bar-bg {
  flex:1; height:6px; background:var(--border); border-radius:99px; overflow:hidden;
}
.apt-bar-fill {
  height:100%; border-radius:99px; transition:width .6s cubic-bezier(.4,0,.2,1);
  background: linear-gradient(90deg, #0031CA, #74FFE0);
}
.apt-pct { font-size:.7rem; font-weight:600; color:var(--text-muted); white-space:nowrap; }

[data-theme="dark"] .agentic-tracker-section { background: var(--surface) !important; border-color: var(--border) !important; }
[data-theme="dark"] .agentic-phase-tracker-item { background: var(--bg); }
[data-theme="dark"] .agentic-phase-tracker-item:hover { background: var(--surface); border-color: rgba(77,128,255,.3); }

/* ── AGENTIC WORKSTREAM STATUS ───────────────────────────────────────────── */
.ws-status-inprogress { background:rgba(2,111,255,.12);  color:#026FFF; font-weight:600; }
.ws-status-starting   { background:rgba(116,255,224,.12); color:#059669; font-weight:600; }
.ws-status-ontrack    { background:rgba(116,255,224,.15); color:#059669; font-weight:600; }
.ws-status-atrisk     { background:rgba(239,68,68,.1);   color:#DC2626; font-weight:700; }

/* ── AGENTIC RAG CARDS ───────────────────────────────────────────────────── */
.agentic-card .settings-hint {
  font-size:.8rem; color:var(--text-muted); margin-bottom:.75rem; line-height:1.5;
}

/* ── DECISIONS-REQUIRED WARNING SECTION ─────────────────────────────────── */
.settings-section.decisions-warn-section {
  border-color: rgba(239,68,68,.3) !important;
}
.decisions-warn-section .agentic-section-hdr h3 { color: #DC2626; }
[data-theme="dark"] .decisions-warn-section .agentic-section-hdr h3 { color: #FCA5A5; }
.decisions-warn-section .settings-hint { color: var(--text-muted); }

/* ── GOALS & KPIs ────────────────────────────────────────────────────────── */
.goals-metric-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:.85rem; margin-top:.5rem;
}
.goals-metric-grid-2 {
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
}
.goals-metric-card {
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  padding:.95rem 1.1rem;
  transition:box-shadow .2s, transform .15s;
  position:relative; overflow:hidden;
}
.goals-metric-card:hover { box-shadow:0 5px 20px rgba(0,49,202,.1); transform:translateY(-2px); }
.goals-metric-primary {
  border-color:var(--cobalt);
  background:var(--surface);
}
.goals-metric-label { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--text-muted); margin-bottom:.3rem; }
.goals-metric-target { font-size:1.7rem; font-weight:800; color:var(--text); line-height:1.1; margin-bottom:.45rem; letter-spacing:-.03em; }
.goals-metric-actual-label { font-size:.7rem; color:var(--text-muted); margin-bottom:.2rem; }
.goals-actual-row { display:flex; align-items:center; gap:.4rem; }
.goals-actual-val { font-size:1.05rem; font-weight:800; color:var(--text); }

.goals-bar-wrap { display:flex; align-items:center; gap:.5rem; margin-top:.6rem; }
.goals-bar-bg {
  flex:1; height:8px; background:var(--border); border-radius:99px; overflow:hidden;
}
.goals-bar-fill {
  height:100%; border-radius:99px; transition:width .6s cubic-bezier(.4,0,.2,1);
  background:linear-gradient(90deg, var(--cobalt), var(--cyan));
  position:relative;
}
/* .goals-bar-fill::after shimmer removed — keep bars clean, consistent with dashboard comp bars */
.goals-bar-pct { font-size:.72rem; font-weight:700; color:var(--text-muted); white-space:nowrap; min-width:2.5rem; text-align:right; }

/* ── GOALS HERO BAR ─────────────────────────────────────────────────────── */
.goals-hero-bar {
  display:grid; grid-template-columns:repeat(6,1fr); gap:0;
  background:var(--navy); border-radius:16px; overflow:hidden;
  margin-bottom:1.25rem; box-shadow:0 8px 32px rgba(6,28,34,.35);
}
.goals-hero-stat {
  padding:1.1rem 1rem; text-align:center; position:relative;
  border-right:1px solid rgba(116,255,224,.12);
}
.goals-hero-stat:last-child { border-right:none; }
.goals-hero-stat-label {
  font-size:.62rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(116,255,224,.6); margin-bottom:.35rem;
}
.goals-hero-stat-value {
  font-size:1.45rem; font-weight:800; color:var(--cyan);
  letter-spacing:-.03em; line-height:1;
}
.goals-hero-stat-sub {
  font-size:.65rem; color:rgba(255,255,255,.35); margin-top:.3rem; font-weight:500;
}
@media (max-width:1100px) { .goals-hero-bar { grid-template-columns:repeat(3,1fr); } }
@media (max-width:600px)  { .goals-hero-bar { grid-template-columns:repeat(2,1fr); } }

/* ── GOALS REGION GRID ──────────────────────────────────────────────────── */
.goals-region-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:.75rem;
}
.goals-region-card {
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  padding:1.1rem 1.2rem; position:relative; overflow:hidden;
}
.goals-region-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--cobalt), var(--cyan));
}
.goals-region-card.goals-region-total::before {
  background:linear-gradient(90deg, var(--cobalt), #0EA5E9);
}
.goals-region-card.goals-region-americas::before {
  background:linear-gradient(90deg, #059669, var(--cyan));
}
.goals-region-card.goals-region-intl::before {
  background:linear-gradient(90deg, #7C3AED, #0EA5E9);
}
.goals-region-label {
  font-size:.62rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--text-muted); margin-bottom:.85rem;
}
.goals-region-metric { margin-bottom:.7rem; }
.goals-region-metric:last-child { margin-bottom:0; }
.goals-region-metric-row {
  display:flex; justify-content:space-between; align-items:baseline;
  margin-bottom:.25rem;
}
.goals-region-metric-name { font-size:.72rem; color:var(--text-muted); font-weight:500; }
.goals-region-metric-val  { font-size:.88rem; font-weight:800; color:var(--text); letter-spacing:-.02em; }
.goals-region-metric-actual { font-size:.72rem; color:var(--text-muted); font-weight:700; }
@media (max-width:900px)  { .goals-region-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:600px)  { .goals-region-grid { grid-template-columns:1fr; } }

/* ── MQL REALITY CHECK CALLOUT ──────────────────────────────────────────── */
.mql-reality-check {
  display:flex; align-items:flex-start; gap:.9rem;
  background:var(--navy); border-radius:12px; padding:1.1rem 1.25rem;
  margin-top:1rem;
}
.mql-reality-icon { flex-shrink:0; margin-top:.1rem; }
.mql-reality-body { flex:1; min-width:0; }
.mql-reality-title {
  font-family:'Roobert','Inter',sans-serif;
  font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--cyan); margin-bottom:.4rem;
}
.mql-reality-text {
  font-size:.82rem; line-height:1.55; color:rgba(255,255,255,.82);
  margin:0;
}

.goals-two-col {
  display:grid; grid-template-columns:1fr 1fr; gap:.85rem;
}
@media (max-width: 800px) { .goals-two-col { grid-template-columns:1fr; } }

.goals-budget-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:.85rem;
}
.goals-budget-card {
  background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:.9rem 1.05rem;
  transition:box-shadow .15s;
}
.goals-budget-card:hover { box-shadow:0 4px 16px rgba(0,31,102,.08); }
.goals-budget-label { font-size:.82rem; font-weight:700; color:var(--text); }
.goals-budget-allocated { font-size:.75rem; color:var(--text-muted); margin-top:.15rem; }

[data-theme="dark"] .goals-metric-card { background:var(--surface); }
[data-theme="dark"] .goals-metric-primary { background:var(--surface); border-color:var(--cobalt); }
[data-theme="dark"] .goals-budget-card { background:var(--surface); }

/* ── OWNER PICKER (compact multi-select) ──────────────────────────────────── */
.op-wrapper { position:relative; }
.op-trigger {
  display:flex; align-items:center; justify-content:space-between; gap:.4rem;
  min-height:38px; padding:.35rem .6rem .35rem .5rem;
  border:1.5px solid var(--border); border-radius:8px;
  background:#fff; cursor:pointer; transition:border-color .12s;
  color: #1A2233;
}
.op-trigger:hover, .op-trigger:focus { border-color:var(--accent); outline:none; }
.op-tags { display:flex; flex-wrap:wrap; gap:.25rem; flex:1; min-width:0; align-items:center; }
.op-tag {
  display:inline-flex; align-items:center; gap:.2rem;
  background:var(--accent); color:#fff;
  font-size:.72rem; font-weight:600;
  padding:.15rem .45rem; border-radius:12px;
  white-space:nowrap;
}
.op-tag-remove {
  background:none; border:none; color:#fff; cursor:pointer;
  font-size:.85rem; line-height:1; padding:0; margin:0; opacity:.8;
  display:flex; align-items:center;
}
.op-tag-remove:hover { opacity:1; }
.op-placeholder { font-size:.82rem; color:#6B7897; }
.op-arrow { font-size:.7rem; color:#6B7897; flex-shrink:0; }
.op-dropdown {
  position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:200;
  background:#fff; border:1.5px solid var(--border);
  border-radius:8px; box-shadow:0 4px 16px rgba(0,0,0,.12);
  max-height:220px; overflow-y:auto; padding:.3rem;
}
.op-dropdown.hidden { display:none; }
.op-option {
  display:flex; align-items:center; gap:.5rem;
  padding:.45rem .6rem; border-radius:6px; cursor:pointer;
  font-size:.82rem; transition:background .1s;
  color: #1A2233;
}
.op-option:hover { background:#F3F5F9; }
.op-option input[type=checkbox] { display:none; }
.op-option-check {
  width:1rem; height:1rem; min-width:1rem;
  border:1.5px solid #C7D0E0; border-radius:3px;
  background:#fff;
  position:relative; flex-shrink:0;
  transition:background .12s, border-color .12s;
}
.op-option-check::after {
  content:'';
  position:absolute;
  left:3px; top:0px;
  width:4px; height:8px;
  border:2px solid #fff;
  border-left:none; border-top:none;
  transform:rotate(45deg) scale(0);
  transform-origin:center;
  transition:transform .12s;
}
.op-option-checked .op-option-check {
  background:var(--accent);
  border-color:var(--accent);
}
.op-option-checked .op-option-check::after {
  transform:rotate(45deg) scale(1);
}
.op-disabled .op-trigger { cursor:default; pointer-events:none; opacity:.65; }
[data-theme="dark"] .op-trigger { background:#1A2035; color:#E1E7F0; border-color:var(--border); }
[data-theme="dark"] .op-placeholder { color:#7E8DA8; }
[data-theme="dark"] .op-arrow { color:#7E8DA8; }
[data-theme="dark"] .op-dropdown { background:#1A2035; color:#E1E7F0; }
[data-theme="dark"] .op-option { color:#E1E7F0; }
[data-theme="dark"] .op-option:hover { background:#252D40; }
[data-theme="dark"] .op-option-check { background:#252D40; border-color:#3D4F6E; }
[data-theme="dark"] .op-option-checked .op-option-check { background:var(--accent); border-color:var(--accent); }

/* ── SUB-NAV ITEMS ─────────────────────────────────────────────────────────── */
.nav-item-sub {
  padding-left:2.1rem;
  font-size:.8rem;
}
.nav-item-sub .nav-icon { opacity:.75; }

/* ── MASTER CALENDAR ─────────────────────────────────────────────────────────*/
.mcal-nav {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:.75rem; padding:.5rem .75rem;
  background:var(--surface,var(--bg)); border:1px solid var(--border); border-radius:8px;
}
.mcal-grid {
  display:grid; grid-template-columns:repeat(7,1fr);
  gap:1px; background:var(--divider); border:1px solid var(--divider); border-radius:12px; overflow:hidden;
}
.mcal-header-cell {
  background:var(--navy); padding:.55rem .4rem; text-align:center;
  font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  color:rgba(116,255,224,.75); font-family:'Roobert','Inter',sans-serif;
}
.mcal-cell {
  background:var(--surface); min-height:96px; padding:.4rem .45rem;
  display:flex; flex-direction:column; gap:.22rem; overflow:hidden;
}
.mcal-cell-empty { background:var(--bg); opacity:.5; }
.mcal-cell-today { background:rgba(0,49,202,.05); outline:2px solid var(--cobalt); outline-offset:-1px; }
.mcal-day-num {
  font-size:.7rem; font-weight:600; color:var(--text-muted); line-height:1; margin-bottom:.1rem; flex-shrink:0;
}
.mcal-today-num {
  background:var(--cobalt); color:#fff;
  width:1.5rem; height:1.5rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:.68rem; font-weight:700;
}
.mcal-item {
  border-radius:4px; padding:.15rem .4rem; cursor:pointer;
  transition:opacity .15s, transform .1s; overflow:hidden;
  width:100%; box-sizing:border-box; flex-shrink:0;
}
.mcal-item:hover { opacity:.88; transform:translateX(1px); }
.mcal-item-label {
  display:block; font-size:.67rem; font-weight:500; color:#fff;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:100%;
}
.mcal-item-more {
  font-size:.64rem; color:var(--text-muted); padding:.05rem .35rem;
  font-style:italic;
}
[data-theme="dark"] .mcal-cell { background:#141C2B; }
[data-theme="dark"] .mcal-cell-empty { background:#0B0F18; }
[data-theme="dark"] .mcal-header-cell { background:#000; color:rgba(116,255,224,.6); }

/* ── F1 NAV COLLAPSIBLE ───────────────────────────────────────────────────── */
.nav-collapsible-group { display:flex; flex-direction:column; }
.nav-parent-row {
  display:flex; align-items:stretch;
  margin: 1px .45rem;
}
.nav-parent-row .nav-item-parent {
  flex:1;
  margin: 0;           /* parent-row handles margin */
  width: auto;
  border-radius: 8px 0 0 8px;
}
.nav-chevron {
  display:flex; align-items:center; justify-content:center;
  width:30px; flex-shrink:0; border:none; background:transparent;
  color:rgba(255,255,255,.5); padding:0; border-radius:0 8px 8px 0;
  transition:background .15s, color .15s;
}
.nav-chevron:hover { background:rgba(255,255,255,.09); color:var(--white); }
.nav-chevron svg { transition:transform .2s; }
.f1-chev-collapsed svg { transform:rotate(-90deg); }
#f1-sub-nav { overflow:hidden; transition:none; }
#f1-sub-nav.f1-nav-collapsed { display:none; }
/* Sub-items get extra left indent */
.nav-item-sub {
  padding-left: 1.1rem;
  font-size: .845rem;
  color: rgba(255,255,255,.55);
}
.nav-item-sub.active { color: var(--white); }

/* ── CLICKABLE STATUS BADGE ──────────────────────────────────────────────── */
.clickable-status { cursor:pointer; }
.clickable-status:hover { opacity:.8; }

/* ── INLINE STATUS EDITOR ────────────────────────────────────────────────── */
.inline-status-editor {
  background:var(--surface); border:1px solid var(--border);
  border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.14);
  padding:.3rem; display:flex; flex-direction:column; gap:2px; min-width:130px;
}
.ise-option {
  text-align:left; background:none; border:none;
  padding:.35rem .6rem; border-radius:5px;
  font-size:.8rem; color:var(--text); cursor:pointer; transition:background .1s;
}
.ise-option:hover { background:var(--bg); }
.ise-current { font-weight:500; background:var(--bg); }
[data-theme="dark"] .inline-status-editor { background:#1A2035; border-color:var(--border); }
[data-theme="dark"] .ise-option { color:#E1E7F0; }
[data-theme="dark"] .ise-option:hover { background:#252D40; }
[data-theme="dark"] .ise-current { background:#252D40; }

/* ── BUDGET CATEGORY BLOCKS ──────────────────────────────────────────────── */
.budget-cat-block { margin-bottom:1.5rem; }
.budget-cat-header {
  display: flex; align-items: center; gap: .75rem;
  padding: .85rem 1.1rem; border-radius: 12px 12px 0 0;
  background: var(--navy);
  border: 1px solid rgba(116,255,224,.12);
  border-left: none; /* overridden by inline color stripe */
  cursor: pointer; user-select: none; transition: background .15s;
}
.budget-cat-header:hover { background: #0b2a36; }
.budget-cat-chevron {
  font-size: .75rem; color: rgba(255,255,255,.7);
  transition: transform .2s; flex-shrink: 0;
}

/* ── Budget category header — identity (left zone) ──────────────────────── */
.bch-identity {
  display: flex; align-items: center; gap: .65rem; flex: 1; min-width: 0;
}
.bch-title {
  font-weight: 700; color: #fff; font-size: .88rem; letter-spacing: .04em;
}
.bch-subtitle {
  font-size: .7rem; color: rgba(255,255,255,.55); margin-top: .12rem;
}

/* ── Budget category header — stats (right zone) ────────────────────────── */
.bch-right {
  display: flex; align-items: center; gap: 1rem; flex-shrink: 0;
}
.bch-stat { text-align: right; min-width: 72px; }
.bch-stat-label {
  font-size: .6rem; text-transform: uppercase; letter-spacing: .08em;
  color: rgba(255,255,255,.45); font-weight: 700; margin-bottom: .1rem;
}
.bch-stat-val {
  font-size: .9rem; font-weight: 700; color: #fff;
  font-variant-numeric: tabular-nums; line-height: 1.2;
}
.bch-stat-val.bch-over { color: #FCA5A5; }
.bch-divider {
  width: 1px; height: 32px; background: rgba(255,255,255,.12); flex-shrink: 0;
}
.bch-progress-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 80px;
}
.bch-bar {
  width: 80px; height: 5px; background: rgba(255,255,255,.15);
  border-radius: 3px; overflow: hidden;
}
.bch-bar-fill {
  height: 100%; background: linear-gradient(90deg, #0031CA, #74FFE0); border-radius: 3px;
  transition: width .4s ease;
}
.bch-pct {
  font-size: .65rem; color: rgba(116,255,224,.85); font-weight: 600;
}
.bch-add-btn {
  display: flex; align-items: center; gap: .3rem;
  padding: .38rem .85rem;
  background: rgba(116,255,224,.1);
  border: 1px solid rgba(116,255,224,.28);
  border-radius: 7px;
  color: var(--cyan); font-size: .78rem; font-weight: 600;
  cursor: pointer; transition: background .15s, border-color .15s;
  white-space: nowrap; flex-shrink: 0; font-family: inherit;
  line-height: 1;
}
.bch-add-btn:hover { background: rgba(116,255,224,.2); border-color: rgba(116,255,224,.6); }

/* ── Budget table wrapper ────────────────────────────────────────────────── */
.bch-table-wrap {
  overflow-x: auto; border-radius: 0 0 12px 12px;
  border: 1px solid var(--divider); border-top: none;
}
.bch-table { margin: 0; border: none; border-radius: 0; }
.bch-table th { padding: .6rem 1rem; }
.bch-table td { padding: .78rem 1rem; }
.bch-table thead tr th:first-child { border-radius: 0; }
.bch-th-r { text-align: right !important; }

.budget-cat-body {
  border: 1px solid var(--border); border-top: none;
  border-radius: 0 0 12px 12px; overflow: hidden;
}
.budget-region-filter {
  display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem;
}
.budget-region-filter select {
  padding:.3rem .6rem; border:1px solid var(--border);
  border-radius:6px; background:var(--surface); color:var(--text);
  font-size:.8rem;
}

/* ── CUSTOM TAG PICKER INPUT ─────────────────────────────────────────────── */
.tp-custom-row {
  padding:.35rem .5rem .25rem; border-top:1px solid var(--border);
}
.tp-custom-input {
  width:100%; padding:.3rem .5rem; border:1px solid var(--border);
  border-radius:5px; font-size:.78rem; color:var(--text); background:var(--surface);
  outline:none;
}
.tp-custom-input:focus { border-color:var(--accent); }
[data-theme="dark"] .tp-custom-input { background:#1A2035; color:#E1E7F0; border-color:var(--border); }

/* ── BULK ACTION BAR ─────────────────────────────────────────────────────── */
.bulk-action-bar {
  display:flex; align-items:center; gap:.75rem;
  padding:.5rem .75rem; background:var(--accent);
  border-radius:7px; margin-bottom:.75rem; color:#fff;
}
.bulk-action-bar select {
  padding:.3rem .5rem; border-radius:5px; border:none;
  font-size:.8rem; background:#fff; color:var(--text);
}
.bulk-action-bar button {
  padding:.3rem .7rem; border-radius:5px; border:none;
  background:rgba(255,255,255,.2); color:#fff; font-size:.8rem; cursor:pointer;
}
.bulk-action-bar button:hover { background:rgba(255,255,255,.35); }
.bulk-action-count { font-size:.8rem; font-weight:500; }
.bulk-checkbox { width:15px; height:15px; cursor:pointer; accent-color:var(--accent); }
.bulk-row-selected { background: rgba(0,49,202,.06) !important; }
[data-theme="dark"] .bulk-row-selected { background: rgba(116,255,224,.07) !important; }

/* ── STATUS CHANGE LOG ────────────────────────────────────────────────────── */
.status-change-log { display:flex; flex-direction:column; gap:.4rem; }
.scl-entry {
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
  padding:.45rem .6rem; border-radius:6px; background:var(--bg);
  border:1px solid var(--border); font-size:.78rem;
}
.scl-summary { font-weight:500; color:var(--text); flex:1; min-width:120px; }
.scl-module { font-size:.7rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.3px; }
.scl-arrow { color:var(--text-muted); font-size:.75rem; }
.scl-from { color:#EF4444; font-size:.75rem; }
.scl-to   { color:#059669; font-size:.75rem; font-weight:500; }
.scl-user { color:var(--text-muted); font-size:.73rem; }
.scl-ts   { color:var(--text-muted); font-size:.72rem; margin-left:auto; white-space:nowrap; }
.scl-restore { margin-left:.4rem; }
[data-theme="dark"] .scl-entry { background:#1A2035; }

/* ── CHANGE HISTORY LOG ──────────────────────────────────────────────────── */
.change-history-scroll {
  max-height: 480px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg);
  /* Subtle inner shadow to signal scrollability */
  box-shadow: inset 0 -12px 12px -12px rgba(0,0,0,.06);
}
.change-history-scroll::-webkit-scrollbar { width: 6px; }
.change-history-scroll::-webkit-scrollbar-track { background: transparent; }
.change-history-scroll::-webkit-scrollbar-thumb { background: var(--divider); border-radius: 3px; }
.change-history-scroll::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
[data-theme="dark"] .change-history-scroll { box-shadow: inset 0 -12px 12px -12px rgba(0,0,0,.2); }
.change-history-log { display:flex; flex-direction:column; gap:0; padding:.4rem; }
.ch-entry {
  display:flex; align-items:flex-start; gap:.75rem;
  padding:.5rem .7rem; border-radius:6px; background: var(--white);
  border-bottom: 1px solid var(--border); font-size:.78rem;
  transition:background .12s;
}
.ch-entry:last-child { border-bottom: none; }
.ch-entry:hover { background: var(--light-cyan); }
.ch-action-dot {
  width:1.6rem; height:1.6rem; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; margin-top:.05rem;
}
.ch-create  { background:#D1FAE5; color:#065F46; }
.ch-update  { background:#DBEAFE; color:#1D4ED8; }
.ch-delete  { background:#FEE2E2; color:#991B1B; }
.ch-restore { background:#FEF3C7; color:#92400E; }
.ch-body { flex:1; min-width:0; }
.ch-main-row { display:flex; align-items:center; gap:.45rem; flex-wrap:wrap; }
.ch-badge {
  font-size:.62rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  padding:.1rem .45rem; border-radius:99px;
}
.ch-badge.ch-create  { background:#D1FAE5; color:#065F46; }
.ch-badge.ch-update  { background:#DBEAFE; color:#1D4ED8; }
.ch-badge.ch-delete  { background:#FEE2E2; color:#991B1B; }
.ch-badge.ch-restore { background:#FEF3C7; color:#92400E; }
.ch-module { font-size:.68rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em; }
.ch-summary { font-weight:600; color:var(--text); font-size:.8rem; }
.ch-diff {
  font-size:.72rem; color:var(--text-muted); margin-top:.2rem;
  display:flex; flex-wrap:wrap; gap:.3rem; align-items:center;
}
.ch-field { font-weight:600; color:var(--text); }
.ch-from  { color:#EF4444; }
.ch-to    { color:#059669; }
.ch-right {
  display:flex; flex-direction:column; align-items:flex-end; gap:.2rem; flex-shrink:0;
}
.ch-user { font-size:.7rem; color:var(--text-muted); font-weight:500; white-space:nowrap; }
.ch-ts   { font-size:.68rem; color:var(--text-muted); white-space:nowrap; }
[data-theme="dark"] .ch-entry { background:#1A2035; }
[data-theme="dark"] .ch-entry:hover { background:#232D45; }

/* ── CAMPAIGN ASSET FOOTPRINT ────────────────────────────────────────────── */
.asset-footprint {
  margin-top:1.25rem; border:1px solid var(--border);
  border-radius:8px; overflow:hidden;
}
.af-header {
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
  padding:.6rem .85rem; background:var(--bg); border-bottom:1px solid var(--border);
}
.af-title { font-weight:500; font-size:.88rem; }
.af-count {
  font-size:.75rem; font-weight:500; color:#fff;
  background:var(--accent); border-radius:20px;
  padding:.1rem .55rem;
}
.af-hint { font-size:.75rem; color:var(--text-muted); margin-left:.25rem; }
.af-list { padding:.4rem 0; }
.af-group-label {
  padding:.25rem .85rem; font-size:.68rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.4px;
  color:var(--text-muted); background:var(--bg);
  border-bottom:1px solid var(--border);
}
.af-row {
  display:flex; align-items:center; gap:.6rem;
  padding:.45rem .85rem; cursor:pointer; transition:background .1s;
  border-bottom:1px solid var(--border);
}
.af-row:last-child { border-bottom:none; }
.af-row:hover { background:var(--bg); }
.af-icon { font-size:.8rem; flex-shrink:0; }
.af-label { flex:1; font-size:.82rem; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.af-platform { font-size:.74rem; min-width:60px; }
[data-theme="dark"] .af-header { background:#0D1526; }
[data-theme="dark"] .af-group-label { background:#0D1526; }
[data-theme="dark"] .af-row:hover { background:#1A2035; }

/* ── TRUE PRO AI AGENT ──────────────────────────────────────────────────── */
#truepro-widget {
  position: static;
  display: contents; /* participates in #fab-bar flex */
}
#truepro-fab {
  height: 44px; border-radius: 999px;
  padding: 0 14px 0 10px;
  background: rgba(116,255,224,.1); color: #74FFE0;
  border: 1px solid rgba(116,255,224,.2);
  box-shadow: none;
  display: flex; align-items: center; gap: 7px;
  transition: background .15s, border-color .15s, transform .15s;
  cursor: pointer; white-space: nowrap;
}
#truepro-fab:hover {
  background: rgba(116,255,224,.18);
  border-color: rgba(116,255,224,.4);
  transform: scale(1.03);
}
#truepro-fab.tp-open {
  background: rgba(116,255,224,.22);
  border-color: rgba(116,255,224,.5);
}
#truepro-fab svg { width: 22px; height: 22px; flex-shrink: 0; }
#truepro-fab-label {
  font-size: .78rem; font-weight: 600; letter-spacing: .01em;
  color: #74FFE0; line-height: 1;
}
#truepro-panel {
  position: fixed;
  bottom: 5.5rem; right: 1.5rem;
  width: 420px; height: 560px; max-height: calc(100vh - 7rem);
  background: #061C22;
  border: 1px solid rgba(116,255,224,.15);
  border-radius: 16px;
  box-shadow: 0 16px 48px rgba(0,0,0,.55), 0 0 0 1px rgba(116,255,224,.08), 0 0 40px rgba(116,255,224,.04);
  display: flex; flex-direction: column; overflow: hidden;
  animation: tp-slide-in .2s cubic-bezier(.2,0,.2,1);
  z-index: 511;
}
/* Keep dark in light mode */
[data-theme="light"] #truepro-panel { background: #061C22; border-color: rgba(116,255,224,.15); }
@keyframes tp-slide-in {
  from { opacity: 0; transform: translateY(14px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.tp-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .85rem 1rem;
  background: rgba(116,255,224,.05);
  border-bottom: 1px solid rgba(116,255,224,.1);
  color: #fff; flex-shrink: 0;
}
.tp-header-left { display: flex; align-items: center; gap: .65rem; }
.tp-avatar-icon {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(116,255,224,.12); border: 1.5px solid rgba(116,255,224,.4);
  box-shadow: 0 0 10px rgba(116,255,224,.2);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.tp-avatar-icon svg { width: 17px; height: 17px; color: #74FFE0; }
.tp-header-title { font-size: .95rem; font-weight: 700; color: #fff; letter-spacing: -.01em; }
.tp-header-sub { font-size: .67rem; color: #74FFE0; opacity: .8; margin-top: .05rem; }
.tp-header-actions { display: flex; align-items: center; gap: .2rem; }
.tp-header-actions button {
  background: none; border: none; color: rgba(255,255,255,.4);
  font-size: .85rem; cursor: pointer; padding: .28rem .4rem;
  border-radius: 6px; transition: color .15s, background .15s; line-height: 1;
}
.tp-header-actions button:hover { color: #fff; background: rgba(255,255,255,.08); }
.tp-messages {
  flex: 1; overflow-y: auto; padding: 1rem .9rem;
  display: flex; flex-direction: column; gap: .75rem;
  background: transparent; scroll-behavior: smooth;
}
.tp-msg { display: flex; align-items: flex-end; gap: .5rem; }
.tp-msg.tp-user { flex-direction: row-reverse; }
.tp-msg-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(116,255,224,.1); border: 1px solid rgba(116,255,224,.3);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.tp-msg-avatar svg { width: 14px; height: 14px; color: #74FFE0; }
.tp-msg.tp-user .tp-msg-avatar { background: rgba(0,49,202,.4); border-color: rgba(0,49,202,.6); }
.tp-msg.tp-user .tp-msg-avatar svg { color: #fff; }
.tp-bubble-wrap { display: flex; flex-direction: column; max-width: 88%; min-width: 0; }
.tp-msg.tp-user .tp-bubble-wrap { align-items: flex-end; }
.tp-bubble {
  background: rgba(255,255,255,.07); border: none;
  border-radius: 14px 14px 14px 4px;
  padding: .55rem .85rem; font-size: .83rem; line-height: 1.55;
  word-break: break-word; color: rgba(255,255,255,.9);
  min-width: 0; overflow: hidden;
}
.tp-msg.tp-user .tp-bubble {
  background: rgba(0,49,202,.5); color: #fff; border: none;
  border-radius: 14px 14px 4px 14px;
}
[data-theme="light"] .tp-bubble { background: rgba(255,255,255,.07); color: rgba(255,255,255,.9); }
[data-theme="light"] .tp-msg.tp-user .tp-bubble { background: rgba(0,49,202,.5); }
.tp-bubble code {
  font-family: 'Courier New', monospace; font-size: .78rem;
  background: rgba(116,255,224,.1); border-radius: 4px; padding: .1rem .3rem; color: #74FFE0;
}
.tp-msg.tp-user .tp-bubble code { background: rgba(255,255,255,.15); color: #fff; }
.tp-bubble-time { font-size: .62rem; color: rgba(255,255,255,.25); margin-top: .2rem; padding: 0 .2rem; }
.tp-msg.tp-user .tp-bubble-time { text-align: right; }
/* Typing indicator */
.tp-typing { display: flex; align-items: flex-end; gap: .5rem; }
.tp-typing-dots {
  background: rgba(255,255,255,.07); border: none;
  border-radius: 14px 14px 14px 4px;
  padding: .55rem .85rem; display: flex; gap: .3rem; align-items: center;
}
.tp-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: #74FFE0; animation: tp-bounce .9s infinite; opacity: .5;
}
.tp-dot:nth-child(2) { animation-delay: .15s; }
.tp-dot:nth-child(3) { animation-delay: .3s; }
@keyframes tp-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .4; }
  30% { transform: translateY(-4px); opacity: 1; }
}
/* Welcome screen */
.tp-welcome {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 1.25rem; height: 100%; padding: 2rem 1.5rem;
  text-align: center;
}
.tp-welcome-icon {
  width: 88px; height: 88px; min-width: 88px; min-height: 88px; border-radius: 50%;
  background: rgba(116,255,224,.08);
  border: 2px solid rgba(116,255,224,.3);
  box-shadow: 0 0 0 8px rgba(116,255,224,.04), 0 0 32px rgba(116,255,224,.2), 0 0 64px rgba(116,255,224,.08);
  display: flex; align-items: center; justify-content: center;
  animation: tp-icon-pulse 3s ease-in-out infinite;
}
@keyframes tp-icon-pulse {
  0%, 100% { box-shadow: 0 0 0 8px rgba(116,255,224,.04), 0 0 32px rgba(116,255,224,.18), 0 0 64px rgba(116,255,224,.06); }
  50%       { box-shadow: 0 0 0 12px rgba(116,255,224,.07), 0 0 48px rgba(116,255,224,.28), 0 0 80px rgba(116,255,224,.12); }
}
.tp-welcome-icon svg { width: 40px; height: 40px; color: #74FFE0; }
.tp-welcome h3 { font-size: 1.05rem; font-weight: 700; color: #fff; margin: 0; letter-spacing: -.01em; }
.tp-welcome p { font-size: .82rem; color: rgba(255,255,255,.5); line-height: 1.6; margin: 0; max-width: 270px; }
[data-theme="light"] .tp-welcome h3 { color: #fff; }
[data-theme="light"] .tp-welcome p { color: rgba(255,255,255,.5); }
.tp-suggestions { display: flex; flex-direction: column; gap: .4rem; width: 100%; }
.tp-suggestion {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px; padding: .6rem .9rem;
  font-size: .8rem; color: rgba(255,255,255,.7); cursor: pointer;
  text-align: left; transition: background .15s, border-color .15s, color .15s, transform .12s;
  font-family: inherit;
}
.tp-suggestion:hover {
  background: rgba(116,255,224,.1); border-color: rgba(116,255,224,.3);
  color: #74FFE0; transform: translateX(2px);
}
/* Footer input */
.tp-footer {
  display: flex; align-items: flex-end; gap: .5rem;
  padding: .75rem; border-top: 1px solid rgba(255,255,255,.07);
  background: rgba(0,0,0,.1); flex-shrink: 0;
}
.tp-input {
  flex: 1; border: 1px solid rgba(255,255,255,.1); border-radius: 12px;
  padding: .5rem .8rem; font-size: .84rem; font-family: inherit;
  background: rgba(255,255,255,.06); color: #fff; resize: none;
  max-height: 100px; line-height: 1.45; min-height: 36px;
  transition: border-color .15s; outline: none;
  overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none;
  -webkit-appearance: none; appearance: none;
}
.tp-input::-webkit-scrollbar { display: none; }
.tp-input:focus { border-color: rgba(116,255,224,.4); box-shadow: 0 0 0 2px rgba(116,255,224,.08); }
.tp-input::placeholder { color: rgba(255,255,255,.25); }
[data-theme="light"] .tp-input { background: rgba(255,255,255,.06); color: #fff; }
[data-theme="light"] .tp-input::placeholder { color: rgba(255,255,255,.25); }
.tp-send {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(116,255,224,.15); color: #74FFE0;
  border: 1px solid rgba(116,255,224,.25);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  transition: background .15s, border-color .15s, box-shadow .15s, transform .15s;
}
.tp-send:hover { background: rgba(116,255,224,.25); border-color: rgba(116,255,224,.5); box-shadow: 0 0 12px rgba(116,255,224,.3); transform: scale(1.06); }
.tp-send:disabled { background: rgba(255,255,255,.05); border-color: transparent; color: rgba(255,255,255,.2); cursor: not-allowed; transform: none; box-shadow: none; }
.tp-send svg { width: 16px; height: 16px; }
/* Mobile */
@media (max-width: 480px) {
  #fab-bar { bottom: 1rem; right: 1rem; }
  #truepro-panel { right: 1rem; width: calc(100vw - 2rem); bottom: 5rem; }
  #chat-panel    { right: 1rem; width: calc(100vw - 2rem); }
  .quick-add-menu { right: 1rem; }
}
/* ── True Pro rich response components ───────────────────────────────────── */
/* Status badges */
.tp-badge {
  display: inline-flex; align-items: center;
  font-size: .72rem; font-weight: 600; padding: .15rem .5rem;
  border-radius: 99px; white-space: nowrap; letter-spacing: .01em;
}
.tp-badge-active  { background: rgba(0,49,202,.12);  color: #0031CA; }
.tp-badge-done    { background: rgba(5,150,105,.12); color: #059669; }
.tp-badge-blocked { background: rgba(220,38,38,.12); color: #DC2626; }
.tp-badge-todo    { background: rgba(154,158,158,.12);color: #6B7280; }
.tp-badge-warn    { background: rgba(245,158,11,.12); color: #D97706; }
[data-theme="dark"] .tp-badge-active  { background: rgba(0,49,202,.25); }
[data-theme="dark"] .tp-badge-done    { background: rgba(5,150,105,.25); }
[data-theme="dark"] .tp-badge-blocked { background: rgba(220,38,38,.25); }
[data-theme="dark"] .tp-badge-todo    { background: rgba(154,158,158,.2); }
[data-theme="dark"] .tp-badge-warn    { background: rgba(245,158,11,.2); }

/* Stat cards */
.tp-stats { display: flex; gap: .5rem; flex-wrap: wrap; margin: .5rem 0; }
.tp-stat {
  flex: 1; min-width: 70px;
  background: var(--light-cyan); border: 1px solid rgba(116,255,224,.4);
  border-radius: 8px; padding: .5rem .75rem; text-align: center;
}
[data-theme="dark"] .tp-stat { background: rgba(116,255,224,.07); border-color: rgba(116,255,224,.2); }
.tp-stat-num   { font-size: 1.4rem; font-weight: 700; color: var(--cobalt); line-height: 1.1; }
.tp-stat-label { font-size: .7rem; color: var(--text-muted); margin-top: .15rem; line-height: 1.3; }

/* Table */
.tp-table-wrap { width: 100%; overflow-x: auto; margin: .5rem 0; border-radius: 6px; }
.tp-table {
  width: 100%; border-collapse: collapse; font-size: .74rem;
  table-layout: fixed;
}
.tp-table th {
  background: var(--navy); color: #fff;
  padding: .35rem .5rem; text-align: left; font-weight: 600; font-size: .68rem;
  overflow-wrap: break-word; word-break: break-word;
}
.tp-table td {
  padding: .35rem .5rem; border-bottom: 1px solid var(--border);
  color: var(--text); overflow-wrap: break-word; word-break: break-word;
  vertical-align: top;
}
.tp-table tr:last-child td { border-bottom: none; }
.tp-table tr:hover td { background: var(--bg); }
[data-theme="dark"] .tp-table tr:hover td { background: rgba(255,255,255,.04); }

/* Campaign cards */
.tp-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: .75rem 1rem; margin: .5rem 0;
  transition: box-shadow .15s;
}
.tp-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.tp-card-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; margin-bottom: .5rem;
}
.tp-card-title {
  font-weight: 600; font-size: .82rem; color: var(--text);
  flex: 1; min-width: 0;
}
.tp-card-body { display: flex; flex-direction: column; gap: .35rem; }
.tp-card-meta { font-size: .72rem; color: var(--text-muted); }
.tp-card-note { font-size: .75rem; color: var(--text); line-height: 1.45; }
[data-theme="dark"] .tp-card {
  background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1);
}
[data-theme="dark"] .tp-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,.3); }

/* Progress bar */
.tp-progress {
  display: flex; align-items: center; gap: .5rem;
  background: var(--border); border-radius: 99px;
  height: 6px; margin: .35rem 0; position: relative; overflow: visible;
}
.tp-progress-bar {
  height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, #0031CA, #74FFE0);
  transition: width .4s ease;
}
.tp-progress span {
  font-size: .7rem; font-weight: 600; color: var(--text-muted);
  white-space: nowrap; margin-left: .25rem;
}

/* Alert boxes */
.tp-alert {
  display: flex; align-items: flex-start; gap: .5rem;
  border-radius: 6px; padding: .5rem .75rem;
  font-size: .78rem; line-height: 1.45; margin: .4rem 0;
  border-left: 3px solid;
}
.tp-alert-warn { background: #FFF6D6; border-color: #FFC000; color: #92600A; }
.tp-alert-good { background: #EBF9F1; border-color: #00B050; color: #065F35; }
.tp-alert-info { background: var(--light-cyan); border-color: var(--cyan); color: var(--navy); }
[data-theme="dark"] .tp-alert-warn { background: rgba(255,192,0,.1); color: #FFC000; }
[data-theme="dark"] .tp-alert-good { background: rgba(0,176,80,.1);  color: #00B050; }
[data-theme="dark"] .tp-alert-info { background: rgba(116,255,224,.08); color: var(--cyan); }

/* Section header */
.tp-section-head {
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-muted);
  margin: .75rem 0 .35rem; padding-bottom: .25rem;
  border-bottom: 1px solid var(--border);
}

/* Bullet list */
.tp-list { margin: .35rem 0 .35rem 1rem; padding: 0; font-size: .82rem; line-height: 1.6; }
.tp-list li { margin-bottom: .15rem; }

/* Inline code */
.tp-code {
  font-family: 'Courier New', monospace; font-size: .78rem;
  background: rgba(0,49,202,.07); border-radius: 3px;
  padding: .1em .35em; color: var(--cobalt);
}
[data-theme="dark"] .tp-code { background: rgba(116,255,224,.1); color: var(--cyan); }

/* Action confirmation buttons */
.tp-action-row { display: flex; gap: .5rem; margin: .6rem 0 .25rem; }
.tp-action-btn {
  padding: .4rem 1rem; border-radius: 6px; font-size: .8rem;
  font-weight: 600; cursor: pointer; border: none; font-family: inherit;
  transition: opacity .15s, transform .1s;
}
.tp-action-btn:hover { opacity: .85; transform: translateY(-1px); }
.tp-action-confirm { background: var(--cobalt); color: #fff; }
.tp-action-cancel  { background: var(--border); color: var(--text); }

/* Bubble paragraph reset */
.tp-bubble-assistant p { margin: 0 0 .5rem; }
.tp-bubble-assistant p:last-child { margin-bottom: 0; }

/* Alias selectors matching actual class names in truepro.js HTML */
.tp-header-avatar { /* icon container in header */
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(116,255,224,.15); border: 1.5px solid var(--cyan);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.tp-header-name { font-size: .92rem; font-weight: 600; color: #fff; }
.tp-header-sub  { font-size: .68rem; color: var(--cyan); opacity: .85; }
.tp-header-btn  { /* same as .tp-header-actions button */
  background: none; border: none; color: rgba(255,255,255,.6);
  cursor: pointer; padding: .25rem .4rem; border-radius: 4px;
  transition: color .15s, background .15s; line-height: 1;
}
.tp-header-btn:hover { color: #fff; background: rgba(255,255,255,.1); }
/* Message variants */
.tp-msg-user { flex-direction: row-reverse; }
.tp-bubble-user {
  background: var(--cobalt); color: #fff; border: 1px solid var(--cobalt);
  border-radius: 12px 12px 3px 12px;
  padding: .5rem .8rem; font-size: .84rem; line-height: 1.5; word-break: break-word;
}
.tp-bubble-assistant {
  background: #fff; border: 1px solid var(--border);
  border-radius: 12px 12px 12px 3px;
  padding: .5rem .8rem; font-size: .84rem; line-height: 1.5; word-break: break-word;
  color: var(--text);
}
[data-theme="dark"] .tp-bubble-assistant { background: #1A2035; border-color: var(--border); color: var(--text); }
/* Robot avatar in message list */
.tp-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--navy); border: 1.5px solid var(--cyan);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
/* Typing indicator inside bubble */
.tp-typing { display: inline-flex; gap: .25rem; align-items: center; padding: .15rem 0; }
.tp-typing span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--text-muted); animation: tp-bounce .9s infinite;
  display: inline-block;
}
.tp-typing span:nth-child(2) { animation-delay: .15s; }
.tp-typing span:nth-child(3) { animation-delay: .3s; }
/* Welcome screen sub-elements — duplicate removed; canonical rule is above */
.tp-welcome-text h3 { font-size: 1rem; font-weight: 600; color: #fff; margin: 0 0 .35rem; }
.tp-welcome-text p  { font-size: .82rem; color: rgba(255,255,255,.6); line-height: 1.5; margin: 0; }
.tp-welcome-text { color: rgba(255,255,255,.7) !important; font-size: .84rem; line-height: 1.6; }
.tp-welcome-text strong { color: #fff !important; font-weight: 600; }

/* Dark mode panel */
[data-theme="dark"] #truepro-panel { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .tp-footer { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .tp-input { background: #0A0F1A; }
[data-theme="dark"] .tp-suggestion { background: var(--surface); border-color: var(--border); }

/* ── PRINT / PDF EXPORT ──────────────────────────────────────────────────── */
@media print {
  #sidebar, #topbar, .fab-container, .toast-container,
  .view-actions, .bulk-action-bar, .modal-overlay,
  .btn, .btn-ghost, button:not(.print-safe) { display:none !important; }
  #main-content { margin:0 !important; padding:0 !important; }
  #content { padding:0 !important; }
  body { background:#fff !important; color:#000 !important; font-size:12px; }
  .card, .camp-card, .table-wrap { box-shadow:none !important; border:1px solid #ccc !important; }
  table { width:100%; border-collapse:collapse; }
  th, td { border:1px solid #ddd !important; padding:6px 8px !important; }
  a { color:#000 !important; text-decoration:none; }
  .status-badge { border:1px solid #999 !important; background:none !important; color:#000 !important; }
  .view-header h2 { font-size:1.2rem; margin-bottom:.5rem; }
  .section-card { break-inside:avoid; }
}