:root {
  --bg: #f7f9fc;
  --bg-accent: #edf3fb;
  --ink: #172033;
  --muted: #6b7485;
  --card: rgba(255, 255, 255, 0.9);
  --card-strong: #ffffff;
  --line: rgba(23, 32, 51, 0.08);
  --brand: #2f6df6;
  --brand-soft: #e8f0ff;
  --brand-deep: #1d4ed8;
  --blue-0: #dbeafe;
  --blue-1: #93c5fd;
  --blue-2: #60a5fa;
  --blue-3: #2563eb;
  --green: #1fa971;
  --orange: #ef8b17;
  --red: #df4f48;
  --shadow: 0 18px 38px rgba(33, 53, 85, 0.08);
  --radius: 22px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html, body {
  margin: 0;
  min-height: 100%;
}

body {
  font-family: "Avenir Next", "Segoe UI", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at top left, rgba(47, 109, 246, 0.12), transparent 28%),
    radial-gradient(circle at bottom right, rgba(31, 169, 113, 0.08), transparent 26%),
    linear-gradient(180deg, #fbfcfe, var(--bg) 40%, var(--bg-accent));
}

body.is-onboarding-locked {
  position: fixed;
  inset: 0;
  width: 100%;
  overflow: hidden;
}

body[data-product-mode="solo"] {
  --brand: #0f8b8d;
  --brand-soft: #dff8f5;
  --brand-deep: #0f5f61;
  --blue-0: #d9fbfb;
  --blue-1: #7ddfdf;
  --blue-2: #3ebcbc;
  --blue-3: #0f8b8d;
}

body[data-authenticated="true"] .app-shell {
  grid-template-columns: 1fr;
}

/* body[data-authenticated="true"] .hero-panel { display: none; } - Removed so sidebar persists */

body[data-authenticated="false"] #dashboard-view {
  display: none !important;
}

body[data-authenticated="true"] #login-view {
  display: none !important;
}

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

.hero-panel {
  position: relative;
  overflow: hidden;
  padding: 32px;
  border: 1px solid rgba(47, 109, 246, 0.12);
  border-radius: 30px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(246, 249, 255, 0.98)),
    linear-gradient(135deg, rgba(47, 109, 246, 0.08), rgba(31, 169, 113, 0.06));
  color: var(--ink);
  box-shadow: var(--shadow);
}

.hero-panel::before {
  content: "";
  position: absolute;
  top: 24px;
  right: 22px;
  width: 154px;
  height: 154px;
  border-radius: 30px;
  background: linear-gradient(180deg, rgba(219, 234, 254, 0.95), rgba(37, 99, 235, 0.12));
  transform: rotate(16deg);
}

.hero-panel::after {
  content: "";
  position: absolute;
  inset: auto -30px -40px auto;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: rgba(47, 109, 246, 0.08);
}

.hero-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 1rem;
}

.product-logo {
  width: 62px;
  height: 62px;
  flex: 0 0 auto;
}

.hero-ribbon,
.eyebrow {
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.hero-ribbon {
  display: inline-flex;
  padding: 0.45rem 0.8rem;
  margin-bottom: 1rem;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-deep);
}

.product-caption {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.hero-panel h1,
.workspace h2,
.workspace h3 {
  letter-spacing: -0.02em;
}

.hero-panel h1 {
  margin: 0 0 0.8rem;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1;
}

body[data-authenticated="true"] .hero-panel {
  padding: 28px;
}

body[data-authenticated="true"] .hero-panel h1 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  margin-bottom: 0.55rem;
}

body[data-authenticated="true"] .hero-panel p {
  max-width: 20rem;
}

.hero-panel p {
  max-width: 24rem;
  color: var(--muted);
  line-height: 1.6;
}

.workspace {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.workspace-session {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
}

.account-menu {
  position: relative;
}

.account-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  background: transparent;
  color: var(--ink);
}

.session-indicator-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--brand);
  flex: 0 0 auto;
}

.session-indicator-icon svg {
  width: 100%;
  height: 100%;
}

.session-indicator-copy {
  display: grid;
  gap: 2px;
}

.session-indicator-copy strong {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.1;
}

.session-indicator-copy span {
  font-size: 0.84rem;
  color: var(--muted);
  line-height: 1.1;
}

.account-popover {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 20;
  width: min(360px, calc(100vw - 24px));
  padding: 18px;
  border: 1px solid rgba(47, 109, 246, 0.1);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 24px 40px rgba(17, 32, 61, 0.14);
  backdrop-filter: blur(14px);
}

.account-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}

.account-switch-button {
  padding: 0.8rem 0.9rem;
  border-radius: 14px;
  background: rgba(244, 247, 253, 0.96);
  color: var(--muted);
  font-weight: 700;
}

.account-switch-button.is-active {
  background: linear-gradient(135deg, rgba(232, 240, 255, 1), rgba(255, 255, 255, 0.98));
  color: var(--brand-deep);
  box-shadow: 0 8px 16px rgba(47, 109, 246, 0.08);
}

.account-panel {
  display: grid;
  gap: 14px;
}

.account-summary {
  display: grid;
  gap: 4px;
}

.account-summary strong {
  font-size: 1rem;
}

.account-summary span {
  color: var(--muted);
}

.scale-panel {
  display: grid;
  gap: 16px;
}

.scale-panel .panel-head {
  margin-bottom: 0;
}

.quick-ref-panel {
  display: grid;
  gap: 14px;
}

.quick-ref-panel .panel-head {
  margin-bottom: 0;
}

.quick-ref-panel-layout {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

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

.quick-ref-priorities .urgency-chip {
  justify-content: center;
  width: 100%;
}

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

.quick-progress-item {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 14px 10px;
  border: 1px solid rgba(47, 109, 246, 0.08);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 249, 255, 0.96));
  text-align: center;
}

.quick-progress-item .scale-diagram {
  min-width: 0;
  justify-content: center;
}

.quick-progress-item strong {
  font-size: 1rem;
  color: var(--brand-deep);
}

.quick-progress-item span:last-child {
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--muted);
}

.panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}

.topbar,
.composer-panel,
.table-panel,
.scale-panel {
  padding: 24px;
}

.panel-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.table-head-side {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.auth-form,
.task-form {
  display: grid;
  gap: 14px;
}

.task-form {
  grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
  align-items: end;
}

.task-form .wide {
  grid-column: span 1;
}

label {
  display: grid;
  gap: 8px;
}

label span {
  font-size: 0.92rem;
  font-weight: 700;
}

input,
select,
button {
  font: inherit;
}

input,
select {
  width: 100%;
  padding: 0.88rem 1rem;
  border: 1px solid rgba(29, 36, 51, 0.12);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--ink);
}

input:focus,
select:focus {
  outline: 2px solid rgba(47, 109, 246, 0.16);
  border-color: rgba(47, 109, 246, 0.48);
}

input[type="radio"] {
  width: auto;
  padding: 0;
  margin: 0;
}

button {
  cursor: pointer;
  border: 0;
}

.primary-button,
.ghost-button {
  padding: 0.9rem 1.15rem;
  border-radius: 16px;
  font-weight: 700;
  touch-action: manipulation;
}

.primary-button {
  background: linear-gradient(135deg, var(--brand), #4f8cff);
  color: white;
}

.primary-button:hover {
  filter: brightness(0.97);
}

.ghost-button {
  border: 1px solid rgba(29, 36, 51, 0.12);
  background: rgba(255, 255, 255, 0.55);
  color: var(--ink);
}

.demo-hint {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 16px;
  background: #f5f8ff;
}

.demo-hint code {
  font-family: "SFMono-Regular", ui-monospace, monospace;
}

.dashboard {
  display: grid;
  gap: 16px;
}

.product-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.mode-card {
  display: grid;
  justify-items: start;
  gap: 8px;
  padding: 16px;
  border: 1px solid rgba(47, 109, 246, 0.12);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(243, 248, 255, 0.96));
  text-align: left;
}

.mode-card img {
  width: 44px;
  height: 44px;
}

.mode-card strong {
  font-size: 0.98rem;
}

.mode-card span {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.mode-card.is-active {
  border-color: rgba(47, 109, 246, 0.42);
  background: linear-gradient(180deg, rgba(232, 240, 255, 0.96), rgba(255, 255, 255, 0.98));
  box-shadow: 0 12px 24px rgba(47, 109, 246, 0.1);
}

.mobile-spotlight {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 24px;
  background:
    linear-gradient(135deg, rgba(47, 109, 246, 0.07), rgba(255, 255, 255, 0.96)),
    linear-gradient(180deg, #ffffff, #f8fbff);
}

.mobile-spotlight-copy h3 {
  margin: 0.2rem 0 0.45rem;
}

.mobile-spotlight-copy p:last-child {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.mobile-spotlight-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  max-width: 340px;
}

.mobile-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.62rem 0.9rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(47, 109, 246, 0.12);
  color: var(--brand-deep);
  font-size: 0.9rem;
  font-weight: 700;
}

.topbar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding: 22px 24px;
  border-color: rgba(47, 109, 246, 0.1);
  background:
    radial-gradient(circle at top right, rgba(96, 165, 250, 0.14), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(243, 248, 255, 0.94));
}

.topbar::after {
  content: "";
  position: absolute;
  inset: auto -30px -46px auto;
  width: 148px;
  height: 148px;
  border-radius: 50%;
  background: rgba(47, 109, 246, 0.06);
  pointer-events: none;
}

.topbar-brand {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  position: relative;
  z-index: 1;
}

.topbar-logo {
  width: 54px;
  height: 54px;
  flex: 0 0 auto;
}

.eyebrow,
.form-error,
.empty-state,
.live-pill {
  color: var(--muted);
}

.topbar-note {
  margin: 6px 0 0;
  max-width: 36rem;
  color: var(--muted);
  font-size: 0.94rem;
}

.scale-diagram {
  display: grid;
  grid-template-columns: repeat(4, 16px);
  align-items: end;
  gap: 8px;
  min-width: 88px;
}

.scale-column {
  display: block;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.2);
}

.scale-column.stage-0 {
  height: 26px;
}

.scale-column.stage-1 {
  height: 38px;
}

.scale-column.stage-2 {
  height: 52px;
}

.scale-column.stage-3 {
  height: 66px;
}

.scale-column.status-step.is-active.stage-0 {
  background: linear-gradient(180deg, #f87171, #ef4444);
  border-color: rgba(239, 68, 68, 0.5);
}

.status-step.is-active.stage-1 {
  background: linear-gradient(180deg, #fbbf24, #f59e0b);
  border-color: rgba(245, 158, 11, 0.5);
}

.status-step.is-active.stage-2 {
  background: linear-gradient(180deg, #a3e635, #84cc16);
  border-color: rgba(132, 204, 22, 0.5);
}

.status-step.is-active.stage-3 {
  background: linear-gradient(180deg, #4ade80, #22c55e);
  border-color: rgba(34, 197, 94, 0.5);
}

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

.stat-card {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 8px;
  min-height: 80px;
  padding: 14px 18px;
  border: 1px solid rgba(47, 109, 246, 0.08);
  background:
    radial-gradient(circle at top right, rgba(96, 165, 250, 0.14), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(243, 248, 255, 0.94));
}



.stat-card span {
  display: block;
  margin-bottom: 0;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.stat-card strong {
  font-size: 2rem;
  line-height: 1;
}

.live-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.55rem 0.8rem;
  border-radius: 999px;
  background: rgba(31, 169, 113, 0.12);
  color: #1c6d34;
}

.live-pill::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 8px rgba(36, 161, 72, 0.1);
}

.filter-summary {
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 0.8rem;
  border-radius: 999px;
  background: rgba(47, 109, 246, 0.08);
  color: var(--brand-deep);
  font-size: 0.9rem;
  font-weight: 700;
}

.table-panel {
  padding: 22px 24px;
  border-color: rgba(47, 109, 246, 0.08);
  background:
    radial-gradient(circle at top right, rgba(96, 165, 250, 0.1), transparent 24%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 250, 255, 0.96));
}

.table-panel .panel-head {
  margin-bottom: 14px;
}

.table-panel h3 {
  margin: 0.25rem 0 0;
  font-size: 1.35rem;
}

.table-panel .eyebrow {
  color: var(--brand-deep);
}

.table-panel .ghost-button {
  background: rgba(255, 255, 255, 0.88);
}

.table-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(150px, 0.8fr)) auto auto;
  gap: 12px;
  margin-bottom: 18px;
  padding: 16px;
  border: 1px solid rgba(47, 109, 246, 0.08);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(241, 247, 255, 0.96));
}

.table-toolbar label {
  gap: 6px;
}

.table-toolbar label span {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.toolbar-search input {
  padding-left: 1.1rem;
}

.view-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.view-toggle-button {
  padding: 6px;
  border-radius: 8px;
  background: transparent;
  color: #94a3b8;
  border: none;
  cursor: pointer;
  touch-action: manipulation;
  display: flex;
  align-items: center;
  justify-content: center;
}

.view-toggle-button.is-active {
  background: rgba(148, 163, 184, 0.15);
  color: var(--brand-deep);
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid rgba(47, 109, 246, 0.08);
  border-radius: 22px;
  padding: 8px 10px 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(243, 248, 255, 0.86)),
    radial-gradient(circle at top right, rgba(96, 165, 250, 0.12), transparent 30%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 18px 34px rgba(25, 45, 78, 0.06);
}

table {
  width: 100%;
  min-width: 1040px;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0 8px;
}

.th-label {
  width: 40%;
}

.th-kind {
  width: 136px;
}

.th-color {
  width: 78px;
  text-align: center;
}

.th-status {
  width: 168px;
}

.th-related {
  width: 180px;
}

.th-actions {
  width: 160px;
}

thead th {
  text-align: left;
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 14px 12px;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  background: rgba(246, 249, 255, 0.82);
  backdrop-filter: blur(12px);
}

thead th:first-child {
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
}

thead th:last-child {
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;
}

tbody td {
  padding: 12px 10px;
  border-top: 1px solid rgba(47, 109, 246, 0.08);
  border-bottom: 1px solid rgba(47, 109, 246, 0.08);
  vertical-align: top;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 255, 0.98));
  box-shadow: 0 12px 22px rgba(20, 33, 61, 0.05);
}

tbody td:first-child {
  border-left: 1px solid rgba(47, 109, 246, 0.08);
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  padding-left: 16px;
}

tbody td:last-child {
  border-right: 1px solid rgba(47, 109, 246, 0.08);
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  padding-right: 16px;
}

.task-row {
  transition: transform 160ms ease;
}

