/* House Move Tracker — visual layer over Tailwind CDN */

/* ---------- Canvas & primitives ---------- */
.bg-canvas { background-color: #faf7f4; }
.shadow-soft { box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px -8px rgba(15,23,42,.08); }
.btn-primary {
  background: #0f172a;
  color: white;
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: 0.625rem;
  transition: background 0.15s;
}
.btn-primary:hover { background: #1e293b; }

/* ---------- Progress bar ---------- */
.progress-bar {
  width: 100%;
  height: 6px;
  background: #e7e5e4;
  border-radius: 9999px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  border-radius: 9999px;
  transition: width 0.6s cubic-bezier(.4,0,.2,1);
}
@keyframes ping-progress {
  0%   { transform: scaleX(0.98); }
  50%  { transform: scaleX(1.01); }
  100% { transform: scaleX(1); }
}
.progress-fill.pulse { animation: ping-progress 0.4s ease; }

/* ---------- Sticky banner ---------- */

/* ---------- Today / Tomorrow / Missed dashboard ---------- */
.today-card {
  background: white;
  border-radius: 1rem;
  padding: 1rem 1.125rem 0.875rem;
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px -8px rgba(15,23,42,.08);
  border: 1px solid #f0eeea;
}
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
}
.avatar-greg { background: #dbeafe; color: #1e40af; }
.avatar-wife { background: #fce7f3; color: #9d174d; }

.today-task {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.625rem;
  border-radius: 0.625rem;
  background: #f8fafc;
  font-size: 0.875rem;
  transition: background 0.15s;
}
.today-task:hover { background: #f1f5f9; }
.today-task.done { opacity: 0.45; text-decoration: line-through; }
.today-task .est-chip {
  margin-left: auto;
  font-size: 0.7rem;
  color: #475569;
  font-weight: 600;
}
.today-task.missed {
  background: #fef2f2;
  border: 1px solid #fecaca;
}
.today-task.missed:hover { background: #fee2e2; }
.today-task.preview {
  background: transparent;
  border: 1px dashed #e2e8f0;
  color: #94a3b8;
  font-style: italic;
}

.missed-block {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 0.625rem;
  padding: 0.5rem 0.625rem;
  margin-bottom: 0.5rem;
}
.missed-header {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #9a3412;
  margin-bottom: 0.375rem;
}
.missed-pill {
  background: #fb923c; color: white;
  padding: 0 0.4rem; border-radius: 9999px;
  font-size: 0.7rem;
}

.tomorrow-block {
  margin-top: 0.625rem;
  padding-top: 0.5rem;
  border-top: 1px dashed #e7e5e4;
}
.tomorrow-header {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
  margin-bottom: 0.375rem;
}

.rest-day {
  text-align: center;
  color: #94a3b8;
  padding: 0.875rem;
  font-style: italic;
  font-size: 0.85rem;
}

/* ---------- Category tiles ---------- */
.category-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 0.625rem;
}
.cat-tile {
  background: white;
  border-radius: 0.875rem;
  padding: 0.75rem 0.875rem;
  border: 1px solid #f0eeea;
  cursor: pointer;
  transition: all 0.15s;
  box-shadow: 0 1px 2px rgba(15,23,42,.03);
  position: relative;
  overflow: hidden;
}
.cat-tile:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -4px rgba(15,23,42,.1);
}
.cat-tile.active {
  border-color: #0f172a;
  box-shadow: 0 0 0 1px #0f172a;
}
.cat-tile .cat-icon {
  width: 32px; height: 32px;
  border-radius: 0.5rem;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1rem;
  margin-bottom: 0.4rem;
}
.cat-tile .cat-name {
  font-size: 0.8rem;
  font-weight: 600;
  color: #0f172a;
}
.cat-tile .cat-count {
  font-size: 1.125rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.1;
}
.cat-tile .cat-sub {
  font-size: 0.7rem;
  color: #94a3b8;
}
.cat-tile .cat-bar {
  height: 3px;
  background: #f1f5f9;
  border-radius: 9999px;
  margin-top: 0.4rem;
  overflow: hidden;
}
.cat-tile .cat-bar > div {
  height: 100%;
  border-radius: 9999px;
}

/* ---------- House panels ---------- */
.panels-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 1024px) {
  .panels-grid { grid-template-columns: 1fr 1fr; }
  .panels-grid.focus-leaving .house-panel[data-house="new"] { display: none; }
  .panels-grid.focus-leaving { grid-template-columns: 1fr; }
  .panels-grid.focus-new .house-panel[data-house="leaving"] { display: none; }
  .panels-grid.focus-new { grid-template-columns: 1fr; }
}

.house-panel {
  background: white;
  border-radius: 1.125rem;
  padding: 1.25rem;
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px -8px rgba(15,23,42,.08);
  border: 1px solid #f0eeea;
}
.house-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 0.75rem;
}
.icon-btn {
  padding: 0.375rem 0.5rem;
  border-radius: 0.5rem;
  color: #64748b;
  font-size: 0.9rem;
  transition: all 0.15s;
}
.icon-btn:hover { background: #f1f5f9; color: #0f172a; }
.icon-btn.active { background: #0f172a; color: white; }

.toolbar {
  display: flex; align-items: center; gap: 0.5rem;
  margin-bottom: 0.875rem;
  flex-wrap: wrap;
}
.filter-group {
  display: inline-flex;
  background: #f5f3ef;
  border-radius: 9999px;
  padding: 3px;
  gap: 2px;
}
.filter-pill {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  color: #64748b;
  transition: all 0.15s;
}
.filter-pill:hover { color: #0f172a; }
.filter-pill.active {
  background: white;
  color: #0f172a;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}

/* ---------- Category groups (in panels) ---------- */
.cat-group { border-radius: 0.75rem; overflow: hidden; }
.cat-group + .cat-group { margin-top: 0.5rem; }
.cat-group-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.75rem;
  cursor: pointer;
  border-radius: 0.75rem;
  font-size: 0.85rem;
  font-weight: 600;
  user-select: none;
  transition: background 0.15s;
}
.cat-group-header:hover { filter: brightness(0.97); }
.cat-group-header .chevron {
  margin-left: auto;
  transition: transform 0.2s;
  color: currentColor;
  opacity: 0.6;
}
.cat-group.collapsed .chevron { transform: rotate(-90deg); }
.cat-group.collapsed .cat-group-body { display: none; }
.cat-group-body {
  padding: 0.25rem 0.25rem 0.4rem;
}
.cat-group-count {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.05rem 0.4rem;
  border-radius: 9999px;
  background: rgba(15,23,42,.08);
  color: inherit;
}

/* ---------- Task row ---------- */
.task-row {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.5rem 0.625rem;
  border-radius: 0.55rem;
  transition: background 0.15s;
}
.task-row:hover { background: #f8fafc; }
.task-row .task-title { font-size: 0.875rem; line-height: 1.3; }
.task-row.done .task-title { text-decoration: line-through; color: #94a3b8; }
.task-row .chip {
  display: inline-block;
  padding: 0.05rem 0.45rem;
  border-radius: 9999px;
  font-size: 0.65rem;
  font-weight: 600;
  background: #f1f5f9;
  color: #475569;
  border: 1px solid transparent;
}
.task-row .chip.greg  { background: #dbeafe; color: #1e40af; }
.task-row .chip.wife  { background: #fce7f3; color: #9d174d; }
.task-row .chip.either{ background: #f1f5f9; color: #475569; }
.task-row .chip.est   { background: #f5f3ff; color: #5b21b6; }
.task-row .chip.deadline { background: #fef3c7; color: #92400e; }
.task-row .chip.deadline.after { background: #ccfbf1; color: #115e59; }
.task-row .chip.deadline.bydate { background: #ede9fe; color: #4338ca; }

/* ---------- Inputs ---------- */
.setting-input {
  width: 100%;
  border: 1px solid #e7e5e4;
  border-radius: 0.55rem;
  padding: 0.45rem 0.625rem;
  font-size: 0.9rem;
  margin-top: 0.1rem;
  background: white;
}
.setting-input:focus {
  outline: none;
  border-color: #0f172a;
  box-shadow: 0 0 0 2px rgba(15,23,42,.12);
}
.quick-btn {
  padding: 0.45rem 0.75rem;
  border-radius: 0.55rem;
  border: 1px solid #e7e5e4;
  background: white;
  font-size: 0.8rem;
  font-weight: 500;
  transition: all 0.15s;
}
.quick-btn:hover { background: #f8fafc; }
.est-preset {
  border: 1px solid #ddd6fe;
  background: #f5f3ff;
  color: #5b21b6;
  padding: 0.15rem 0.5rem;
  border-radius: 9999px;
  font-weight: 600;
}
.est-preset:hover { background: #ede9fe; }

.add-task-btn {
  width: 100%;
  border: 2px dashed #e7e5e4;
  color: #64748b;
  padding: 0.625rem;
  border-radius: 0.75rem;
  font-weight: 500;
  transition: all 0.15s;
}
.add-task-btn:hover { border-color: #0f172a; color: #0f172a; background: #fafafa; }

/* ---------- Settings drawer ---------- */
#availability-grid .av-row {
  display: grid;
  grid-template-columns: 1fr 80px 80px;
  gap: 0.5rem;
  align-items: center;
  padding: 0.25rem 0;
  font-size: 0.85rem;
}
#availability-grid .av-row.move-day { background: #fef3c7; border-radius: 0.375rem; padding: 0.25rem 0.5rem; }
#availability-grid .av-head {
  display: grid;
  grid-template-columns: 1fr 80px 80px;
  gap: 0.5rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  color: #64748b;
  font-weight: 600;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid #e7e5e4;
  margin-bottom: 0.25rem;
}
#availability-grid input[type=number] {
  width: 100%;
  border: 1px solid #e7e5e4;
  border-radius: 0.375rem;
  padding: 0.2rem 0.4rem;
  font-size: 0.85rem;
  text-align: right;
}

/* ---------- Task modal ---------- */
#task-modal:not(.hidden) { display: flex; }

/* ---------- Inputs / checkbox ---------- */
input[type="checkbox"].task-check {
  width: 17px; height: 17px;
  accent-color: #0f172a;
  cursor: pointer;
  margin-top: 1px;
  flex-shrink: 0;
}

/* ---------- Category colour map ---------- */
.cat-Packing    { --cat-bg: #fff7ed; --cat-fg: #9a3412; --cat-bar: #fb923c; }
.cat-Painting   { --cat-bg: #f5f3ff; --cat-fg: #5b21b6; --cat-bar: #8b5cf6; }
.cat-Cleaning   { --cat-bg: #eff6ff; --cat-fg: #1e3a8a; --cat-bar: #60a5fa; }
.cat-Admin      { --cat-bg: #f1f5f9; --cat-fg: #334155; --cat-bar: #64748b; }
.cat-Logistics  { --cat-bg: #ecfdf5; --cat-fg: #065f46; --cat-bar: #34d399; }
.cat-Setup      { --cat-bg: #fdf2f8; --cat-fg: #9d174d; --cat-bar: #f472b6; }
.cat-Garden     { --cat-bg: #f0fdf4; --cat-fg: #166534; --cat-bar: #4ade80; }
.cat-Maintenance{ --cat-bg: #fef2f2; --cat-fg: #991b1b; --cat-bar: #f87171; }
.cat-Other      { --cat-bg: #fafaf9; --cat-fg: #44403c; --cat-bar: #a8a29e; }

.cat-group-header { background: var(--cat-bg); color: var(--cat-fg); }
.cat-tile .cat-icon { background: var(--cat-bg); color: var(--cat-fg); }
.cat-tile .cat-bar > div { background: var(--cat-bar); }
.task-row .chip.cat { background: var(--cat-bg); color: var(--cat-fg); }