/* ── ACTION BAR ───────────────────────────────────────────────────────
   Structure : flex row — 4 groupes séparés par des pipes
──────────────────────────────────────────────────────────────────────── */
.action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 0.8rem;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: 8px;
  position: sticky; top: 0; z-index: 45;
  overflow: visible;
  margin-top: 0.15rem;
}

/* ── Groupes ─────────────────────────────────────────────────────── */
.ab-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* ── Pipe séparateur ─────────────────────────────────────────────── */
.ab-pipe {
  width: 1px;
  height: 52px;
  background: var(--border);  
  opacity: 0.5;
  flex-shrink: 0;
  user-select: none;
}

/* ── Groupe 4 (droite) : colonne font slider + tri ───────────────── */
.ab-group-4 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
}

.ab-group .btn {
  width: 52px; height: 52px;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 6px;
}
.btn-new-proj {
  background: linear-gradient(145deg, #6effa8 0%, #1a8a4a 100%);
  color: #0d0d14;
  box-shadow: 0 2px 8px rgba(34,160,90,0.4);
}
.btn-new-proj:hover { background: linear-gradient(145deg, #85ffb8 0%, #22a85a 100%); }
.btn-new-task {
  background: linear-gradient(145deg, #6effa8 0%, #1a8a4a 100%);
  color: #0d0d14;
  box-shadow: 0 2px 8px rgba(34,160,90,0.4);
}
.btn-new-task:hover { background: linear-gradient(145deg, #85ffb8 0%, #22a85a 100%); }

/* Bloc-note — div conteneur 52×52, SVG à 60% centré dedans */
.ab-scratch-btn {
  width: 52px; height: 52px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: #ffffff;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface2);
  transition: all 0.15s;
}
.ab-scratch-btn svg { width: 60%; height: 60%; }
.ab-scratch-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ── Bouton Priorités ───────────────────────────────────────────── */
.ab-prio-wrap {
  position: relative;
  /* margin-left supprimé — prio est maintenant après ACT */
  flex-shrink: 0;
}
.ab-prio-btn {
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: rgba(255,255,255,0.72);
  border: 1px solid var(--border);
  border-radius: 6px;
  background: linear-gradient(145deg, #22223a 0%, #181828 100%);
  transition: all 0.15s;
  user-select: none;
}
.ab-prio-btn:hover { border-color: var(--accent); color: #fff; background: linear-gradient(145deg, #2a2a48 0%, #1e1e38 100%); }
.ab-prio-btn.active { border-color: var(--accent); color: #fff; background: linear-gradient(145deg, #2a2a48 0%, #1e1e38 100%); box-shadow: 0 0 8px rgba(200,184,255,0.25); }

/* ── Bouton Projets ─────────────────────────────────────────────── */
.ab-proj-wrap {
  position: relative;
  flex-shrink: 0;
}
.ab-proj-btn {
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: #0d0d14;
  border: none; border-radius: 6px;
  background: linear-gradient(145deg, #d0bcff 0%, #8b5cf6 100%);
  box-shadow: 0 2px 8px rgba(139,92,246,0.4);
  transition: all 0.15s;
  user-select: none;
}
.ab-proj-btn:hover { background: linear-gradient(145deg, #e0d0ff 0%, #9d6fff 100%); }
.ab-proj-btn.active { box-shadow: 0 0 12px rgba(139,92,246,0.6); outline: 2px solid rgba(200,184,255,0.6); outline-offset: 2px; }

.proj-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.35rem;
  z-index: 200;
  min-width: 190px;
  max-height: 260px;
  overflow-y: auto;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  flex-direction: column;
  gap: 2px;
}
.proj-dropdown.open { display: flex; }
.proj-opt {
  background: none; border: none; border-radius: 4px;
  color: var(--text); cursor: pointer;
  font-family: var(--font); font-size: 0.75rem;
  padding: 0.3rem 0.5rem;
  text-align: left;
  display: flex; align-items: center; gap: 0.5rem;
  transition: background 0.1s;
  white-space: nowrap;
}
.proj-opt:hover  { background: var(--surface2); }
.proj-opt.active { background: rgba(200,184,255,0.12); color: var(--accent); }
.proj-color-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* ── Bouton Catégories ──────────────────────────────────────────── */
.ab-cat-wrap {
  position: relative;
  flex-shrink: 0;
}
.ab-cat-btn {
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: #0a1628;
  border: none; border-radius: 6px;
  background: linear-gradient(145deg, #93c5fd 0%, #2563eb 100%);
  box-shadow: 0 2px 8px rgba(37,99,235,0.4);
  transition: all 0.15s;
  user-select: none;
}
.ab-cat-btn:hover { background: linear-gradient(145deg, #bfdbfe 0%, #3b82f6 100%); }
.ab-cat-btn.active { box-shadow: 0 0 12px rgba(37,99,235,0.6); outline: 2px solid rgba(147,197,253,0.6); outline-offset: 2px; }

.cat-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.35rem;
  z-index: 200;
  min-width: 190px;
  max-height: 260px;
  overflow-y: auto;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  flex-direction: column;
  gap: 2px;
}
.cat-dropdown.open { display: flex; }
.cat-opt {
  background: none; border: none; border-radius: 4px;
  color: var(--text); cursor: pointer;
  font-family: var(--font); font-size: 0.75rem;
  padding: 0.3rem 0.5rem;
  text-align: left;
  display: flex; align-items: center; gap: 0.5rem;
  transition: background 0.1s;
  white-space: nowrap;
}
.cat-opt:hover  { background: var(--surface2); }
.cat-opt.active { background: rgba(147,197,253,0.12); color: #60a5fa; }

/* ── Bouton TS / TPE toggle ─────────────────────────────────────── */
.ab-ts-tpe-btn {
  width: 52px; height: 52px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
  cursor: pointer; flex-shrink: 0;
  border: 1px solid var(--border); border-radius: 6px;
  background: linear-gradient(145deg, #22223a 0%, #181828 100%);
  transition: all 0.15s;
  padding: 0;
}
.ab-ts-tpe-btn:hover { border-color: var(--accent); }
.ts-label {
  font-family: var(--font); font-size: 0.72rem; font-weight: 800;
  letter-spacing: 0.04em; color: rgba(255,255,255,0.25);
  transition: color 0.15s;
  line-height: 1;
}
.ts-label.ts-active { color: #ffffff; text-shadow: 0 0 8px rgba(255,255,255,0.5); }
.ts-sep {
  font-size: 0.5rem; color: rgba(255,255,255,0.15); line-height: 1;
}

/* ── Filtres carrés : critique / rapide / récurrente ────────────── */
.ab-sq-filter {
  width: 52px; height: 52px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  border: 1px solid var(--border); border-radius: 6px;
  background: linear-gradient(145deg, #22223a 0%, #181828 100%);
  color: rgba(255,255,255,0.65);
  transition: all 0.15s; padding: 0;
}
.ab-sq-filter:hover { border-color: var(--accent); color: #fff; }
.ab-sq-filter.active {
  border-color: var(--accent2);
  color: var(--accent2);
  background: rgba(255,158,122,0.08);
  box-shadow: 0 0 8px rgba(255,158,122,0.25);
}

/* Dropdown priorités */
.prio-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.35rem;
  z-index: 200;
  min-width: 172px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  flex-direction: column;
  gap: 2px;
}
.prio-dropdown.open { display: flex; }
.prio-opt {
  background: none; border: none; border-radius: 4px;
  color: var(--text); cursor: pointer;
  font-family: var(--font); font-size: 0.75rem;
  padding: 0.3rem 0.5rem;
  text-align: left;
  display: flex; align-items: center; gap: 0.5rem;
  transition: background 0.1s;
  white-space: nowrap;
}
.prio-opt:hover  { background: var(--surface2); }
.prio-opt.active { background: rgba(200,184,255,0.12); color: var(--accent); }
.prio-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }


/* ── Col 2 : ACT — carré, centré exactement ─────────────────────── */
.sort-btn {
  background: none; border: 1px solid var(--border); border-radius: 4px;
  color: #ffffff; cursor: pointer; font-size: 0.85rem;
  padding: 0.25rem 0.5rem; transition: all 0.12s;
  text-shadow: 0 0 6px rgba(255,255,255,0.3);
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px; height: 26px; line-height: 1;
}
.sort-btn.active { border-color: var(--accent); color: var(--accent); background: rgba(200,184,255,0.08); text-shadow: 0 0 8px rgba(200,184,255,0.5); }
.sort-btn:hover  { border-color: var(--accent); color: var(--accent); text-shadow: 0 0 8px rgba(200,184,255,0.5); }

.ab-reset-act {
  width: 104px; height: 52px;
  font-size: 1.5rem; font-weight: 900; letter-spacing: 0.02em;
  padding: 0; flex-shrink: 0;
  border-radius: 6px;
  border: 2px solid rgba(180,200,120,0.35);
  background: linear-gradient(145deg, #252535 0%, #1a1a28 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 2px 8px rgba(0,0,0,0.4);
}
.ab-reset-act:hover {
  border-color: rgba(180,200,120,0.65);
  background: linear-gradient(145deg, #2e2e42 0%, #1e1e30 100%);
}

/* Texte ACT en dégradé kaki militaire */
.act-text {
  background: linear-gradient(to bottom, #a8c050 0%, #d0e870 45%, #6a8830 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1;
}


.ab-font-slider {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 0.55rem; color: var(--muted);
}
.ab-sort-controls {
  display: flex; align-items: center; gap: 0.35rem;
}

/* ── Filter group ───────────────────────────────────────────────── */
.filter-group { display: flex; align-items: center; gap: 0.4rem; }
.filter-arrow {
  background: none; border: 1px solid var(--border); border-radius: 3px;
  color: var(--muted); cursor: pointer; font-size: 0.6rem;
  padding: 0.15rem 0.35rem; transition: all 0.12s; line-height: 1;
}
.filter-arrow:hover { border-color: var(--accent); color: var(--accent); }
.filter-select {
  background: var(--surface2); border: 1px solid var(--border); border-radius: 4px;
  color: var(--text); font-family: var(--font); font-size: 1em;
  padding: 0.2rem 0.5rem; cursor: pointer; min-width: 150px;
}
.filter-select:focus { outline: none; border-color: var(--accent); }

/* ── THÈME CLAIR — sort-btn ──────────────────────────────────────────── */
:root[data-theme="light"] .sort-btn {
  color: var(--text);
  text-shadow: none;
}

/* ── THÈME CLAIR — bouton ACT dégradé tricolore ─────────────────────── */
:root[data-theme="light"] .ab-reset-act {
  border: 2px solid transparent;
  background: linear-gradient(to right, rgba(255,0,0,0.5), rgba(0,51,255,0.5), rgba(255,153,0,0.5)) padding-box,
              linear-gradient(to right, rgba(255,0,0,0.4), rgba(0,51,255,0.4), rgba(255,153,0,0.4)) border-box;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
:root[data-theme="light"] .ab-reset-act:hover {
  background: linear-gradient(to right, rgba(204,0,0,0.5), rgba(0,34,204,0.5), rgba(204,119,0,0.5)) padding-box,
              linear-gradient(to right, rgba(204,0,0,0.55), rgba(0,34,204,0.55), rgba(204,119,0,0.55)) border-box;
}
:root[data-theme="light"] .act-text {
  background: linear-gradient(to bottom, #444444, #222222);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}