.task-row:hover td {
  transform: translateY(-1px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(240, 247, 255, 0.99));
  box-shadow:
    0 16px 28px rgba(20, 33, 61, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.task-row--high td {
  border-color: rgba(223, 79, 72, 0.12);
}

.task-row--medium td {
  border-color: rgba(239, 139, 23, 0.12);
}

.task-row--low td {
  border-color: rgba(31, 169, 113, 0.12);
}

.task-row .cell-number {
  position: relative;
}

.task-row .cell-number::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 4px;
  border-radius: 999px;
  background: rgba(147, 197, 253, 0.6);
}

.task-row--low .cell-number::before {
  background: linear-gradient(180deg, #bbf7d0, #1fa971);
}

.task-row--medium .cell-number::before {
  background: linear-gradient(180deg, #fde68a, #ef8b17);
}

.task-row--high .cell-number::before {
  background: linear-gradient(180deg, #fecaca, #df4f48);
}

.cell-number {
  font-weight: 800;
  width: 110px;
}

.number-field {
  display: inline-grid;
  gap: 8px;
}

.number-field span {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.task-number-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  padding: 0.5rem 0.7rem;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(232, 240, 255, 1), rgba(255, 255, 255, 1));
  color: var(--brand-deep);
  font-weight: 800;
  border: 1px solid rgba(47, 109, 246, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.status-stack {
  display: grid;
  gap: 8px;
  min-width: 190px;
}

.status-step-control {
  display: inline-grid;
  grid-template-columns: repeat(4, 22px);
  align-items: end;
  gap: 8px;
  width: max-content;
  max-width: 100%;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.status-step {
  align-self: end;
  width: 22px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.16);
  opacity: 0.55;
  transition: transform 120ms ease, opacity 120ms ease, background 120ms ease;
}

.status-step:hover {
  transform: translateY(-1px);
}

.status-step.stage-0 {
  height: 12px;
}

.status-step.stage-1 {
  height: 20px;
}

.status-step.stage-2 {
  height: 28px;
}

.status-step.stage-3 {
  height: 36px;
}

.status-step.is-active {
  opacity: 1;
}

.status-step.is-active.stage-0 {
  background: var(--blue-0);
}

.status-step.is-active.stage-1 {
  background: var(--blue-1);
}

.status-step.is-active.stage-2 {
  background: var(--blue-2);
}

.status-step.is-active.stage-3 {
  background: var(--blue-3);
}

.status-step.is-current {
  box-shadow: 0 0 0 3px rgba(47, 109, 246, 0.12);
}

.status-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.92rem;
}

.status-label-row strong {
  color: var(--brand-deep);
}

.status-mini-index {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.status-scale {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
  gap: 7px;
  padding: 4px 6px;
  border-radius: 16px;
  background: transparent;
  border: none;
  box-shadow: none;
}

.status-bar {
  display: block;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.18);
  transition: background 160ms ease, opacity 160ms ease;
}

.status-bar.stage-0 {
  height: 16px;
}

.status-bar.stage-1 {
  height: 24px;
}

.status-bar.stage-2 {
  height: 34px;
}

.status-bar.stage-3 {
  height: 44px;
}

.status-bar.is-active.stage-0 {
  background: linear-gradient(180deg, #f87171, #ef4444);
}

.status-bar.is-active.stage-1 {
  background: linear-gradient(180deg, #fbbf24, #f59e0b);
}

.status-bar.is-active.stage-2 {
  background: linear-gradient(180deg, #a3e635, #84cc16);
}

.status-bar.is-active.stage-3 {
  background: linear-gradient(180deg, #4ade80, #22c55e);
}

.status-bar:not(.is-active) {
  opacity: 0.4;
}

.number-input {
  max-width: 96px;
}

.task-title {
  margin-bottom: 6px;
  font-weight: 700;
  line-height: 1.45;
  font-size: 1rem;
}

.task-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.task-updated-pill {
  display: inline-block;
  color: #64748b;
  font-size: 0.82rem;
  white-space: nowrap;
}

.urgency-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.92rem;
  padding: 0.52rem 0.72rem;
  border-radius: 999px;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(23, 32, 51, 0.08);
  font-weight: 700;
}

.urgency-chip--high {
  background: linear-gradient(135deg, rgba(255, 244, 244, 0.98), rgba(255, 255, 255, 0.98));
  border-color: rgba(223, 79, 72, 0.16);
}

.urgency-chip--medium {
  background: linear-gradient(135deg, rgba(255, 249, 239, 0.98), rgba(255, 255, 255, 0.98));
  border-color: rgba(239, 139, 23, 0.16);
}

.urgency-chip--low {
  background: linear-gradient(135deg, rgba(242, 255, 249, 0.98), rgba(255, 255, 255, 0.98));
  border-color: rgba(31, 169, 113, 0.16);
}

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

.dot-high {
  background: var(--red);
}

.dot-medium {
  background: var(--orange);
}

.dot-low {
  background: var(--green);
}

.urgency-dot,
.urgency-dot-button {
  display: inline-block;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(29, 36, 51, 0.04);
}

.urgency-dot-button {
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.urgency-dot-button:hover {
  transform: scale(1.08);
  box-shadow: 0 0 0 7px rgba(47, 109, 246, 0.1);
}

.status-select,
.assign-select,
.kind-select {
  min-width: 180px;
}

.inline-input,
.inline-text {
  width: 100%;
  padding: 0.75rem 0.85rem;
  border: 1px solid rgba(29, 36, 51, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
}

.inline-text {
  min-width: 280px;
}

.cell-kind {
  width: 136px;
}

.kind-select {
  width: 100%;
  min-width: 0;
  padding: 0.7rem 0.8rem;
  border-radius: 13px;
}

.kind-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 112px;
  padding: 0.48rem 0.68rem;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 800;
  border: 1px solid rgba(47, 109, 246, 0.1);
}

.kind-pill--individual {
  color: #0f766e;
  background: rgba(20, 184, 166, 0.1);
}

.kind-pill--group {
  color: var(--brand-deep);
  background: rgba(47, 109, 246, 0.09);
}

.cell-urgency {
  text-align: center;
  vertical-align: middle;
}

.cell-status {
  vertical-align: middle;
}

.cell-related.is-empty {
  color: transparent;
  pointer-events: none;
}

.cell-actions {
  display: table-cell;
  vertical-align: middle;
  padding-left: 0;
}

.table-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  padding: 0.78rem 0.95rem;
  border-radius: 14px;
  background: rgba(29, 36, 51, 0.08);
  color: var(--ink);
  font-weight: 700;
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

.table-button.compact-action {
  min-width: 0;
  padding-inline: 0.85rem;
}

.table-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(33, 53, 85, 0.08);
}

.table-button.is-primary {
  background: linear-gradient(135deg, var(--brand), #4f8cff);
  color: #fff;
}

[data-tour].tour-active {
  position: relative;
  z-index: 31;
  box-shadow: 0 0 0 3px rgba(47, 109, 246, 0.24), var(--shadow);
  border-radius: 20px;
}

.participant-note {
  display: inline-flex;
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  background: rgba(29, 36, 51, 0.05);
  color: var(--muted);
  font-size: 0.9rem;
}

.pill-assignee {
  display: inline-flex;
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(243, 246, 252, 0.96), rgba(255, 255, 255, 0.96));
  color: var(--ink);
  font-size: 0.92rem;
  border: 1px solid rgba(23, 32, 51, 0.06);
}

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

.board-column {
  display: grid;
  grid-template-rows: auto 1fr;
  align-content: start;
  gap: 12px;
  padding: 14px;
  border-radius: 24px;
  border: 1px solid rgba(47, 109, 246, 0.1);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(244, 249, 255, 0.92)),
    radial-gradient(circle at top center, rgba(96, 165, 250, 0.08), transparent 30%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 18px 34px rgba(20, 33, 61, 0.05);
}

.board-column--status-0 {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(244, 249, 255, 0.92)),
    radial-gradient(circle at top center, rgba(148, 163, 184, 0.1), transparent 35%);
}

.board-column--status-1 {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(239, 247, 255, 0.94)),
    radial-gradient(circle at top center, rgba(147, 197, 253, 0.12), transparent 35%);
}

.board-column--status-2 {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(234, 244, 255, 0.95)),
    radial-gradient(circle at top center, rgba(96, 165, 250, 0.14), transparent 35%);
}

.board-column--status-3 {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(237, 250, 244, 0.94)),
    radial-gradient(circle at top center, rgba(31, 169, 113, 0.12), transparent 35%);
}

.board-column-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.board-column-head h4 {
  margin: 0.25rem 0 0;
  font-size: 1.05rem;
}

.board-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 0.7rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--brand-deep);
  font-weight: 800;
  border: 1px solid rgba(47, 109, 246, 0.1);
}

.board-column-body {
  display: grid;
  gap: 12px;
  align-content: start;
  grid-auto-rows: max-content;
}

.board-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: 22px;
  border: 1px solid rgba(47, 109, 246, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 251, 255, 0.98));
  box-shadow: 0 16px 28px rgba(20, 33, 61, 0.06);
  animation: premiumRise 520ms ease both;
  animation-delay: var(--card-delay, 0ms);
}

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

.board-card-title {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
}

.board-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.board-card-status .status-stack {
  min-width: 0;
}

.board-empty {
  padding: 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.74);
  color: var(--muted);
  text-align: center;
  border: 1px dashed rgba(47, 109, 246, 0.16);
}

@keyframes premiumRise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.empty-state {
  margin: 0;
  padding-top: 12px;
}

.empty-state-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px;
  border: 1px solid rgba(47, 109, 246, 0.1);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(238, 245, 255, 0.96)),
    radial-gradient(circle at top right, rgba(96, 165, 250, 0.12), transparent 30%);
  box-shadow: 0 18px 34px rgba(20, 33, 61, 0.06);
}

.empty-state-copy h4 {
  margin: 0.3rem 0 0.45rem;
  font-size: 1.15rem;
}

.empty-state-copy p:last-child {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.empty-state-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.first-run-banner {
  display: none !important;
}

.first-run-copy h3 {
  margin: 0.2rem 0 0.45rem;
  font-size: 1.15rem;
}

.first-run-copy p:last-child {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.first-run-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.form-error {
  margin: 0;
  color: var(--brand-deep);
}

.urgency-picker-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.urgency-picker-fieldset legend { font-size: 0.85rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: 0.25rem; }
.urgency-picker-options { display: flex; gap: 14px; margin-top: 6px; padding-bottom: 6px; }
.urgency-option input { display: none; }
.urgency-option .dot-color {
  display: inline-block; width: 28px; height: 28px; border-radius: 50%;
  cursor: pointer; opacity: 0.4; transition: transform 200ms ease, opacity 200ms ease;
  box-shadow: 0 0 0 2px var(--body-bg); border: 1px solid rgba(0,0,0,0.1);
}
.urgency-option.color-low .dot-color { background-color: var(--green); }
.urgency-option.color-medium .dot-color { background-color: var(--orange); }
.urgency-option.color-high .dot-color { background-color: var(--red); }
.urgency-option input:checked + .dot-color { opacity: 1; transform: scale(1.25); }
.urgency-option.color-low input:checked + .dot-color { box-shadow: 0 0 0 2px var(--body-bg), 0 0 0 4px var(--green); border-color: transparent; }
.urgency-option.color-medium input:checked + .dot-color { box-shadow: 0 0 0 2px var(--body-bg), 0 0 0 4px var(--orange); border-color: transparent; }
.urgency-option.color-high input:checked + .dot-color { box-shadow: 0 0 0 2px var(--body-bg), 0 0 0 4px var(--red); border-color: transparent; }

.form-status-picker .status-scale { display: flex; gap: 8px; margin: 10px 0; }
.form-status-picker .status-bar { height: 8px; flex: 1; border-radius: 4px; background: rgba(29, 36, 51, 0.08); transition: background 250ms ease; cursor: pointer; }
.form-status-picker .status-bar.is-active.form-stage-0 { background: #a2a8b3; }
.form-status-picker .status-bar.is-active.form-stage-1 { background: #60a5fa; }
.form-status-picker .status-bar.is-active.form-stage-2 { background: #3b82f6; }
.form-status-picker .status-bar.is-active.form-stage-3 { background: #1fa971; }

.onboarding-backdrop {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at top left, rgba(47, 109, 246, 0.22), transparent 24%),
    radial-gradient(circle at bottom right, rgba(15, 139, 141, 0.18), transparent 24%),
    rgba(13, 20, 34, 0.48);
  backdrop-filter: blur(10px);
  pointer-events: none;
  overscroll-behavior: contain;
  z-index: 29;
}

.onboarding-backdrop[hidden],
.onboarding-modal[hidden],
.onboarding-stage-panel[hidden] {
  display: none !important;
}

.onboarding-modal {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 28px;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  pointer-events: auto;
  z-index: 30;
}

.onboarding-card {
  width: min(760px, 100%);
  padding: 26px;
  border: 1px solid rgba(47, 109, 246, 0.16);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 28px 48px rgba(17, 32, 61, 0.16);
  pointer-events: auto;
}

.onboarding-copy {
  display: grid;
  align-content: start;
  gap: 0;
}

.onboarding-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.onboarding-kicker,
.onboarding-step-count {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.onboarding-card h3 {
  margin: 0 0 0.55rem;
  font-size: 1.55rem;
}

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

.onboarding-highlight-label {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(220, 244, 246, 0.95), rgba(233, 244, 255, 0.96));
  border: 1px solid rgba(47, 109, 246, 0.1);
  color: var(--brand-deep);
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.5;
}

.onboarding-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
}

.onboarding-dismiss-choice {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  color: var(--muted);
  font-size: 0.94rem;
}

.onboarding-dismiss-choice input {
  width: 18px;
  height: 18px;
  accent-color: var(--brand);
}

.onboarding-nav {
  display: flex;
  gap: 10px;
}

.onboarding-stage {
  margin-top: 18px;
}

.onboarding-stage-panel {
  display: grid;
  gap: 12px;
  padding: 18px;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(247, 250, 255, 0.98), rgba(255, 255, 255, 0.98)),
    radial-gradient(circle at top right, rgba(96, 165, 250, 0.08), transparent 34%);
  border: 1px solid rgba(47, 109, 246, 0.08);
}

.onboarding-stage-title {
  font-size: 1.02rem;
  color: var(--brand-deep);
}

.onboarding-priority-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.onboarding-priority-row .urgency-chip {
  flex: 0 0 auto;
}

.onboarding-mini-scale {
  margin-top: 6px;
}

.onboarding-scale-chart {
  display: grid;
  gap: 8px;
}

.onboarding-scale-labels {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--brand-deep);
  text-align: center;
}

.onboarding-scale-statuses {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  font-size: 0.74rem;
  line-height: 1.35;
  color: var(--muted);
  text-align: center;
}

.onboarding-mode-grid {
  display: grid;
  gap: 12px;
}

.onboarding-mode-card {
  display: grid;
  gap: 8px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(47, 109, 246, 0.08);
  background: rgba(255, 255, 255, 0.84);
}

.onboarding-mode-card.is-active {
  border-color: rgba(47, 109, 246, 0.22);
  background: linear-gradient(135deg, rgba(236, 245, 255, 0.98), rgba(249, 252, 255, 0.98));
  box-shadow: 0 12px 24px rgba(20, 33, 61, 0.06);
}

.onboarding-mode-card strong {
  font-size: 0.98rem;
}

.onboarding-mode-card p {
  font-size: 0.92rem;
}

.onboarding-celebration {
  position: fixed;
  inset: auto 24px 24px auto;
  pointer-events: auto;
  z-index: 31;
}

.onboarding-celebration-card {
  width: min(420px, calc(100vw - 28px));
  padding: 22px;
  border-radius: 24px;
  border: 1px solid rgba(47, 109, 246, 0.14);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 24px 42px rgba(17, 32, 61, 0.16);
}

.onboarding-celebration-card h3 {
  margin: 0.35rem 0 0.55rem;
  font-size: 1.45rem;
}

.onboarding-celebration-card p:last-of-type {
  margin: 0;
  line-height: 1.6;
  color: var(--muted);
}

body[data-authenticated="false"] .account-menu {
  width: 100%;
}

body[data-authenticated="false"] #account-toggle {
  display: none;
}

body[data-authenticated="false"] .account-popover {
  display: block !important;
  position: static;
  width: 100%;
  box-shadow: none;
  border: none;
  background: transparent;
  padding: 0;
}

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

  .dashboard > .topbar,
  .dashboard > .first-run-banner,
  .dashboard > .composer-panel,
  .dashboard > .table-panel,
  .dashboard > .stats-grid,
  .dashboard > .scale-panel {
    grid-column: auto;
    grid-row: auto;
  }

  .dashboard > .scale-panel {
    position: static;
  }

  .app-shell {
    grid-template-columns: 1fr;
  }

  .hero-panel {
    min-height: auto;
    padding: 16px;
    border-radius: 20px;
  }

  .hero-panel h1,
  .hero-panel p {
    display: none;
  }
  
  .product-logo {
    width: 44px;
    height: 44px;
  }
  
  .hero-panel::before,
  .hero-panel::after {
    display: none;
  }

  .quick-ref-progress,
  .task-form {
    grid-template-columns: 1fr 1fr;
  }

  .product-switch {
    grid-template-columns: 1fr;
  }

  .mobile-spotlight {
    flex-direction: column;
    align-items: stretch;
  }

  .mobile-spotlight-badges {
    justify-content: flex-start;
    max-width: none;
  }

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

}

