/* =====================================================================
   Add Task Bar — wrappers
   ---------------------------------------------------------------------
   The bar markup itself (.hero-add-bar, .hero-add-bar__row, …) is
   styled by features/dashboard-views.css. This file styles:

     1. Centered, backdrop-blurred modal (.add-task-modal) — used on
        non-dashboard authenticated pages, triggered by the floating
        pill.
     2. Always-visible inline wrapper inside the dashboard hero
        (.dashboard-hero__add-bar).
     3. Floating bottom-LEFT pill button (.floating-add-trigger) that
        opens the modal on non-dashboard pages.
   ===================================================================== */

/* ─── Centered add-task modal ──────────────────────────────────────── */
.add-task-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 12vh 1rem 2rem;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: addBarFadeIn 0.18s ease;
}
.add-task-modal.is-open { display: flex; }

.add-task-modal__panel {
  width: 100%;
  max-width: 640px;
  animation: addBarSlideIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

/* The bar inside the modal stretches to fit the panel */
.add-task-modal .hero-add-bar { max-width: 100%; }

/* ─── Dashboard: always-visible inline bar ─────────────────────────────
   Wraps the shared _add_task_bar.html partial in the hero so it's
   available from every dashboard view. The X collapse button is
   hidden here — nothing to close, the bar is a first-class hero
   element. */
.dashboard-hero__add-bar {
  margin-top: 1rem;
  width: 100%;
  max-width: 640px;
}
.dashboard-hero__add-bar .hero-add-bar__collapse { display: none; }

/* ─── Floating bottom-LEFT pill (non-dashboard pages) ──────────────────
   Clicking it opens the .add-task-modal above. Sidebar-aware offset:
   70px collapsed, 240px expanded. */
.floating-add-trigger {
  position: fixed;
  left: calc(70px + 1.5rem);
  bottom: 1.5rem;
  z-index: 1050;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  transition: left 0.25s ease, transform 0.15s ease,
              box-shadow 0.2s ease, background 0.2s ease,
              border-color 0.2s ease;
  font-family: inherit;
}
body:has(.main-sidebar:not(.collapsed)) .floating-add-trigger {
  left: calc(240px + 1.5rem);
}
.floating-add-trigger i { color: var(--text-muted); font-size: 0.85rem; }
.floating-add-trigger:hover {
  background: var(--surface-2);
  border-color: var(--primary);
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}
.floating-add-trigger:hover i { color: var(--primary); }

/* Pending count badge — visible when DOM has unsaved tasks */
.floating-add-trigger__count {
  display: none;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--primary);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  align-items: center;
  justify-content: center;
}
.floating-add-trigger.has-pending .floating-add-trigger__count {
  display: inline-flex;
}

body.add-bar-open .floating-add-trigger { display: none; }

/* ─── Animations ───────────────────────────────────────────────────── */
@keyframes addBarFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes addBarSlideIn {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* On small screens, keep the pill anchored bottom-left but tight. */
@media (max-width: 540px) {
  .floating-add-trigger {
    left: 0.75rem;
    bottom: 0.75rem;
    padding: 0.75rem 1.1rem;
  }
  body:has(.main-sidebar:not(.collapsed)) .floating-add-trigger {
    left: 0.75rem;
  }
}