@media (max-width: 720px) {
  .app-shell {
    padding: 12px 12px calc(18px + var(--safe-bottom));
    gap: 12px;
  }

  .hero-panel,
  .topbar,
  .composer-panel,
  .table-panel,
  .scale-panel,
  .mobile-spotlight {
    padding: 14px;
    border-radius: 20px;
  }

  .workspace-session {
    align-items: flex-start;
    justify-content: space-between;
  }

  .topbar {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 16px;
  }

  .account-popover {
    left: 0;
    right: auto;
    width: min(340px, calc(100vw - 28px));
  }

  .topbar-brand {
    align-items: stretch;
  }

  .table-head-side,
  .panel-head {
    align-items: stretch;
  }

  .stats-grid,
  .quick-ref-priorities,
  .quick-ref-progress,
  .task-form {
    grid-template-columns: 1fr;
  }

  .quick-ref-panel-layout {
    grid-template-columns: 1fr;
  }

  .table-toolbar {
    grid-template-columns: 1fr;
    padding: 12px;
  }

  .tasks-board {
    grid-template-columns: 1fr;
  }

  .empty-state-card {
    flex-direction: column;
    align-items: stretch;
  }

  .first-run-banner {
    flex-direction: column;
    align-items: stretch;
  }

  .empty-state-actions {
    justify-content: stretch;
  }

  .first-run-actions {
    justify-content: stretch;
  }

  .view-toggle {
    width: 100%;
  }

  .view-toggle-button {
    flex: 1 1 0;
    min-width: 0;
  }

  .table-wrap {
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  .scale-diagram {
    justify-content: start;
  }

  .hero-panel h1 {
    font-size: 2rem;
  }

  .mobile-spotlight {
    gap: 14px;
  }

  .mobile-spotlight-copy p:last-child {
    font-size: 0.96rem;
  }

  .mobile-spotlight-badges {
    display: grid;
    grid-template-columns: 1fr;
  }

  .mobile-badge {
    justify-content: center;
  }

  .stats-grid {
    display: flex;
    overflow-x: auto;
    gap: 12px;
    padding-bottom: 2px;
    scroll-snap-type: x proximity;
  }

  .stat-card {
    min-width: 170px;
    padding: 18px;
    scroll-snap-align: start;
  }

  .mode-card {
    padding: 14px;
  }

  .ghost-button,
  .primary-button {
    min-height: 50px;
  }

  .onboarding-modal {
    padding: 14px;
  }

  .inline-text,
  .status-select,
  .assign-select,
  .kind-select,
  .table-button {
    min-width: 0;
  }

  .status-select,
  .assign-select,
  .kind-select,
  .inline-input,
  .inline-text {
    min-height: 48px;
  }

  table,
  thead,
  tbody,
  th,
  td,
  tr {
    display: block;
  }

  table {
    min-width: 0;
    border-spacing: 0;
  }

  thead {
    display: none;
  }

  tbody tr {
    margin-bottom: 14px;
    padding: 14px;
    border: 1px solid rgba(47, 109, 246, 0.08);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 250, 255, 0.98));
    box-shadow: 0 12px 24px rgba(20, 33, 61, 0.06);
  }

  .task-row .cell-number::before {
    top: 0;
    bottom: 0;
  }

  tbody td,
  tbody .cell-actions {
    display: grid;
    gap: 6px;
    padding: 9px 0;
    border-top: 0;
    border-bottom: 0;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }

  tbody td::before {
    content: attr(data-label);
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
  }

  .cell-actions .table-button,
  .cell-status .status-select,
  .cell-status .status-step-control,
  .cell-kind .kind-select,
  .cell-related .assign-select {
    width: 100%;
  }

  .cell-urgency {
    text-align: left;
  }

  .task-number-pill {
    min-width: 0;
    justify-content: flex-start;
  }

  .status-stack {
    min-width: 0;
  }

  .status-label-row {
    gap: 8px;
    font-size: 0.88rem;
  }

  .status-scale {
    padding: 10px;
  }

  .participant-note {
    justify-content: center;
    width: 100%;
  }

  .onboarding-card {
    padding: 18px;
    border-radius: 20px;
  }

  .first-run-actions .ghost-button,
  .first-run-actions .primary-button {
    width: 100%;
  }

  .onboarding-celebration {
    left: 14px;
    right: 14px;
    bottom: 14px;
    inset: auto 14px 14px 14px;
  }

  .onboarding-celebration-card {
    width: auto;
    border-radius: 20px;
  }

  .onboarding-actions,
  .onboarding-nav {
    flex-direction: column;
    align-items: stretch;
  }
}

/* New Action Icon Buttons */
.action-svg-btn {
  background: transparent;
  border: none;
  padding: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: #64748b;
  transition: background 0.15s ease, color 0.15s ease;
}

.action-svg-btn:hover {
  background: rgba(148, 163, 184, 0.15);
  color: var(--brand, #3b82f6);
}

.action-svg-btn svg {
  width: 20px;
  height: 20px;
}

.kind-toggle-btn:hover {
  opacity: 0.8;
}

/* Clickable Bar Chart Graphic */
.chart-container {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 48px;
  width: 120px;
}

.chart-bar {
  flex: 1;
  border-radius: 4px;
  background: rgba(148, 163, 184, 0.15);
  transition: all 0.2s ease;
  cursor: pointer;
  border: none;
  padding: 0;
  width: 100%;
}

.chart-bar:hover {
  filter: brightness(0.9);
}

.chart-bar.stage-0 { height: 16px; }
.chart-bar.stage-1 { height: 26px; }
.chart-bar.stage-2 { height: 36px; }
.chart-bar.stage-3 { height: 46px; }

.chart-bar.is-active.stage-0 { background: linear-gradient(180deg, #f87171, #ef4444); }
.chart-bar.is-active.stage-1 { background: linear-gradient(180deg, #fbbf24, #f59e0b); }
.chart-bar.is-active.stage-2 { background: linear-gradient(180deg, #a3e635, #84cc16); }
.chart-bar.is-active.stage-3 { background: linear-gradient(180deg, #4ade80, #22c55e); }

/* ============================================================
   REFONTE PRO + RESPONSIVE — 2026-05-04
   Surcharge ciblée des styles existants pour un look pro
   et un mode mobile en cards. Aucune des règles ci-dessus
   n'est modifiée — tout est ajouté en cascade.
   ============================================================ */

:root {
  --pro-bg: #f5f7fb;
  --pro-surface: #ffffff;
  --pro-surface-2: #f9fafd;
  --pro-ink: #0f172a;
  --pro-ink-soft: #475569;
  --pro-muted: #94a3b8;
  --pro-line: #e2e8f0;
  --pro-line-strong: #cbd5e1;
  --pro-brand: #2563eb;
  --pro-brand-deep: #1d4ed8;
  --pro-brand-soft: #eff6ff;
  --pro-success: #16a34a;
  --pro-warning: #f59e0b;
  --pro-danger: #dc2626;
  --pro-radius: 14px;
  --pro-radius-sm: 10px;
  --pro-shadow-sm: 0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --pro-shadow-md: 0 4px 6px -1px rgba(15,23,42,.06), 0 2px 4px -2px rgba(15,23,42,.05);
  --pro-shadow-lg: 0 10px 15px -3px rgba(15,23,42,.08), 0 4px 6px -4px rgba(15,23,42,.05);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-feature-settings: "cv11", "ss01";
  letter-spacing: -0.005em;
  background:
    radial-gradient(circle at 20% -10%, rgba(37,99,235,.06), transparent 40%),
    radial-gradient(circle at 110% 110%, rgba(22,163,74,.04), transparent 40%),
    var(--pro-bg);
}

/* Panel base */
.panel {
  background: var(--pro-surface);
  border: 1px solid var(--pro-line);
  border-radius: var(--pro-radius);
  box-shadow: var(--pro-shadow-sm);
}

/* Topbar */
.topbar.panel {
  border-radius: var(--pro-radius);
  padding: 18px 22px;
}

.stat-card.panel {
  border-radius: var(--pro-radius-sm);
  padding: 14px 18px;
  background: linear-gradient(180deg, var(--pro-surface), var(--pro-surface-2));
}
.stat-card span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pro-muted);
  font-weight: 600;
}
.stat-card strong {
  color: var(--pro-ink);
  font-weight: 700;
}

/* Composer */
.composer-panel {
  padding: 24px 26px;
  border-radius: var(--pro-radius);
}
.composer-panel .panel-head h3 {
  color: var(--pro-ink);
  font-weight: 700;
  letter-spacing: -0.015em;
}
.composer-panel .eyebrow {
  color: var(--pro-brand);
  font-weight: 700;
  letter-spacing: 0.1em;
}

/* Inputs cohérents */
.task-form input[type="text"],
.task-form input[type="email"],
.task-form input[type="password"],
.task-form input[type="tel"],
.task-form input[type="date"],
.task-form select,
.auth-form input,
.toolbar-search input,
.table-toolbar select {
  border: 1px solid var(--pro-line-strong);
  border-radius: var(--pro-radius-sm);
  padding: 10px 12px;
  background: var(--pro-surface);
  color: var(--pro-ink);
  font-size: 14px;
  transition: border-color .15s, box-shadow .15s;
}
.task-form input:focus,
.task-form select:focus,
.auth-form input:focus,
.toolbar-search input:focus,
.table-toolbar select:focus {
  outline: none;
  border-color: var(--pro-brand);
  box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}

/* Toolbar du tableau */
.table-toolbar {
  background: var(--pro-surface-2);
  border: 1px solid var(--pro-line);
  border-radius: var(--pro-radius-sm);
  padding: 12px 14px;
  margin: 14px 0;
}
.table-toolbar label > span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pro-muted);
  font-weight: 600;
}

/* Vue toggle */
.view-toggle-button {
  border: 1px solid var(--pro-line-strong);
  background: var(--pro-surface);
  border-radius: var(--pro-radius-sm);
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--pro-ink-soft);
  transition: all .15s;
  cursor: pointer;
}
.view-toggle-button:hover { color: var(--pro-brand); border-color: var(--pro-brand); }
.view-toggle-button.is-active { background: var(--pro-brand); color: #fff; border-color: var(--pro-brand); }

/* Live pill */
.live-pill {
  background: linear-gradient(135deg, #dcfce7, #bbf7d0);
  color: #166534;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.live-pill::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #16a34a;
  margin-right: 6px;
  animation: pro-pulse 1.6s ease-in-out infinite;
}
@keyframes pro-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .4; transform: scale(.7); }
}
.filter-summary {
  background: var(--pro-brand-soft);
  color: var(--pro-brand-deep);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

/* Tableau pro */
.table-panel {
  padding: 24px 26px;
}
.table-wrap {
  border: 1px solid var(--pro-line);
  border-radius: var(--pro-radius-sm);
  overflow: hidden;
}
#tasks-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--pro-surface);
}
#tasks-table thead th {
  background: var(--pro-surface-2);
  color: var(--pro-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--pro-line);
  white-space: nowrap;
}
#tasks-table tbody td {
  padding: 14px;
  border-bottom: 1px solid var(--pro-line);
  font-size: 14px;
  color: var(--pro-ink);
  vertical-align: middle;
}
#tasks-table tbody tr:last-child td { border-bottom: none; }
.task-row { transition: background-color .15s; }
.task-row:hover td { background: var(--pro-surface-2); }
.task-row.is-editing td { background: rgba(37,99,235,.04); }

/* Bordure colorée à gauche selon priorité */
.task-row td:first-child { position: relative; }
.task-row td:first-child::before {
  content: "";
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: transparent;
}
.task-row--high   td:first-child::before { background: var(--pro-danger); }
.task-row--medium td:first-child::before { background: var(--pro-warning); }
.task-row--low    td:first-child::before { background: var(--pro-success); }

/* Largeurs colonnes */
.th-date     { width: 100px; }
.th-kind     { width: 70px;  text-align: center !important; }
.th-color    { width: 80px;  text-align: center !important; }
.th-status   { width: 140px; }
.th-deadline { width: 130px; }
.th-related  { width: 160px; }
.th-actions  { width: 150px; text-align: right !important; }

#tasks-table .cell-kind, #tasks-table .cell-urgency { text-align: center; }
#tasks-table .cell-actions { text-align: right; }

/* Cellule date — texte simple, pas de contour ni de fond */
.task-updated-pill {
  display: inline;
  background: transparent;
  border: 0;
  color: var(--pro-ink-soft);
  padding: 0;
  border-radius: 0;
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* Libellé */
.task-title {
  font-weight: 600;
  color: var(--pro-ink);
  letter-spacing: -0.005em;
}
.inline-text {
  width: 100%;
  border: 1px solid var(--pro-line-strong);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 14px;
  background: #fff;
}
.inline-text:focus {
  outline: none;
  border-color: var(--pro-brand);
  box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}

/* Pill assignee */
.pill-assignee {
  display: inline-block;
  background: var(--pro-brand-soft);
  color: var(--pro-brand-deep);
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

/* DEADLINE — texte simple, pas de fond ni de contour. Couleur = info */
.deadline-pill {
  display: inline;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 0;
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.deadline-pill small {
  font-size: 11px;
  font-weight: 500;
  opacity: .7;
  margin-left: 4px;
}
.deadline-pill--empty   { color: var(--pro-muted); }
.deadline-pill--ok      { color: var(--pro-ink-soft); }
.deadline-pill--soon    { color: #b45309; font-weight: 600; }
.deadline-pill--today   { color: #c2410c; font-weight: 700; }
.deadline-pill--overdue { color: #b91c1c; font-weight: 700; }

.inline-deadline {
  font-size: 13px;
  width: auto;
  min-width: 130px;
}

/* Boutons d'action ronds */
.row-actions {
  display: inline-flex;
  gap: 6px;
  justify-content: flex-end;
}
.action-svg-btn {
  width: 32px; height: 32px;
  border-radius: 8px;
  border: 1px solid var(--pro-line);
  background: var(--pro-surface);
  color: var(--pro-ink-soft);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all .15s;
  padding: 0;
}
.action-svg-btn:hover {
  color: var(--pro-brand);
  border-color: var(--pro-brand);
  background: var(--pro-brand-soft);
}
.action-svg-btn--save:hover  { color: var(--pro-success); border-color: var(--pro-success); background: #dcfce7; }
.action-svg-btn--danger:hover { color: var(--pro-danger);  border-color: var(--pro-danger);  background: #fee2e2; }
.action-svg-btn[disabled] { opacity: .5; cursor: wait; }

/* Boutons primaires */
.primary-button {
  background: linear-gradient(180deg, var(--pro-brand), var(--pro-brand-deep));
  color: #fff;
  border: none;
  font-weight: 600;
  letter-spacing: -0.005em;
  box-shadow: 0 1px 2px rgba(37,99,235,.3);
  transition: transform .1s, box-shadow .15s;
}
.primary-button:hover {
  box-shadow: 0 4px 12px rgba(37,99,235,.35);
  transform: translateY(-1px);
}
.primary-button:active { transform: translateY(0); }
.ghost-button {
  background: transparent;
  border: 1px solid var(--pro-line-strong);
  color: var(--pro-ink-soft);
  font-weight: 600;
  transition: all .15s;
}
.ghost-button:hover { border-color: var(--pro-brand); color: var(--pro-brand); }

/* Hero (côté gauche en mode déconnecté) */
.hero-panel {
  border-radius: var(--pro-radius);
  background: linear-gradient(160deg, #ffffff, #f8fafc 60%, #eff6ff);
  border: 1px solid var(--pro-line);
  box-shadow: var(--pro-shadow-md);
}

/* ============================================================
   RESPONSIVE — Tablette
   ============================================================ */
@media (max-width: 1024px) {
  .app-shell {
    grid-template-columns: 1fr !important;
    padding: 16px;
    gap: 16px;
  }
  .topbar.panel { flex-wrap: wrap; gap: 16px; }
  .stats-grid { width: 100%; }
  .table-panel, .composer-panel { padding: 18px; }
  .table-toolbar { flex-wrap: wrap; gap: 10px; }
  .th-date, .th-kind { display: none; }
  .cell-date, .cell-kind { display: none; }
}

/* ============================================================
   RESPONSIVE — Mobile : transformation en cards
   ============================================================ */
@media (max-width: 720px) {
  .app-shell { padding: 12px; gap: 12px; }
  .table-panel, .composer-panel { padding: 14px; border-radius: 12px; }
  .panel-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .table-head-side { width: 100%; justify-content: space-between; }
  .composer-panel form.task-form { display: grid; grid-template-columns: 1fr; gap: 12px; }
  .composer-panel form.task-form .wide { grid-column: 1 !important; }
  .stats-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px;
  }
  .stat-card { padding: 10px 12px !important; }
  .stat-card span { font-size: 10px; }
  .stat-card strong { font-size: 18px; }

  /* Tableau → cards */
  .table-wrap { border: none; background: transparent; overflow: visible; }
  #tasks-table, #tasks-table thead, #tasks-table tbody, #tasks-table tr, #tasks-table td {
    display: block;
    width: 100%;
  }
  #tasks-table thead { display: none; }
  #tasks-table tbody { display: block; }
  #tasks-table tr.task-row {
    background: var(--pro-surface);
    border: 1px solid var(--pro-line);
    border-radius: 12px;
    padding: 12px 14px 12px 18px;
    margin-bottom: 12px;
    box-shadow: var(--pro-shadow-sm);
    position: relative;
  }
  #tasks-table tr.task-row::before {
    content: "";
    position: absolute;
    left: 0; top: 12px; bottom: 12px;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: var(--pro-line);
  }
  #tasks-table tr.task-row--high::before   { background: var(--pro-danger); }
  #tasks-table tr.task-row--medium::before { background: var(--pro-warning); }
  #tasks-table tr.task-row--low::before    { background: var(--pro-success); }
  #tasks-table tr.task-row td {
    padding: 6px 0;
    border: none;
    text-align: left !important;
  }
  #tasks-table tr.task-row td:first-child::before { display: none; }
  /* Pseudo-label depuis data-label */
  #tasks-table tr.task-row td::before {
    content: attr(data-label);
    display: inline-block;
    width: 110px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--pro-muted);
    font-weight: 700;
    vertical-align: middle;
  }
  #tasks-table tr.task-row td.cell-label::before { display: none; }
  #tasks-table tr.task-row td.cell-label {
    font-size: 16px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--pro-line);
  }
  #tasks-table tr.task-row td.cell-label .task-title { font-size: 16px; }

  #tasks-table tr.task-row td.cell-actions {
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px dashed var(--pro-line);
  }
  #tasks-table tr.task-row td.cell-actions::before { display: none; }
  #tasks-table tr.task-row td.cell-actions .row-actions { justify-content: flex-end; }

  #tasks-table tr.task-row td.cell-related.is-empty { display: none; }
}

/* OAuth buttons */
.oauth-buttons { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.oauth-divider {
  text-align: center;
  position: relative;
  font-size: 11px;
  color: var(--pro-muted, #94a3b8);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 6px 0;
}
.oauth-divider::before, .oauth-divider::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 40%;
  height: 1px;
  background: var(--pro-line, #e2e8f0);
}
.oauth-divider::before { left: 0; }
.oauth-divider::after  { right: 0; }
.oauth-divider span { background: #fff; padding: 0 10px; }

.oauth-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--pro-line-strong, #cbd5e1);
  background: #fff;
  color: var(--pro-ink, #0f172a);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: all .15s;
  cursor: pointer;
}
.oauth-btn:hover {
  border-color: var(--pro-brand, #2563eb);
  background: var(--pro-brand-soft, #eff6ff);
}
.oauth-btn[hidden] { display: none !important; }

/* ============================================================
   RESPONSIVE V2 — paliers ameliores, surcharge des regles plus haut
   ============================================================ */

/* Palier "laptop etroit" : 880-1100 px
   - sidebar en colonne unique
   - le composer reste sur 2 colonnes (libelle + reste)
   - on garde toutes les colonnes du tableau mais resserrees */
@media (max-width: 1100px) {
  .app-shell { grid-template-columns: 1fr !important; padding: 18px; gap: 18px; }
  .composer-panel form.task-form { gap: 12px 16px; }
  #tasks-table thead th { font-size: 10px; padding: 10px; }
  #tasks-table tbody td { padding: 12px 10px; font-size: 13px; }
  .th-date     { width: 78px; }
  .th-deadline { width: 110px; }
  .th-related  { width: 130px; }
  .th-actions  { width: 130px; }
}

/* Palier "tablette" : 560-880 px
   - cacher les colonnes Date, Type, Priorite (info portee par le bord gauche colore)
   - composer en grille auto-fit */
@media (max-width: 880px) {
  .app-shell { padding: 14px; gap: 14px; }
  .table-panel, .composer-panel { padding: 18px; }
  .topbar.panel { flex-direction: column; align-items: flex-start; gap: 14px; }
  .stats-grid { width: 100%; display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 8px; }
  .stat-card { padding: 12px; }
  .composer-panel form.task-form {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    gap: 12px;
  }
  .composer-panel form.task-form .wide { grid-column: 1 / -1 !important; }
  .table-toolbar { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
  .table-toolbar .toolbar-search { grid-column: 1 / -1; }
  .table-toolbar .view-toggle { grid-column: 1 / -1; justify-self: end; }
  /* tableau : on cache les colonnes lourdes */
  .th-date, .cell-date,
  .th-kind, .cell-kind,
  .th-color, .cell-urgency { display: none !important; }
  /* le bord gauche colore (deja en place) suffit pour la priorite */
}

/* Palier "mobile" : <= 560 px
   - tableau passe en cards verticales (pas en table) */
@media (max-width: 560px) {
  .app-shell { padding: 10px; gap: 10px; }
  .hero-panel { display: none; }  /* sidebar inutile une fois connecte */
  .table-panel, .composer-panel { padding: 14px; border-radius: 12px; }
  .panel-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .table-head-side { width: 100%; justify-content: space-between; }

  .stats-grid { gap: 6px; }
  .stat-card { padding: 10px 12px !important; }
  .stat-card span { font-size: 10px; letter-spacing: 0.04em; }
  .stat-card strong { font-size: 18px; }

  .composer-panel form.task-form { grid-template-columns: 1fr !important; }
  .table-toolbar { grid-template-columns: 1fr !important; }
  .table-toolbar .view-toggle { justify-self: stretch; display: flex; gap: 8px; }
  .table-toolbar .view-toggle-button { flex: 1; }

  /* Cards : on annule les regles d'affichage de table */
  .table-wrap { border: none; background: transparent; overflow: visible; }
  #tasks-table, #tasks-table thead, #tasks-table tbody, #tasks-table tr, #tasks-table td {
    display: block;
    width: 100%;
  }
  #tasks-table thead { display: none !important; }
  #tasks-table tbody { display: block; }
  #tasks-table tr.task-row {
    background: var(--pro-surface, #fff);
    border: 1px solid var(--pro-line, #e2e8f0);
    border-radius: 12px;
    padding: 14px 16px 14px 20px;
    margin-bottom: 12px;
    box-shadow: var(--pro-shadow-sm, 0 1px 3px rgba(0,0,0,.06));
    position: relative;
  }
  #tasks-table tr.task-row::before {
    content: "";
    position: absolute;
    left: 0; top: 14px; bottom: 14px;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: var(--pro-line, #e2e8f0);
  }
  #tasks-table tr.task-row--high::before   { background: var(--pro-danger,  #dc2626); }
  #tasks-table tr.task-row--medium::before { background: var(--pro-warning, #f59e0b); }
  #tasks-table tr.task-row--low::before    { background: var(--pro-success, #16a34a); }
  #tasks-table tr.task-row td {
    padding: 5px 0;
    border: none;
    text-align: left !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  #tasks-table tr.task-row td:first-child::before { display: none; }
  /* Pseudo-label */
  #tasks-table tr.task-row td::before {
    content: attr(data-label);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--pro-muted, #94a3b8);
    font-weight: 700;
    flex-shrink: 0;
  }
  /* Le libelle prend tout */
  #tasks-table tr.task-row td.cell-label {
    display: block;
    font-size: 16px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--pro-line, #e2e8f0);
  }
  #tasks-table tr.task-row td.cell-label::before { display: none; }
  #tasks-table tr.task-row td.cell-label .task-title { font-size: 16px; }
  /* Actions : pleine largeur, alignees a droite, separees */
  #tasks-table tr.task-row td.cell-actions {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--pro-line, #e2e8f0);
    justify-content: flex-end;
  }
  #tasks-table tr.task-row td.cell-actions::before { display: none; }

  /* Cellule "Participant" cachee en solo */
  #tasks-table tr.task-row td.cell-related.is-empty { display: none; }
  /* Date / Type / Priorite : on ne les affiche pas du tout sur mobile (info portee par le bord gauche) */
  #tasks-table tr.task-row td.cell-date,
  #tasks-table tr.task-row td.cell-kind,
  #tasks-table tr.task-row td.cell-urgency { display: none; }
}

/* === Mon réseau (carnet de contacts) === */
.panel-subtitle {
  margin-top: 4px;
  font-size: 13px;
  color: var(--pro-muted, #94a3b8);
  font-weight: 400;
}
.contacts-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.contact-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--pro-surface-2, #f9fafd);
  border: 1px solid var(--pro-line, #e2e8f0);
  border-radius: 999px;
  padding: 6px 8px 6px 14px;
  font-size: 13px;
  color: var(--pro-ink, #0f172a);
  transition: border-color .15s, background .15s;
}
.contact-pill:hover {
  border-color: var(--pro-brand, #2563eb);
  background: var(--pro-brand-soft, #eff6ff);
}
.contact-pill-name { font-weight: 600; }
.contact-pill-email {
  color: var(--pro-muted, #94a3b8);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.contact-pill-remove {
  border: none;
  background: transparent;
  color: var(--pro-muted, #94a3b8);
  width: 24px; height: 24px;
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: all .15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.contact-pill-remove:hover {
  background: var(--pro-danger, #dc2626);
  color: #fff;
}

/* ============================================================
   RESPONSIVE V3 — Tableau compact, ligne complete sur mobile
   Surcharge des reglages V2 (cards) + colonnes desktop resserrees
   ============================================================ */

/* === Desktop : colonnes plus serrees, plus d'espace au libelle === */
.th-date     { width: 78px !important; }
.th-kind     { width: 50px !important; }
.th-color    { width: 56px !important; }
.th-status   { width: 130px !important; }
.th-deadline { width: 110px !important; }
.th-related  { width: 140px !important; }
.th-actions  { width: 130px !important; }
#tasks-table tbody td { padding: 12px 10px; }
#tasks-table .cell-label { padding-right: 16px; }
.task-title { word-break: break-word; }

/* La pill DL : compacte sur une ligne */
.deadline-pill { white-space: nowrap; }
.deadline-pill small { white-space: nowrap; }

/* === Tablette serree : 880-1024 -> on garde tableau, pad encore plus etroit === */
@media (max-width: 1024px) {
  #tasks-table thead th { padding: 8px 8px; font-size: 10px; }
  #tasks-table tbody td { padding: 10px 8px; font-size: 13px; }
  .th-date     { width: 70px !important; }
  .th-deadline { width: 95px !important; }
  .th-related  { width: 110px !important; }
  .th-actions  { width: 110px !important; }
  .action-svg-btn { width: 28px; height: 28px; }
}

/* === Mobile : on REVIENT a un tableau horizontal compact (pas de cards) === */
@media (max-width: 560px) {
  /* Annuler la transformation cards mise plus haut */
  #tasks-table,
  #tasks-table thead,
  #tasks-table tbody,
  #tasks-table tr,
  #tasks-table td {
    display: revert !important;
  }
  #tasks-table { display: table !important; width: 100% !important; table-layout: fixed; }
  #tasks-table thead { display: table-header-group !important; }
  #tasks-table tbody { display: table-row-group !important; }
  #tasks-table tr.task-row {
    display: table-row !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    position: static !important;
  }
  #tasks-table tr.task-row::before { display: none !important; }
  #tasks-table tr.task-row td {
    display: table-cell !important;
    padding: 8px 4px !important;
    border-bottom: 1px solid var(--pro-line, #e2e8f0) !important;
    text-align: left !important;
    vertical-align: middle !important;
    font-size: 12px;
    justify-content: initial !important;
    gap: 0 !important;
  }
  #tasks-table tr.task-row td::before { display: none !important; }
  #tasks-table tr.task-row td.cell-label {
    margin: 0 !important;
    padding: 8px 4px !important;
    border-bottom: 1px solid var(--pro-line, #e2e8f0) !important;
    font-size: 13px;
  }
  #tasks-table tr.task-row td.cell-label .task-title { font-size: 13px; line-height: 1.25; }
  #tasks-table tr.task-row td.cell-actions {
    margin: 0 !important;
    padding: 8px 4px !important;
    border-top: 0 !important;
    border-bottom: 1px solid var(--pro-line, #e2e8f0) !important;
    text-align: right !important;
  }
  #tasks-table tr.task-row td.cell-actions .row-actions {
    gap: 2px;
    justify-content: flex-end;
  }

  /* Bordure colorée à gauche de la 1ere cellule visible (libelle) */
  #tasks-table tr.task-row td.cell-label {
    position: relative;
    padding-left: 10px !important;
  }
  #tasks-table tr.task-row td.cell-label::before {
    content: "" !important;
    display: block !important;
    position: absolute;
    left: 0; top: 8px; bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--pro-line, #e2e8f0);
  }
  #tasks-table tr.task-row--high   td.cell-label::before { background: var(--pro-danger,  #dc2626); }
  #tasks-table tr.task-row--medium td.cell-label::before { background: var(--pro-warning, #f59e0b); }
  #tasks-table tr.task-row--low    td.cell-label::before { background: var(--pro-success, #16a34a); }

  /* Cacher Date / Type / Priorite et Participant pour gagner de la place */
  .th-date, #tasks-table td.cell-date,
  .th-kind, #tasks-table td.cell-kind,
  .th-color, #tasks-table td.cell-urgency,
  .th-related, #tasks-table td.cell-related { display: none !important; }

  /* Largeurs fixes des colonnes restantes : Libelle + Status + DL + Actions */
  .th-label    { width: auto; }
  .th-status   { width: 78px !important; }
  .th-deadline { width: 70px !important; }
  .th-actions  { width: 88px !important; }

  /* Header serre */
  #tasks-table thead th {
    padding: 6px 4px !important;
    font-size: 9px !important;
    letter-spacing: 0.04em;
  }

  /* Avancement : barres miniatures */
  .cell-status .chart-container,
  .cell-status .status-stack {
    transform: scale(0.75);
    transform-origin: left center;
  }
  .cell-status { padding: 6px 2px !important; }

  /* DL : plus court (date + indicateur petit) */
  .deadline-pill { font-size: 11px; }
  .deadline-pill small { font-size: 9px; margin-left: 2px; }

  /* Boutons d'action : bien petits */
  .action-svg-btn {
    width: 26px !important;
    height: 26px !important;
    border-radius: 6px;
  }
  .action-svg-btn svg { width: 14px; height: 14px; }

  /* Toolbar : on rend ultra-compacte aussi */
  .table-toolbar { padding: 8px !important; gap: 6px !important; }
  .table-toolbar label > span { font-size: 9px; }
  .table-toolbar input,
  .table-toolbar select { font-size: 12px; padding: 6px 8px !important; }
}

/* ============================================================
   RESPONSIVE V4 — Mobiles tres etroits (<= 400px portrait)
   - Table en scroll horizontal pour ne RIEN ecraser
   - Banniere discrete qui suggere la rotation
   ============================================================ */

.rotate-hint {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin: 0 0 12px;
  background: linear-gradient(180deg, #eff6ff, #dbeafe);
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  color: #1e40af;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
}
.rotate-hint:not([hidden]) { display: flex; }
.rotate-hint-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #fff;
  color: #2563eb;
  animation: rotate-icon-pulse 2.4s ease-in-out infinite;
}
@keyframes rotate-icon-pulse {
  0%, 100% { transform: rotate(0); }
  50%      { transform: rotate(-90deg); }
}
.rotate-hint-text { flex: 1; }
.rotate-hint-close {
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: #1e40af;
  width: 26px; height: 26px;
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background .15s;
}
.rotate-hint-close:hover { background: rgba(30,64,175,.1); }

/* === Mobile tres etroit en portrait : scroll horizontal === */
@media (max-width: 400px) and (orientation: portrait) {
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Indicateur de scroll : ombre interne droite qui suggere le defilement */
    background:
      linear-gradient(to right, #fff 30%, rgba(255,255,255,0)) left center / 30px 100% no-repeat,
      linear-gradient(to right, rgba(255,255,255,0), #fff 70%) right center / 30px 100% no-repeat,
      linear-gradient(to right, rgba(15,23,42,0.04), rgba(15,23,42,0)) left center / 14px 100% no-repeat,
      linear-gradient(to right, rgba(15,23,42,0), rgba(15,23,42,0.04)) right center / 14px 100% no-repeat;
    background-attachment: local, local, scroll, scroll;
  }
  /* On donne au tableau une largeur minimale qui PRESERVE la lisibilite */
  #tasks-table {
    min-width: 480px !important;
    table-layout: auto !important;
  }
  /* Largeurs colonnes : redonner du confort puisqu'on scrolle */
  .th-label    { min-width: 160px; }
  .th-status   { width: 100px !important; }
  .th-deadline { width: 90px !important; }
  .th-actions  { width: 100px !important; }
  /* Padding leger un peu plus respirant */
  #tasks-table tbody td { padding: 10px 6px !important; font-size: 12px; }
  #tasks-table thead th { padding: 8px 6px !important; }
  /* Cacher le sticky bord vert/orange/rouge pour pas le couper avec le scroll */
  /* (deja en place sur la cell-label, on garde) */
}

/* === Paysage sur tres petit ecran : on retombe sur le tableau compact normal === */
@media (max-width: 720px) and (orientation: landscape) {
  .table-wrap { overflow-x: auto; }
  #tasks-table { min-width: 0 !important; }
}

/* ============================================================
   AMELIORATIONS V5 — densite tableau + barres avancement
   - Padding cellules reduit pour voir plus de taches d'un coup
   - Barres 0-3 : degrade rouge -> orange -> lime -> vert (au lieu de bleus)
   - Inactives nettement plus visibles (gris clair stable)
   ============================================================ */

/* === Densite : tableau plus serre === */
#tasks-table thead th {
  padding: 9px 10px !important;
  font-size: 10.5px;
  letter-spacing: 0.07em;
}
#tasks-table tbody td {
  padding: 9px 10px !important;
  font-size: 13px;
  vertical-align: middle;
}
.task-title {
  font-size: 14px;
  line-height: 1.3;
}
.task-row td:first-child::before {
  top: 4px !important;
  bottom: 4px !important;
}
.row-actions { gap: 4px; }
.action-svg-btn {
  width: 30px;
  height: 30px;
}
.action-svg-btn svg { width: 16px; height: 16px; }

/* === Barres d'avancement : couleurs explicites + contraste === */
/* Inactives : gris bien visible mais doux */
.status-step {
  background: #e2e8f0 !important;
  opacity: 1 !important;
  border: 1px solid rgba(15, 23, 42, 0.04);
}
.status-step:hover {
  filter: brightness(0.96);
}

/* Actives : meme palette que le formulaire de creation
   stage-0 = rouge (a faire) -> stage-3 = vert (fini) */
.status-step.is-active.stage-0 {
  background: linear-gradient(180deg, #fca5a5, #ef4444) !important;
  border-color: rgba(239, 68, 68, 0.55);
}
.status-step.is-active.stage-1 {
  background: linear-gradient(180deg, #fcd34d, #f59e0b) !important;
  border-color: rgba(245, 158, 11, 0.55);
}
.status-step.is-active.stage-2 {
  background: linear-gradient(180deg, #bef264, #84cc16) !important;
  border-color: rgba(132, 204, 22, 0.55);
}
.status-step.is-active.stage-3 {
  background: linear-gradient(180deg, #6ee7b7, #16a34a) !important;
  border-color: rgba(22, 163, 94, 0.55);
}

/* Hauteurs : plus marquees pour lire le niveau d'un coup d'oeil */
.status-step.stage-0 { height: 14px !important; }
.status-step.stage-1 { height: 22px !important; }
.status-step.stage-2 { height: 30px !important; }
.status-step.stage-3 { height: 38px !important; }
.status-step { width: 20px !important; }

/* Status stack : moins d'espacement, mieux aligne */
.status-stack { gap: 5px !important; align-items: flex-end; }

/* Cellule status : un poil plus etroite vu que les barres sont plus compactes */
.th-status, #tasks-table .cell-status { width: 120px !important; }

/* ============================================================
   ONGLETS LOGIN / REGISTER — V2 propre, compact, web + mobile
   ============================================================ */

.account-switch {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 4px;
  background: var(--pro-surface-2, #f9fafd);
  border: 1px solid var(--pro-line, #e2e8f0);
  border-radius: 12px;
  margin-bottom: 12px;
}

.account-switch-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px !important;
  padding: 10px 12px !important;
  border: 0;
  background: transparent;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  color: var(--pro-ink-soft, #475569);
  cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s;
  white-space: nowrap;
  min-height: 40px;
  width: 100%;
  /* Annule les style="display:flex...gap:8px" inline qu'on avait laisses */
}

.account-switch-button:hover {
  color: var(--pro-brand, #2563eb);
  background: rgba(37, 99, 235, 0.05);
}

.account-switch-button.is-active {
  color: var(--pro-brand, #2563eb);
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 0 0 1px rgba(37, 99, 235, 0.18);
}

.account-switch-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.account-switch-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Mobile etroit : on garde le texte si possible, sinon icones seules avec tooltip */
@media (max-width: 380px) {
  .account-switch-button { padding: 8px 6px !important; font-size: 12px; gap: 6px !important; }
  .account-switch-icon { width: 16px; height: 16px; }
}

/* Tres etroit : icones seules (le title= sert d'infobulle) */
@media (max-width: 320px) {
  .account-switch-label { display: none; }
  .account-switch-button { padding: 10px !important; min-height: 38px; }
}

/* Tooltip plus visible au survol/long-press : on s'appuie sur title= natif */
/* (les navigateurs modernes affichent le title au hover desktop et au long-press mobile) */

/* ============================================================
   FOCUS RING — propre sur tous les boutons
   Remplace l'outline pointille par defaut du navigateur
   par un anneau bleu match avec le branding
   ============================================================ */

/* Cible : tous les elements interactifs.
   On masque l'outline par defaut UNIQUEMENT au focus de souris,
   on garde un ring bien visible au focus clavier (focus-visible)
   pour rester accessible. */
button:focus,
[role="button"]:focus,
.account-toggle:focus,
.account-switch-button:focus,
.action-svg-btn:focus,
.contact-pill-remove:focus,
.rotate-hint-close:focus,
.view-toggle-button:focus,
.kind-toggle-btn:focus,
.oauth-btn:focus {
  outline: none;
}

/* Anneau de focus visible quand on navigue au clavier (accessibilite) */
button:focus-visible,
[role="button"]:focus-visible,
.account-toggle:focus-visible,
.account-switch-button:focus-visible,
.action-svg-btn:focus-visible,
.contact-pill-remove:focus-visible,
.rotate-hint-close:focus-visible,
.view-toggle-button:focus-visible,
.kind-toggle-btn:focus-visible,
.oauth-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.35);
  border-radius: inherit;
}

/* Specifiquement pour le bouton compte qui n'a pas de border-radius */
.account-toggle:focus-visible {
  border-radius: 12px;
}

/* Le bouton compte ne doit PAS afficher de focus ring apres un clic souris.
   On force le retrait de l'outline meme si le navigateur considere
   le bouton comme "focus-visible" apres un click mouse-then-tab.
   :focus-visible reste sur les autres elements pour l'accessibilite clavier. */
.account-toggle:focus,
.account-toggle:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
.account-toggle:focus-visible {
  /* On garde un signal discret au clavier seulement, sans le rectangle pointille */
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25) !important;
  border-radius: 12px;
}

/* ============================================================
   AIR & LIGHTNESS — V6
   - Bordures plus fines et plus douces
   - Ombres reduites
   - Panneaux qui respirent
   - Popover compte epuree quand connecte
   ============================================================ */

/* Panneaux : bordure plus douce, ombre quasi invisible */
.panel {
  border-color: rgba(15, 23, 42, 0.06) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.025) !important;
}
.panel:hover { box-shadow: 0 1px 2px rgba(15, 23, 42, 0.025) !important; }

/* Topbar : presque sans bordure, plus aerien */
.topbar.panel {
  border-color: transparent !important;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(6px);
}

/* Stat cards : retirer bordure, garder le fond doux */
.stat-card.panel {
  border: 0 !important;
  box-shadow: none !important;
  background: rgba(255, 255, 255, 0.7) !important;
}

/* Le bouton compte ne doit JAMAIS avoir de bordure visible */
.account-toggle,
.account-toggle:hover,
.account-toggle:focus,
.account-toggle:active {
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 6px 10px !important;
  border-radius: 10px !important;
  cursor: pointer;
}
.account-toggle:hover {
  background: rgba(15, 23, 42, 0.04) !important;
}
.account-toggle:focus-visible {
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25) !important;
}

/* Popover compte : look minimal, pas de gros panneau */
body[data-authenticated="true"] .account-popover {
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 14px !important;
  padding: 14px !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.10) !important;
  background: #fff !important;
  width: 240px !important;
  backdrop-filter: none !important;
}

/* La vue compte : layout propre */
body[data-authenticated="true"] .account-view,
body[data-authenticated="true"] #account-view {
  display: flex !important;
  flex-direction: column;
  gap: 10px;
}
body[data-authenticated="true"] .account-summary {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
body[data-authenticated="true"] #account-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--pro-ink, #0f172a);
}
body[data-authenticated="true"] #account-role {
  font-size: 12px;
  color: var(--pro-muted, #94a3b8);
}
body[data-authenticated="true"] #logout-button {
  width: 100%;
  padding: 9px 12px;
  border-radius: 9px;
  border: 1px solid rgba(220, 38, 38, 0.2);
  background: #fff;
  color: #dc2626;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
}
body[data-authenticated="true"] #logout-button:hover {
  background: #fef2f2;
  border-color: #dc2626;
}

/* Composer panel : alleger */
.composer-panel {
  border-color: rgba(15, 23, 42, 0.06) !important;
  box-shadow: none !important;
}

/* Table panel : meme traitement */
.table-panel {
  border-color: rgba(15, 23, 42, 0.06) !important;
  box-shadow: none !important;
}

/* Wrap tableau : retirer la bordure (les separateurs de lignes suffisent) */
.table-wrap {
  border: 0 !important;
  border-radius: 8px !important;
}

/* Toolbar : pas de fond colore, juste un trait separateur */
.table-toolbar {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
  border-radius: 0 !important;
  padding: 14px 0 !important;
  margin: 0 0 8px 0 !important;
}

/* En-tete de panneau : moins d'espace */
.panel-head {
  padding-bottom: 6px;
  margin-bottom: 8px;
}

/* Les inputs aussi plus aerien */
.task-form input[type="text"],
.task-form input[type="email"],
.task-form input[type="password"],
.task-form input[type="tel"],
.task-form input[type="date"],
.task-form select,
.toolbar-search input,
.table-toolbar select {
  border-color: rgba(15, 23, 42, 0.1) !important;
}

/* Quand l'utilisateur est connecte, la sidebar (hero-panel) ne sert plus a rien :
   le bouton compte a ete deplace dans la topbar, le reste (titre marketing, description)
   est redondant avec le dashboard. On la masque pour liberer l'espace et eviter le
   rectangle blanc parasite qui apparait sous la topbar. */
body[data-authenticated="true"] .hero-panel {
  display: none !important;
}

/* Et donc on force la grille en une colonne */
body[data-authenticated="true"] .app-shell {
  grid-template-columns: 1fr !important;
}

/* ============================================================
   TOPBAR V3 — compte top-droite, design epure
   - Annule le masquage du hero quand connecte (le hero reste)
   - L'account-menu est maintenant deplace dans .topbar (apres les stats)
   - Aucune bordure visible sur la topbar et le bouton compte
   - Stats sans bordure, look ouvert
   ============================================================ */

/* Le hero reste visible meme quand connecte */
body[data-authenticated="true"] .hero-panel {
  display: block !important;
}
body[data-authenticated="true"] .app-shell {
  grid-template-columns: 320px minmax(0, 1fr) !important;
}
@media (max-width: 1100px) {
  body[data-authenticated="true"] .app-shell { grid-template-columns: 1fr !important; }
}

/* Topbar : aucune bordure / fond / pseudo-elements decoratifs */
.topbar.panel {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 16px 4px !important;
  overflow: visible !important;
  backdrop-filter: none !important;
  display: flex !important;
  align-items: center;
  gap: 16px;
}
.topbar::after { display: none !important; }

/* Logo dashboard a gauche */
.topbar-brand {
  flex: 0 0 auto !important;
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  z-index: 1;
}
.topbar-logo {
  width: 44px !important;
  height: 44px !important;
}

/* Stats prennent le centre */
.stats-grid {
  flex: 1 1 auto !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(80px, 140px)) !important;
  justify-content: flex-end !important;
  gap: 10px !important;
}
.stat-card.panel {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 8px 14px !important;
  min-height: 0 !important;
}
.stat-card.panel::after,
.stat-card.panel::before { display: none !important; }
.stat-card span {
  font-size: 10px !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pro-muted, #94a3b8);
  font-weight: 600;
}
.stat-card strong {
  font-size: 22px !important;
  font-weight: 700;
  color: var(--pro-ink, #0f172a);
}

/* Account-menu : pousse a droite, deplace par JS apres les stats */
.topbar > .account-menu {
  flex: 0 0 auto;
  margin-left: auto;
  position: relative;
}

/* Bouton compte : pas de bordure du tout */
.account-toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 6px 12px 6px 6px !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 100px !important;
  cursor: pointer;
  color: var(--pro-ink, #0f172a) !important;
}
.account-toggle:hover {
  background: rgba(15, 23, 42, 0.04) !important;
}
.account-toggle:focus,
.account-toggle:active { box-shadow: none !important; }
.account-toggle:focus-visible {
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3) !important;
}
.account-toggle .session-indicator-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #dbeafe, #bfdbfe);
  color: var(--pro-brand, #2563eb);
  padding: 6px;
}
.account-toggle .session-indicator-copy strong {
  font-size: 13px;
  font-weight: 600;
  color: var(--pro-ink, #0f172a);
  display: block;
  line-height: 1.1;
}
.account-toggle .session-indicator-copy span {
  font-size: 11px;
  color: var(--pro-muted, #94a3b8);
}

/* Popover compte : reste un dropdown propre, ALIGNE A DROITE */
body[data-authenticated="true"] .account-popover {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  left: auto !important;
  width: 240px !important;
  padding: 14px !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12) !important;
  backdrop-filter: none !important;
}

/* Mobile : on cache le texte du bouton compte, on garde juste l'avatar */
@media (max-width: 600px) {
  .account-toggle .session-indicator-copy { display: none; }
  .topbar.panel { padding: 12px 4px !important; gap: 10px !important; }
  .stats-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 6px !important; }
  .stat-card.panel { padding: 6px 8px !important; }
  .stat-card strong { font-size: 18px !important; }
}

/* ============================================================
   FIX V7 — bordures + couleurs urgence + boutons icones
   - VRAIES couleurs urgence : vert, orange, rouge satures
   - Boutons icones sans bordure et SANS bouger au survol
   - Cadre composer panel : retire
   ============================================================ */

/* === VRAIES COULEURS d'urgence (formulaire de creation) === */
:root {
  --color-vert:   #16a34a;   /* vert sature */
  --color-orange: #f59e0b;   /* orange sature */
  --color-rouge:  #dc2626;   /* rouge sature */
}
.urgency-option .dot-color {
  border: 2px solid transparent !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50%;
  transition: transform 0.12s, box-shadow 0.12s;
}
.urgency-option.color-low    .dot-color { background-color: var(--color-vert)   !important; }
.urgency-option.color-medium .dot-color { background-color: var(--color-orange) !important; }
.urgency-option.color-high   .dot-color { background-color: var(--color-rouge)  !important; }
.urgency-option input:checked + .dot-color { transform: scale(1.18); }
.urgency-option.color-low    input:checked + .dot-color { box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.25)  !important; }
.urgency-option.color-medium input:checked + .dot-color { box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.25) !important; }
.urgency-option.color-high   input:checked + .dot-color { box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.25)  !important; }

/* La pastille de couleur dans le tableau (cell-urgency) */
.cell-urgency .urgency-dot,
.cell-urgency span,
.cell-urgency .urgency-chip { /* selecteurs larges car le markup varie */ }
/* Plus precis : on cible les couleurs dans le tableau */
.task-row--low    .cell-urgency .urgency-dot,
.task-row--low    .urgency-chip { background: var(--color-vert)   !important; }
.task-row--medium .cell-urgency .urgency-dot,
.task-row--medium .urgency-chip { background: var(--color-orange) !important; }
.task-row--high   .cell-urgency .urgency-dot,
.task-row--high   .urgency-chip { background: var(--color-rouge)  !important; }

/* La bordure colore a gauche de la ligne (priorite) */
.task-row--low    td:first-child::before { background: var(--color-vert)   !important; }
.task-row--medium td:first-child::before { background: var(--color-orange) !important; }
.task-row--high   td:first-child::before { background: var(--color-rouge)  !important; }

/* === BOUTONS ICONES : pas de cadre, pas de jiggle au hover === */
.action-svg-btn {
  border: 0 !important;
  background: transparent !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 8px !important;
  color: var(--pro-ink-soft, #475569) !important;
  /* IMPORTANT : pas de transform/scale dans la transition pour eviter le tremblement */
  transition: background-color 0.12s ease, color 0.12s ease !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
}
.action-svg-btn:hover {
  background: rgba(15, 23, 42, 0.06) !important;
  color: var(--pro-brand, #2563eb) !important;
  border: 0 !important;
  transform: none !important;
}
.action-svg-btn:focus,
.action-svg-btn:active { box-shadow: none !important; outline: none !important; }
.action-svg-btn:focus-visible {
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3) !important;
}
.action-svg-btn--save:hover {
  color: var(--color-vert) !important;
  background: rgba(22, 163, 74, 0.1) !important;
}
.action-svg-btn--danger:hover {
  color: var(--color-rouge) !important;
  background: rgba(220, 38, 38, 0.08) !important;
}
.action-svg-btn[disabled] { opacity: .5; cursor: wait; }

/* === COMPOSER PANEL : pas de cadre === */
.composer-panel.panel {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 22px 0 !important;
}
.table-panel.panel {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 22px 0 !important;
}

/* Separateur fin entre les sections au lieu d'un cadre */
.composer-panel + .table-panel {
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  margin-top: 8px;
}

/* Eviter aussi le saut de hauteur sur les boutons d'urgence */
.urgency-option {
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================
   DASHBOARD V2 — boutons d'action + modales + couleurs justes
   ============================================================ */

/* === Action bar : 2 boutons gauche, stats droite === */
.action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 0 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
.action-bar-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.action-bar-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 10px;
  color: var(--pro-ink, #0f172a);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  white-space: nowrap;
}
.action-bar-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.action-bar-btn:hover {
  border-color: var(--pro-brand, #2563eb);
  color: var(--pro-brand, #2563eb);
  background: rgba(37, 99, 235, 0.04);
}
.action-bar-btn--primary {
  background: linear-gradient(180deg, #2563eb, #1d4ed8);
  color: #fff !important;
  border-color: #1d4ed8;
}
.action-bar-btn--primary:hover {
  background: linear-gradient(180deg, #1d4ed8, #1e40af);
  border-color: #1e40af;
  color: #fff !important;
}
.action-bar-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3);
}

/* Stats : dans la action bar maintenant */
.action-bar .stats-grid {
  display: flex !important;
  gap: 18px !important;
  flex: 0 0 auto !important;
  margin-left: auto;
}
.action-bar .stat-card.panel {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
}
.action-bar .stat-card span {
  font-size: 10px !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pro-muted, #94a3b8);
  font-weight: 600;
}
.action-bar .stat-card strong {
  font-size: 22px !important;
  font-weight: 700;
  color: var(--pro-ink, #0f172a);
  line-height: 1;
  margin-top: 2px;
}

/* === Modales generiques === */
.app-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow-y: auto;
}
.app-modal[hidden] { display: none !important; }
.app-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
  cursor: pointer;
}
.app-modal-card {
  position: relative;
  z-index: 1;
  width: min(720px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 24px 50px rgba(15, 23, 42, 0.25);
  padding: 26px 28px;
  animation: modalIn 0.18s ease;
}
@keyframes modalIn {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}
.app-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: var(--pro-ink-soft, #475569);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.app-modal-close:hover { background: rgba(15, 23, 42, 0.08); color: var(--pro-ink, #0f172a); }
.app-modal-close:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3); }

/* Inside a modal, the panel has no border/shadow (the modal carries it) */
.app-modal .panel.composer-panel {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
}

/* Mobile: modale plein ecran */
@media (max-width: 600px) {
  .app-modal { padding: 0; }
  .app-modal-card {
    width: 100vw;
    max-height: 100vh;
    border-radius: 0;
    padding: 56px 18px 28px;
  }
  .app-modal-close { top: 14px; right: 14px; }
}

/* === COULEURS URGENCE : forcer du vrai vert / orange / rouge === */
/* On retire le opacity et les fonds gradient pour qu'on voie LA couleur */
.urgency-option .dot-color {
  opacity: 1 !important;
  background-image: none !important;
}
.urgency-option.color-low    .dot-color { background-color: #16a34a !important; box-shadow: none !important; }
.urgency-option.color-medium .dot-color { background-color: #f59e0b !important; box-shadow: none !important; }
.urgency-option.color-high   .dot-color { background-color: #dc2626 !important; box-shadow: none !important; }

.urgency-option input:checked + .dot-color { transform: scale(1.18); }
.urgency-option.color-low    input:checked + .dot-color { box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.30) !important; }
.urgency-option.color-medium input:checked + .dot-color { box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.30) !important; }
.urgency-option.color-high   input:checked + .dot-color { box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.30) !important; }

/* === Action bar responsive === */
@media (max-width: 720px) {
  .action-bar { flex-direction: column; align-items: stretch; gap: 12px; }
  .action-bar-buttons { width: 100%; }
  .action-bar-btn { flex: 1 1 0; justify-content: center; }
  .action-bar .stats-grid { width: 100%; justify-content: space-around; gap: 8px !important; }
}
@media (max-width: 420px) {
  .action-bar-btn span { display: none; }
  .action-bar-btn { padding: 10px 14px; }
}

/* ============================================================
   SIMPLIFICATION RADICALE DU TABLEAU + CLOCHE NOTIFS
   ============================================================ */

/* Plus aucun cadre / fond / shadow autour du tableau et ses parents */
.table-panel,
.table-panel.panel,
.table-wrap {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* La toolbar n'est plus dans une boite, juste des champs alignes */
.table-toolbar {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
  border-radius: 0 !important;
  padding: 12px 0 !important;
  margin: 12px 0 !important;
}

/* Le tableau : pure list, plus de carte */
#tasks-table {
  background: transparent !important;
}
#tasks-table thead th {
  background: transparent !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
}
#tasks-table tbody tr {
  background: transparent !important;
}
#tasks-table tbody td {
  background: transparent !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.05) !important;
}
.task-row { background: transparent !important; }
.task-row:hover td { background: rgba(15, 23, 42, 0.025) !important; }
.task-row td { background: transparent !important; }

/* Ligne : pas de cadre, juste la barre coloree de priorite a gauche */
#tasks-table tr.task-row td:first-child {
  position: relative;
  padding-left: 14px !important;
}
#tasks-table tr.task-row td:first-child::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 2px;
  background: transparent;
}
.task-row--high   td:first-child::before { background: #dc2626 !important; }
.task-row--medium td:first-child::before { background: #f59e0b !important; }
.task-row--low    td:first-child::before { background: #16a34a !important; }

/* Le titre "Tableau des taches" : plus simple */
.table-panel .panel-head {
  margin-bottom: 4px;
}

/* === Cloche de notifications === */
.notif-bell-wrap {
  position: relative;
  margin-left: auto;
}
.notif-bell {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 0;
  background: transparent;
  color: var(--pro-ink-soft, #475569);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  position: relative;
}
.notif-bell svg { width: 22px; height: 22px; }
.notif-bell:hover {
  background: rgba(15, 23, 42, 0.06);
  color: var(--pro-ink, #0f172a);
}
.notif-bell:focus { outline: none; box-shadow: none; }
.notif-bell:focus-visible { box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3); outline: none; }
.notif-bell.has-unread svg {
  color: var(--pro-brand, #2563eb);
}
.notif-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: #dc2626;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px #fff;
}

.notif-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 50;
  width: 320px;
  max-height: 420px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.notif-dropdown-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
.notif-dropdown-head strong { font-size: 13px; }
.notif-read-all {
  border: 0;
  background: transparent;
  color: var(--pro-brand, #2563eb);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
}
.notif-read-all:hover { background: rgba(37, 99, 235, 0.08); }

.notif-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  flex: 1;
}
.notif-item {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.04);
  cursor: pointer;
  transition: background 0.12s;
}
.notif-item:hover { background: rgba(15, 23, 42, 0.03); }
.notif-item:last-child { border-bottom: 0; }
.notif-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: transparent;
  margin-top: 6px;
}
.notif-item.is-unread .notif-dot { background: var(--pro-brand, #2563eb); }
.notif-item.is-unread .notif-message { font-weight: 600; }
.notif-body { flex: 1; min-width: 0; }
.notif-message {
  margin: 0;
  font-size: 13px;
  color: var(--pro-ink, #0f172a);
  line-height: 1.4;
}
.notif-time {
  font-size: 11px;
  color: var(--pro-muted, #94a3b8);
}
.notif-empty {
  padding: 30px 14px;
  text-align: center;
  color: var(--pro-muted, #94a3b8);
  font-size: 13px;
  margin: 0;
}

/* Dans la topbar : ordre cloche + compte */
.topbar > .notif-bell-wrap { order: 90; }
.topbar > .account-menu { order: 100; margin-left: 0 !important; }

/* Mobile : dropdown plein largeur sous la cloche */
@media (max-width: 600px) {
  .notif-dropdown {
    width: calc(100vw - 32px);
    right: -8px;
  }
}

/* ============================================================
   FILTRES VISUELS — pastilles colorees au lieu de selects
   ============================================================ */

.toolbar-pillgroup {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.toolbar-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pro-muted, #94a3b8);
  font-weight: 600;
}

/* Picker de statut (avancement) — barres 0/1/2/3 + bouton Tous */
.status-picker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 10px;
  background: #fff;
}
.status-pill {
  border: 0;
  background: transparent;
  padding: 6px 8px;
  border-radius: 7px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 32px;
  transition: background 0.12s, transform 0.1s;
}
.status-pill.is-all {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--pro-muted, #94a3b8);
  text-transform: uppercase;
  padding: 6px 10px;
}
.status-pill:hover { background: rgba(15, 23, 42, 0.06); }
.status-pill.is-active {
  background: rgba(37, 99, 235, 0.10);
}
.status-pill.is-active.is-all { color: var(--pro-brand, #2563eb); }
.status-pill:focus { outline: none; }
.status-pill:focus-visible { box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3); }

/* Mini-barres dans les status-pill (echelle 0-3) */
.status-pill-bar {
  display: block;
  width: 5px;
  border-radius: 2px;
  background: #cbd5e1;
}
.status-pill-bar--0 { height: 8px;  background: #fca5a5; }
.status-pill-bar--1 { height: 14px; background: #fcd34d; }
.status-pill-bar--2 { height: 20px; background: #bef264; }
.status-pill-bar--3 { height: 26px; background: #6ee7b7; }
.status-pill.is-active .status-pill-bar--0 { background: #ef4444; }
.status-pill.is-active .status-pill-bar--1 { background: #f59e0b; }
.status-pill.is-active .status-pill-bar--2 { background: #84cc16; }
.status-pill.is-active .status-pill-bar--3 { background: #16a34a; }

/* Picker d'urgence — pastilles colorees */
.urgency-picker-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 10px;
  background: #fff;
}
.urg-pill {
  border: 0;
  background: transparent;
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  position: relative;
  transition: transform 0.1s, box-shadow 0.12s;
}
.urg-pill::before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #cbd5e1;
}
.urg-pill.urg-pill--low::before    { background: #16a34a !important; }
.urg-pill.urg-pill--medium::before { background: #f59e0b !important; }
.urg-pill.urg-pill--high::before   { background: #dc2626 !important; }

.urg-pill.is-all {
  width: auto;
  height: 32px;
  border-radius: 7px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pro-muted, #94a3b8);
}
.urg-pill.is-all::before { display: none; }

.urg-pill:hover { background: rgba(15, 23, 42, 0.05); }
.urg-pill.is-active {
  background: rgba(37, 99, 235, 0.08);
}
.urg-pill.is-active::before {
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}
.urg-pill.urg-pill--low.is-active::before    { box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.30); }
.urg-pill.urg-pill--medium.is-active::before { box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.30); }
.urg-pill.urg-pill--high.is-active::before   { box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.30); }
.urg-pill.is-active.is-all { color: var(--pro-brand, #2563eb); }
.urg-pill:focus { outline: none; }
.urg-pill:focus-visible { box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3); }

/* Disposition de la table-toolbar — auto-fit avec gap genereux */
.table-toolbar {
  display: flex !important;
  flex-wrap: wrap;
  gap: 16px !important;
  align-items: flex-end !important;
}
.table-toolbar > .toolbar-search { flex: 1 1 200px; min-width: 180px; }
.table-toolbar > .toolbar-pillgroup { flex: 0 0 auto; }

/* ============================================================
   TASK FORM V2 — layout structure dans la modale
   ============================================================ */

.task-form-v2 {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.ff-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.ff-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pro-muted, #94a3b8);
  font-weight: 600;
  padding: 0;
}
.ff-row--full { width: 100%; }
.ff-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 600px) {
  .ff-grid-2 { grid-template-columns: 1fr !important; }
}

/* Champs texte/date dans le form V2 */
.task-form-v2 input[type="text"],
.task-form-v2 input[type="email"],
.task-form-v2 input[type="date"] {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 10px;
  font-size: 14px;
  background: #fff;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.task-form-v2 input:focus {
  outline: none;
  border-color: var(--pro-brand, #2563eb);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.ff-hint {
  font-size: 11px;
  color: var(--pro-muted, #94a3b8);
}

/* === Type picker (Individuelle / Collective) en boutons === */
.type-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.type-pill {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 14px !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
  font-size: 13px;
  font-weight: 600;
  color: var(--pro-ink-soft, #475569);
}
.type-pill svg { width: 18px; height: 18px; }
.type-pill input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
.type-pill:hover {
  border-color: rgba(37, 99, 235, 0.35) !important;
}
.type-pill.is-active {
  border-color: var(--pro-brand, #2563eb) !important;
  background: rgba(37, 99, 235, 0.06);
  color: var(--pro-brand, #2563eb);
}
@media (max-width: 380px) {
  .type-pill span { font-size: 12px; }
}

/* === Boutons d'avancement (chart) — taille raisonnable === */
.task-form-v2 .chart-container {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 50px;
}
.task-form-v2 .chart-bar {
  flex: 1;
  border-radius: 6px;
  background: #e2e8f0;
  border: 0;
  cursor: pointer;
  transition: filter 0.12s;
  padding: 0;
}
.task-form-v2 .chart-bar:hover { filter: brightness(0.95); }
.task-form-v2 .chart-bar.stage-0 { height: 28%; }
.task-form-v2 .chart-bar.stage-1 { height: 50%; }
.task-form-v2 .chart-bar.stage-2 { height: 75%; }
.task-form-v2 .chart-bar.stage-3 { height: 100%; }
.task-form-v2 .chart-bar.is-active.stage-0 { background: linear-gradient(180deg, #fca5a5, #ef4444); }
.task-form-v2 .chart-bar.is-active.stage-1 { background: linear-gradient(180deg, #fcd34d, #f59e0b); }
.task-form-v2 .chart-bar.is-active.stage-2 { background: linear-gradient(180deg, #bef264, #84cc16); }
.task-form-v2 .chart-bar.is-active.stage-3 { background: linear-gradient(180deg, #6ee7b7, #16a34a); }

/* === Pastilles d'urgence dans le form V2 (alignement propre) === */
.task-form-v2 .urgency-picker-options {
  display: flex;
  gap: 14px;
  height: 50px;
  align-items: center;
}
.task-form-v2 .urgency-option {
  cursor: pointer;
  position: relative;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.task-form-v2 .urgency-option input { position: absolute; opacity: 0; pointer-events: none; }
.task-form-v2 .urgency-option .dot-color {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  transition: transform 0.12s, box-shadow 0.12s;
  background-image: none !important;
  opacity: 1 !important;
}

/* === Bouton Creer la tache : pleine largeur en bas === */
.ff-cta { padding-top: 6px; }
.task-submit-btn {
  width: 100%;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 20px !important;
  font-size: 14px;
  font-weight: 700;
  border-radius: 10px;
  border: 0;
  background: linear-gradient(180deg, #2563eb, #1d4ed8);
  color: #fff;
  cursor: pointer;
  transition: filter 0.12s, transform 0.08s;
}
.task-submit-btn:hover { filter: brightness(1.05); }
.task-submit-btn:active { transform: translateY(1px); }
.task-submit-btn svg { width: 18px; height: 18px; }
.task-submit-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.35); }

/* Espacement specifique modale tache */
#modal-task .panel-head { display: none; }
#modal-task .app-modal-card h3 { margin: 0 0 18px; font-size: 18px; }
#modal-task .app-modal-card::before {
  content: "Nouvelle tâche";
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: var(--pro-ink, #0f172a);
  margin: 0 0 18px;
}

/* PWA install button (visible uniquement quand beforeinstallprompt fire) */
.pwa-install-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--pro-brand, #2563eb);
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.06);
  color: var(--pro-brand, #2563eb);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s, transform 0.08s;
  white-space: nowrap;
  margin-left: auto;
  order: 80;
}
.pwa-install-btn:hover { background: rgba(37, 99, 235, 0.12); }
.pwa-install-btn:active { transform: translateY(1px); }
.pwa-install-btn svg { width: 16px; height: 16px; }
.pwa-install-btn:focus { outline: none; }
.pwa-install-btn:focus-visible { box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3); }

@media (max-width: 600px) {
  .pwa-install-btn span { display: none; }
  .pwa-install-btn { padding: 8px; }
}

/* ============================================================
   MOBILE V3 — selon croquis utilisateur
   Une ligne par tache : Libelle (peut wrap) | Priorite | Avancement | Type | DL
   Actions cachees sur mobile (accessibles via la modale d'edition au clic)
   ============================================================ */

@media (max-width: 560px) {
  /* On REAFFICHE Priorite et Type qui etaient masques */
  .th-color, #tasks-table td.cell-urgency,
  .th-kind,  #tasks-table td.cell-kind {
    display: table-cell !important;
  }
  /* Date reste cachee : DL est l'info importante */
  .th-date,  #tasks-table td.cell-date { display: none !important; }
  /* Participant : reste cache si solo, ou ligne en dessous si group */
  .th-related, #tasks-table td.cell-related {
    display: none !important;
  }

  /* Actions cachees sur mobile pour gagner la place — accessibles via la modale d'edition */
  .th-actions, #tasks-table td.cell-actions {
    display: none !important;
  }

  /* Tableau : layout adapte */
  #tasks-table { table-layout: auto !important; min-width: 0 !important; width: 100% !important; }
  .table-wrap { overflow-x: visible; background: transparent !important; }

  /* Header : labels tres courts */
  #tasks-table thead th {
    padding: 6px 4px !important;
    font-size: 9px !important;
    letter-spacing: 0.04em;
    color: var(--pro-muted, #94a3b8) !important;
  }
  /* Renommer les colonnes via pseudo-elements pour gagner de la place :
     "Avancement" -> "Av.", "Priorite" -> "Pr.", "Type" -> "Type" reste, "DL" reste */
  /* On ne peut pas changer le contenu textuel via CSS sans aria. Laissons les libelles
     du HTML, mais on les force a tenir sur une ligne. */

  /* Largeurs colonnes adaptees au croquis */
  .th-label    { width: auto; }
  .th-color    { width: 28px !important; padding: 6px 0 !important; }
  .th-status   { width: 60px !important; padding: 6px 4px !important; }
  .th-kind     { width: 30px !important; padding: 6px 0 !important; }
  .th-deadline { width: 64px !important; padding: 6px 4px !important; }

  /* Cellules : bien serree, vertical centre */
  #tasks-table tbody td {
    padding: 8px 4px !important;
    font-size: 12px;
    vertical-align: middle !important;
  }

  /* Libelle : autorise le wrap sur 2 lignes max, taille un peu plus grande */
  #tasks-table tr.task-row td.cell-label {
    padding: 8px 6px 8px 12px !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.05) !important;
  }
  #tasks-table tr.task-row td.cell-label .task-title {
    font-size: 13px !important;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
  }

  /* Pastille priorite : juste un dot rond, plus de fond */
  #tasks-table tr.task-row td.cell-urgency { text-align: center !important; }
  #tasks-table .cell-urgency .urgency-dot,
  #tasks-table .cell-urgency .urgency-chip {
    width: 14px !important;
    height: 14px !important;
    border-radius: 50% !important;
    display: inline-block !important;
    padding: 0 !important;
    border: 0 !important;
  }

  /* Avancement : 4 mini-barres serrees */
  #tasks-table tr.task-row td.cell-status .chart-container,
  #tasks-table tr.task-row td.cell-status .status-stack {
    transform: scale(0.6);
    transform-origin: left center;
    width: 100px;
  }
  /* Eviter le debordement du transform scale */
  #tasks-table tr.task-row td.cell-status { padding: 6px 0 !important; }

  /* Type : juste l'icone, pas de fond */
  #tasks-table tr.task-row td.cell-kind { text-align: center !important; }
  #tasks-table tr.task-row td.cell-kind svg,
  #tasks-table tr.task-row td.cell-kind .kind-toggle-btn svg {
    width: 16px !important;
    height: 16px !important;
  }
  #tasks-table tr.task-row td.cell-kind .kind-toggle-btn {
    padding: 4px !important;
    background: transparent !important;
  }

  /* DL : minuscule, lisible quand meme */
  .deadline-pill { font-size: 11px !important; }
  .deadline-pill small { font-size: 9px !important; margin-left: 2px; }

  /* Bordure coloree a gauche selon priorite (deja en place, on s'assure) */
  #tasks-table tr.task-row td.cell-label {
    position: relative;
  }
  #tasks-table tr.task-row td.cell-label::before {
    content: "" !important;
    display: block !important;
    position: absolute;
    left: 0; top: 8px; bottom: 8px;
    width: 3px;
    border-radius: 2px;
    background: transparent;
  }
  #tasks-table tr.task-row--high   td.cell-label::before { background: #dc2626 !important; }
  #tasks-table tr.task-row--medium td.cell-label::before { background: #f59e0b !important; }
  #tasks-table tr.task-row--low    td.cell-label::before { background: #16a34a !important; }

  /* Permettre le tap sur la ligne pour editer (curseur main) */
  #tasks-table tr.task-row { cursor: pointer; }
}

/* Tres etroit (iPhone SE etc) : on garde le layout, juste plus serre */
@media (max-width: 380px) {
  #tasks-table thead th { font-size: 8.5px !important; padding: 4px 2px !important; }
  #tasks-table tbody td { padding: 6px 3px !important; font-size: 11px; }
  .deadline-pill { font-size: 10px !important; }
  .th-status { width: 54px !important; }
  .th-deadline { width: 56px !important; }
  #tasks-table tr.task-row td.cell-label .task-title { font-size: 12px !important; }
}

/* ============================================================
   FIX MOBILE V4 — corriger les regressions visuelles
   - Hero-panel cache quand connecte sur mobile
   - Topbar compact : juste logo a gauche, cloche + compte a droite
   - Action bar : boutons en row complet, stats sous
   - PWA install button cache en mobile (l'utilisateur passe par le menu nav)
   ============================================================ */

@media (max-width: 720px) {
  /* Hero panel masque sur mobile quand connecte (espace vide inutile) */
  body[data-authenticated="true"] .hero-panel {
    display: none !important;
  }
  body[data-authenticated="true"] .app-shell {
    grid-template-columns: 1fr !important;
  }

  /* Topbar : 1 ligne propre logo + spacers + cloche + compte */
  .topbar.panel {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    padding: 8px 4px !important;
    align-items: center !important;
  }
  .topbar-brand {
    flex: 0 0 auto !important;
    gap: 0 !important;
  }
  .topbar-logo {
    width: 36px !important;
    height: 36px !important;
  }
  /* Cacher le bouton Installer sur mobile (le navigateur l'offre dans son menu natif) */
  .pwa-install-btn { display: none !important; }
  /* Cloche notifs : pousse a droite */
  .topbar > .notif-bell-wrap {
    margin-left: auto !important;
  }
  /* Compte : a droite de la cloche */
  .topbar > .account-menu {
    margin-left: 0 !important;
    flex: 0 0 auto !important;
  }

  /* Action bar : layout vertical mobile : boutons sur 1 row, stats sous en row */
  .action-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 4px 4px 12px !important;
    margin-bottom: 4px !important;
  }
  .action-bar-buttons {
    display: flex !important;
    gap: 6px !important;
    flex-wrap: nowrap;
  }
  .action-bar-btn {
    flex: 1 1 0;
    justify-content: center;
    padding: 9px 8px;
    font-size: 12px;
  }
  .action-bar-btn span { font-size: 12px; }
  .action-bar .stats-grid {
    width: 100% !important;
    margin-left: 0 !important;
    gap: 8px !important;
  }
  .action-bar .stat-card.panel {
    flex: 1 1 0 !important;
    align-items: center;
    padding: 4px 0 !important;
  }
  .action-bar .stat-card span { font-size: 9px !important; }
  .action-bar .stat-card strong { font-size: 18px !important; }

  /* Cacher le compteur de taches affichees, redondant avec le total */
  .filter-summary { display: none; }
  .live-pill { font-size: 9px !important; padding: 3px 7px !important; }

  /* Mon reseau (carnet contacts) cache sur mobile pour gagner de la place */
  #contacts-panel { display: none !important; }
}

/* Override final : sur mobile, la topbar reste en ligne */
@media (max-width: 720px) {
  .topbar.panel {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  /* Reduire la taille du bouton compte sur mobile (juste l'avatar visible) */
  .topbar > .account-menu .account-toggle {
    padding: 4px !important;
  }
  .topbar > .account-menu .session-indicator-copy {
    display: none !important;
  }
}

/* ============================================================
   POLISH FINAL — icones premium + design aerien
   ============================================================ */

/* === Avatar : cercle dégradé avec initiales (style Gmail) === */
.session-indicator-icon {
  position: relative;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #fff !important;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
/* Quand on a des initiales, on les affiche par-dessus et on cache le SVG fallback */
.session-indicator-icon.has-initials::before {
  content: attr(data-initials);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
}
.session-indicator-icon.has-initials svg { display: none; }
.session-indicator-icon svg { width: 20px; height: 20px; }

/* === Cloche : style aere, rond elegant === */
.notif-bell {
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
  background: transparent;
  color: var(--pro-ink, #0f172a) !important;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.notif-bell:hover {
  background: rgba(15, 23, 42, 0.05) !important;
}
.notif-bell svg { width: 22px !important; height: 22px !important; }
.notif-bell.has-unread svg { color: var(--pro-brand, #2563eb) !important; }
.notif-badge {
  top: 4px !important;
  right: 4px !important;
  min-width: 16px !important;
  height: 16px !important;
  font-size: 9px !important;
  padding: 0 4px !important;
  box-shadow: 0 0 0 2px var(--pro-bg, #f5f7fb) !important;
}

/* === Boutons d'action de l'action-bar : plus aere === */
.action-bar-btn {
  padding: 11px 18px !important;
  border-radius: 12px !important;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: -0.005em;
  gap: 10px !important;
  transition: all 0.15s ease;
}
.action-bar-btn svg {
  width: 18px !important;
  height: 18px !important;
  stroke-width: 1.7;
}
.action-bar-btn--primary {
  background: linear-gradient(180deg, #3b82f6, #2563eb) !important;
  border: 0 !important;
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.15), 0 4px 8px -2px rgba(37, 99, 235, 0.25);
}
.action-bar-btn--primary:hover {
  background: linear-gradient(180deg, #2563eb, #1d4ed8) !important;
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.2), 0 6px 12px -2px rgba(37, 99, 235, 0.35);
  transform: translateY(-1px);
}

/* === Boutons d'action sur tâches (éditer, dupliquer, archiver) plus fins === */
.action-svg-btn {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
}
.action-svg-btn svg {
  width: 16px !important;
  height: 16px !important;
  stroke-width: 1.6 !important;
}

/* === Action bar : plus de respiration === */
.action-bar {
  gap: 18px !important;
  padding: 8px 0 16px !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.05) !important;
  margin-bottom: 12px !important;
}

/* === Stats cards : typo plus douce === */
.action-bar .stat-card span {
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  opacity: 0.8;
}
.action-bar .stat-card strong {
  font-size: 24px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
}

/* === Topbar : un poil plus aerée === */
.topbar.panel {
  padding: 18px 6px !important;
  gap: 14px !important;
}
.topbar-logo {
  width: 40px !important;
  height: 40px !important;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
}

/* === Tableau plus aere === */
#tasks-table thead th {
  padding: 14px 12px !important;
  font-size: 10px !important;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--pro-muted, #94a3b8) !important;
}
#tasks-table tbody td {
  padding: 14px 12px !important;
  font-size: 13.5px;
}
.task-title {
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.005em;
}

/* === Mobile : on garde l'aerien === */
@media (max-width: 720px) {
  .topbar.panel { padding: 12px 6px !important; gap: 10px !important; }
  .topbar-logo { width: 34px !important; height: 34px !important; }
  .action-bar { padding: 6px 0 12px !important; gap: 12px !important; }
  .action-bar-btn { padding: 11px 12px !important; }
  .action-bar .stat-card strong { font-size: 20px !important; }
  .session-indicator-icon { width: 32px !important; height: 32px !important; }
  .session-indicator-icon.has-initials::before { font-size: 12px; }
  .notif-bell { width: 36px !important; height: 36px !important; }
  .notif-bell svg { width: 20px !important; height: 20px !important; }
}

/* === Kind cell (Type tâche) : icône + label texte === */
.kind-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: transparent !important;
  border: 0;
  padding: 0;
  color: var(--pro-ink, #0f172a);
  cursor: default;
}
.kind-toggle-btn.kind-cell { cursor: pointer; }
.kind-cell .kind-icon { flex-shrink: 0; }
.kind-cell .kind-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--pro-muted, #94a3b8);
  text-transform: lowercase;
  letter-spacing: 0.02em;
}

/* Desktop : on garde juste l'icône, label cache */
@media (min-width: 561px) {
  .kind-cell .kind-label { display: none; }
}
/* Mobile : on cache l'icône, on garde le label en gras */
@media (max-width: 560px) {
  .kind-cell .kind-icon { display: none; }
  .kind-cell .kind-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--pro-brand, #2563eb);
    background: rgba(37, 99, 235, 0.08);
    padding: 2px 8px;
    border-radius: 6px;
    text-transform: lowercase;
  }
}

/* ============================================================
   GUARD MOBILE — empeche la page blanche sur petits ecrans
   Force la visibilite du contenu critique
   ============================================================ */
@media (max-width: 720px) {
  html, body { background: #f5f7fb !important; }
  body { min-height: 100vh; }
  /* L'app-shell doit toujours etre visible et de taille raisonnable */
  .app-shell {
    display: block !important;
    min-height: 100vh;
    padding: 0 !important;
    margin: 0;
    grid-template-columns: 1fr !important;
  }
  .workspace, .workspace > * {
    display: block !important;
    min-width: 0 !important;
  }
  body[data-authenticated="false"] .hero-panel {
    display: block !important;
    padding: 16px !important;
    border-radius: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: #fff !important;
    min-height: auto !important;
    overflow: visible !important;
  }
  body[data-authenticated="true"] .hero-panel { display: none !important; }
  body[data-authenticated="true"] #dashboard-view {
    display: block !important;
    padding: 12px !important;
    min-height: 100vh;
  }
}

/* ============================================================
   TABLEAU FLAT — V8 final
   - Aucun cadre / fond / shadow / border-radius autour de la table
   - Aucun cadre par ligne ; juste un trait horizontal entre les lignes
   - Pas de hover qui surligne la ligne (juste opacite legere)
   - Bordure couleur priorite : trait fin a gauche du libelle, pas un block
   - Actions : fix overflow pour que l'icone archive ne soit pas tronquee
   ============================================================ */

/* Wrap : strictement aucun encadrement */
.table-wrap {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow-x: visible !important;
}
.table-panel.panel,
.table-panel {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 8px 0 !important;
}

/* La table : pas de border, pas de fond — UNIQUEMENT sur la table, thead, tbody,
   tr et td, PAS sur les descendants colores (pastilles, barres, pills) */
#tasks-table,
#tasks-table > thead,
#tasks-table > tbody,
#tasks-table > thead > tr,
#tasks-table > tbody > tr,
#tasks-table > thead > tr > th,
#tasks-table > tbody > tr > td {
  background: transparent !important;
  border-radius: 0 !important;
}
#tasks-table {
  border: 0 !important;
  border-collapse: collapse !important;
}

/* En-tete : juste un trait fin en bas, pas de fond */
#tasks-table thead th {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.10) !important;
  padding: 10px 8px !important;
  font-size: 10.5px !important;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--pro-muted, #94a3b8) !important;
  text-align: left;
}

/* Lignes : juste un trait sous chaque, rien d'autre */
#tasks-table tbody tr,
#tasks-table tbody tr.task-row {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
#tasks-table tbody td {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
  padding: 12px 8px !important;
}
#tasks-table tbody tr.task-row:last-child td {
  border-bottom: 0 !important;
}
.task-row:hover td {
  background: rgba(15, 23, 42, 0.025) !important;
}
.task-row.is-editing td {
  background: rgba(37, 99, 235, 0.04) !important;
}

/* Bordure couleur priorite : juste un fin filet a gauche du libelle */
#tasks-table tr.task-row td.cell-label {
  position: relative;
  padding-left: 14px !important;
}
#tasks-table tr.task-row td.cell-label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 2px;
  border-radius: 2px;
  background: rgba(15, 23, 42, 0.10);
}
.task-row--high   td.cell-label::before { background: #dc2626 !important; }
.task-row--medium td.cell-label::before { background: #f59e0b !important; }
.task-row--low    td.cell-label::before { background: #16a34a !important; }
/* Annule l'ancien ::before qui ajoutait un block sur la 1ere cellule */
#tasks-table tr.task-row td:first-child::before {
  display: revert;
}
.task-row td:first-child::before { display: none !important; }

/* Toolbar : juste les champs alignes, pas de fond ni cadre */
.table-toolbar {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 0 14px !important;
  margin: 0 0 8px !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
}

/* Fix icone archive : laisser la place aux 3 boutons + bouton mail eventuel */
.cell-actions {
  white-space: nowrap !important;
  text-align: right !important;
  padding-right: 4px !important;
}
.cell-actions .row-actions {
  justify-content: flex-end !important;
  gap: 3px !important;
  flex-wrap: nowrap !important;
}
.action-svg-btn {
  flex: 0 0 auto;
  width: 30px !important;
  height: 30px !important;
  border: 0 !important;
}
.th-actions {
  text-align: right !important;
  padding-right: 4px !important;
}

/* === Mobile : meme logique, encore plus depouille === */
@media (max-width: 720px) {
  .table-panel { padding: 4px 0 !important; }
  #tasks-table thead th {
    padding: 8px 6px !important;
    font-size: 9px !important;
  }
  #tasks-table tbody td {
    padding: 10px 6px !important;
  }
  #tasks-table tr.task-row td.cell-label {
    padding-left: 12px !important;
  }
  #tasks-table tr.task-row td.cell-label::before {
    top: 10px;
    bottom: 10px;
  }
  .table-toolbar {
    padding: 0 0 10px !important;
  }
}

/* Couleurs explicites pour barres avancement et autres elements colores
   (eviter les revert/transparent qui les rendaient invisibles) */
.chart-bar:not(.is-active),
.status-step:not(.is-active) { background: #e2e8f0 !important; }
.chart-bar.is-active.stage-0 { background: linear-gradient(180deg, #fca5a5, #ef4444) !important; }
.chart-bar.is-active.stage-1 { background: linear-gradient(180deg, #fcd34d, #f59e0b) !important; }
.chart-bar.is-active.stage-2 { background: linear-gradient(180deg, #bef264, #84cc16) !important; }
.chart-bar.is-active.stage-3 { background: linear-gradient(180deg, #6ee7b7, #16a34a) !important; }
.status-step.is-active.stage-0 { background: linear-gradient(180deg, #fca5a5, #ef4444) !important; }
.status-step.is-active.stage-1 { background: linear-gradient(180deg, #fcd34d, #f59e0b) !important; }
.status-step.is-active.stage-2 { background: linear-gradient(180deg, #bef264, #84cc16) !important; }
.status-step.is-active.stage-3 { background: linear-gradient(180deg, #6ee7b7, #16a34a) !important; }
.session-indicator-icon { background: linear-gradient(135deg, #3b82f6, #2563eb) !important; }
.notif-badge { background: #dc2626 !important; }
.live-pill { background: linear-gradient(135deg, #dcfce7, #bbf7d0) !important; }
.filter-summary { background: var(--pro-brand-soft, #eff6ff) !important; }

/* Et reapplique les couleurs explicites pour les bordures de priorite */
.task-row--high   td.cell-label::before { background: #dc2626 !important; }
.task-row--medium td.cell-label::before { background: #f59e0b !important; }
.task-row--low    td.cell-label::before { background: #16a34a !important; }

/* Pastilles urgence dans le tableau : couleurs vives */
.task-row--high .cell-urgency .urgency-dot,
.task-row--high .urgency-chip { background: #dc2626 !important; }
.task-row--medium .cell-urgency .urgency-dot,
.task-row--medium .urgency-chip { background: #f59e0b !important; }
.task-row--low .cell-urgency .urgency-dot,
.task-row--low .urgency-chip { background: #16a34a !important; }

/* Barres d'avancement actives */
.status-step.is-active.stage-0 { background: linear-gradient(180deg, #fca5a5, #ef4444) !important; }
.status-step.is-active.stage-1 { background: linear-gradient(180deg, #fcd34d, #f59e0b) !important; }
.status-step.is-active.stage-2 { background: linear-gradient(180deg, #bef264, #84cc16) !important; }
.status-step.is-active.stage-3 { background: linear-gradient(180deg, #6ee7b7, #16a34a) !important; }
.status-step:not(.is-active) { background: #e2e8f0 !important; }

/* En-tetes de colonnes : un peu plus d'espace entre Priorite et Avancement */
.th-color, .th-status {
  padding: 10px 12px !important;
}

/* Eviter le chevauchement des labels d'en-tete entre Priorite et Avancement */
.th-color, .th-status {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.th-color { padding-right: 16px !important; min-width: 80px; }
.th-status { padding-left: 12px !important; min-width: 130px; }

/* ============================================================
   MOBILE V5 — RETOUR aux cards verticales (1 tache = 1 card)
   Chaque tache devient un bloc vertical avec :
     - Libelle en haut (peut wrap)
     - Indicateurs (priorite, avancement, type, DL) en row sous le libelle
     - Bordure couleur priorite a gauche
   Fini la table horizontale pour mobile.
   ============================================================ */

@media (max-width: 720px) {
  /* Annuler le mode table sur mobile */
  #tasks-table,
  #tasks-table thead,
  #tasks-table tbody,
  #tasks-table tr,
  #tasks-table td,
  #tasks-table th {
    display: block !important;
    width: 100% !important;
  }
  /* En-tete de table cache sur mobile (les labels sont implicites avec les icones) */
  #tasks-table thead { display: none !important; }
  #tasks-table tbody { display: block !important; }

  /* Chaque ligne devient une CARD */
  #tasks-table tbody tr.task-row {
    display: block !important;
    background: #fff !important;
    border: 1px solid rgba(15, 23, 42, 0.06) !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
    padding: 14px 14px 14px 18px !important;
    margin-bottom: 10px !important;
    position: relative;
  }
  /* Bordure couleur priorite a gauche de la card */
  #tasks-table tbody tr.task-row::before {
    content: "";
    position: absolute;
    left: 0;
    top: 14px;
    bottom: 14px;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: rgba(15, 23, 42, 0.10);
  }
  #tasks-table tbody tr.task-row--high::before   { background: #dc2626 !important; }
  #tasks-table tbody tr.task-row--medium::before { background: #f59e0b !important; }
  #tasks-table tbody tr.task-row--low::before    { background: #16a34a !important; }

  /* Cellules : pas de borders, juste flex */
  #tasks-table tbody tr.task-row td {
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }
  #tasks-table tbody tr.task-row td.cell-label::before { display: none !important; }

  /* LIBELLE = titre de la card */
  #tasks-table tbody tr.task-row td.cell-label {
    margin: 0 0 10px 0 !important;
    padding-left: 0 !important;
    padding-right: 60px !important; /* place pour l'avatar/menu actions a droite */
  }
  #tasks-table tbody tr.task-row td.cell-label .task-title {
    font-size: 14px !important;
    font-weight: 600;
    line-height: 1.3;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Date (si visible) : petite annotation au dessus du libelle */
  #tasks-table tbody tr.task-row td.cell-date {
    display: inline-block !important;
    margin-bottom: 4px !important;
    font-size: 11px;
    color: var(--pro-muted, #94a3b8);
  }
  .task-updated-pill {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    color: var(--pro-muted, #94a3b8);
    font-size: 11px;
  }

  /* Ligne d'INDICATEURS sous le libelle : type | priorite | avancement | DL */
  #tasks-table tbody tr.task-row td.cell-kind,
  #tasks-table tbody tr.task-row td.cell-urgency,
  #tasks-table tbody tr.task-row td.cell-status,
  #tasks-table tbody tr.task-row td.cell-deadline {
    display: inline-flex !important;
    align-items: center;
    margin-right: 12px;
    margin-bottom: 6px;
    width: auto !important;
    vertical-align: middle;
  }
  /* Pastille priorite : 12px */
  #tasks-table tbody tr.task-row .cell-urgency .urgency-dot,
  #tasks-table tbody tr.task-row .cell-urgency .urgency-chip {
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
  }
  /* Type : icone seule */
  #tasks-table tbody tr.task-row .cell-kind svg,
  #tasks-table tbody tr.task-row .cell-kind .kind-toggle-btn svg {
    width: 18px !important;
    height: 18px !important;
    color: var(--pro-ink-soft, #475569);
  }
  #tasks-table tbody tr.task-row .cell-kind .kind-toggle-btn {
    padding: 0 !important;
    background: transparent !important;
  }
  /* Avancement : barres compactes */
  #tasks-table tbody tr.task-row .cell-status .chart-container,
  #tasks-table tbody tr.task-row .cell-status .status-stack {
    transform: scale(0.65);
    transform-origin: left center;
    width: 110px;
    height: 28px;
    margin: -2px 0;
  }
  /* DL : un peu plus visible */
  #tasks-table tbody tr.task-row .cell-deadline .deadline-pill {
    font-size: 11px;
    font-weight: 600;
  }

  /* Participant : sous les autres si group, sinon cache */
  #tasks-table tbody tr.task-row td.cell-related {
    display: block !important;
    margin-top: 8px;
    width: auto !important;
    font-size: 12px;
    color: var(--pro-ink-soft, #475569);
  }
  #tasks-table tbody tr.task-row td.cell-related.is-empty,
  #tasks-table tbody tr.task-row td.cell-related:empty {
    display: none !important;
  }

  /* Actions en haut a droite de la card (3 boutons) */
  #tasks-table tbody tr.task-row td.cell-actions {
    display: block !important;
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  #tasks-table tbody tr.task-row td.cell-actions .row-actions {
    gap: 2px !important;
  }
  #tasks-table tbody tr.task-row td.cell-actions .action-svg-btn {
    width: 28px !important;
    height: 28px !important;
  }
  #tasks-table tbody tr.task-row td.cell-actions .action-svg-btn svg {
    width: 14px !important;
    height: 14px !important;
  }

  /* Plus de scroll horizontal sur la table sur mobile */
  .table-wrap { overflow-x: visible !important; }
  #tasks-table { table-layout: auto !important; min-width: 0 !important; }

  /* Pas de hover qui surligne sur mobile (touch) */
  .task-row:hover td { background: transparent !important; }
}

/* Tres petits ecrans : on serre encore */
@media (max-width: 380px) {
  #tasks-table tbody tr.task-row {
    padding: 12px 10px 12px 16px !important;
  }
  #tasks-table tbody tr.task-row td.cell-label {
    padding-right: 50px !important;
  }
  #tasks-table tbody tr.task-row td.cell-label .task-title {
    font-size: 13.5px !important;
  }
}

/* ============================================================
   FIX MOBILE FINAL — texte boutons visible, TOTAL visible,
   actions cell ne s'echappent pas
   ============================================================ */

@media (max-width: 720px) {
  /* === Boutons d'action : TOUJOURS afficher le texte (meme tres petit) === */
  .action-bar-btn span { display: inline !important; font-size: 12px !important; }
  .action-bar-btn { gap: 6px !important; padding: 11px 10px !important; }
  .action-bar-btn svg { width: 16px !important; height: 16px !important; }

  /* === Stats : forcer la grille 3 colonnes EGALES === */
  .action-bar .stats-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 4px !important;
    width: 100% !important;
    margin: 0 !important;
  }
  .action-bar .stat-card.panel {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    padding: 6px 4px !important;
    min-width: 0 !important;
  }
  .action-bar .stat-card span {
    font-size: 9px !important;
    letter-spacing: 0.04em;
    text-align: center;
    white-space: nowrap;
  }
  .action-bar .stat-card strong {
    font-size: 18px !important;
  }
}

@media (max-width: 380px) {
  /* Tres petit : reduire encore */
  .action-bar-btn { padding: 10px 8px !important; }
  .action-bar-btn span { font-size: 11px !important; }
  .action-bar .stat-card span { font-size: 8.5px !important; }
  .action-bar .stat-card strong { font-size: 16px !important; }
}

/* === FIX : actions de la card ne doivent PAS s'echapper === */
@media (max-width: 720px) {
  /* L'absolute s'echappait de la card. On garde absolute mais on s'assure
     que le parent a bien position:relative (la card task-row l'a deja). */
  #tasks-table tbody tr.task-row {
    position: relative !important;
    overflow: hidden !important;
  }
  #tasks-table tbody tr.task-row td.cell-actions {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    z-index: 1;
  }

  /* Si la table est vide (pas de task), les cellules ne doivent pas afficher
     les actions ailleurs. Le tbody:empty est invisible. */
  #tasks-table tbody:empty { display: none !important; }
}

/* ============================================================
   MON EQUIPE — nouvelles cards "personne invitee"
   ============================================================ */
.team-list-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.team-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 10px;
  background: #fff;
  transition: border-color 0.12s, background 0.12s;
}
.team-card:hover {
  border-color: rgba(37, 99, 235, 0.2);
  background: rgba(37, 99, 235, 0.02);
}
.team-card-avatar {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.team-card-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.team-card-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--pro-ink, #0f172a);
}
.team-card-email {
  font-size: 12px;
  color: var(--pro-muted, #94a3b8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.team-card-badge {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 999px;
}
.team-card-badge--member {
  background: rgba(37, 99, 235, 0.10);
  color: var(--pro-brand, #2563eb);
}
.team-card-remove {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: var(--pro-muted, #94a3b8);
  font-size: 18px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.team-card-remove:hover {
  background: #fee2e2;
  color: #dc2626;
}
.team-empty {
  padding: 16px;
  text-align: center;
  color: var(--pro-muted, #94a3b8);
  font-size: 13px;
  background: #f8fafc;
  border-radius: 10px;
  border: 1px dashed rgba(15, 23, 42, 0.10);
}

/* === FIX BARRES D'AVANCEMENT visibles sur mobile === */
@media (max-width: 720px) {
  /* Hauteur clamped, scale ok mais on s'assure que les barres ont une couleur */
  #tasks-table tbody tr.task-row .cell-status {
    min-width: 110px;
  }
  #tasks-table tbody tr.task-row .cell-status .chart-container,
  #tasks-table tbody tr.task-row .cell-status .status-stack {
    transform: none !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    display: inline-flex;
    gap: 3px;
    align-items: flex-end;
  }
  #tasks-table tbody tr.task-row .cell-status .status-step,
  #tasks-table tbody tr.task-row .cell-status .chart-bar {
    width: 8px !important;
    border-radius: 2px;
  }
  #tasks-table tbody tr.task-row .cell-status .status-step.stage-0 { height: 10px !important; }
  #tasks-table tbody tr.task-row .cell-status .status-step.stage-1 { height: 14px !important; }
  #tasks-table tbody tr.task-row .cell-status .status-step.stage-2 { height: 18px !important; }
  #tasks-table tbody tr.task-row .cell-status .status-step.stage-3 { height: 22px !important; }
  #tasks-table tbody tr.task-row .cell-status .chart-bar.stage-0 { height: 10px !important; }
  #tasks-table tbody tr.task-row .cell-status .chart-bar.stage-1 { height: 14px !important; }
  #tasks-table tbody tr.task-row .cell-status .chart-bar.stage-2 { height: 18px !important; }
  #tasks-table tbody tr.task-row .cell-status .chart-bar.stage-3 { height: 22px !important; }
}


/* === Logo text "ToDoListe" === */
.brand-text {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--brand-deep);
  text-transform: none !important;
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
}
.brand-text__e {
  /* Lowercase x-height ~ 0.5em, cap-height ~ 0.7em. Scale the 'e' so its visual height
     matches the surrounding caps (T, D, L) and tint it with the brand blue. */
  font-size: 1.45em;
  line-height: 0;
  font-weight: 800;
  color: var(--brand);
  text-transform: none !important;
  letter-spacing: 0;
  position: relative;
  top: 0.06em;
}

/* In the hero ribbon (sidebar), the .hero-ribbon rule sets text-transform: uppercase
   and letter-spacing — kill those for the brand text so casing renders properly. */
.hero-ribbon .brand-text,
.hero-ribbon .brand-text__e {
  letter-spacing: -0.01em;
  text-transform: none !important;
}
.hero-ribbon { padding: 0.4rem 0.85rem; }

/* In the topbar, sit the brand text next to the logo. */
.topbar-brand .brand-text {
  margin-left: 4px;
}
@media (max-width: 720px) {
  .topbar-brand .brand-text { font-size: 0.95rem; }
  .hero-ribbon .brand-text  { font-size: 0.95rem; }
}