:root {
  --bg: #f7faf9;
  --card: #fff;
  --text: #111;
  --muted: #667085;
  --brand: #0ea5e9;
  --brand-600: #0284c7;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-family:
    Inter,
    system-ui,
    Segoe UI,
    Roboto,
    Arial;
  background: var(--bg);
  color: var(--text);
}

/* NAVBAR */
.navbar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: #ffffffcc;
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #eef1f3;
}
.nav-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand {
  font-weight: 800;
  letter-spacing: 0.2px;
}
.nav-links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.nav-btn {
  border: 0;
  background: transparent;
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  color: #334155;
}
.nav-btn:hover {
  background: #f0f5f9;
}
.nav-btn.active {
  background: var(--brand);
  color: #fff;
}
.spacer {
  flex: 1;
}
.hamb {
  display: none;
  border: 0;
  background: #eef2f7;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  font-weight: 800;
  cursor: pointer;
}

@media (max-width: 820px) {
  .nav-inner {
    flex-wrap: wrap;
  }
  .hamb {
    display: inline-grid;
    place-items: center;
  }
  .nav-links {
    width: 100%;
    display: none;
  }
  .nav-links.open {
    display: flex;
  }
}

/* Onboarding hiba / siker üzenetek */
.bm-error {
  color: #e53935;
  font-size: 14px;
  margin-top: 6px;
}

.bm-success {
  color: #00a86b;
  font-size: 14px;
  margin-top: 4px;
}

.bm-card-inner .tc-time {
  background: none;
}

/* LAYOUT */
.container {
  max-width: 1100px;
  margin: 18px auto;
  padding: 0 16px;
}
.card {
  background: var(--card);
  border-radius: 16px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
  padding: 16px;
}
.card-header {
  display: flex;
  justify-content: space-between; /* cím balra, gombok jobbra */
  align-items: center;
  gap: 12px;
  padding: 0 4px;
  margin-bottom: 10px;
}

.card-header-buttons {
  display: flex;
  align-items: center;
  gap: 10px; /* gombok közti távolság */
}

.card-title {
  font-size: 22px;
  margin: 0;
}
.muted {
  color: var(--muted);
}
.table-wrap {
  overflow: auto;
}
table {
  width: 100%;
  border-collapse: collapse;
}
th,
td {
  padding: 10px 8px;
  border-bottom: 1px solid #eef1f3;
  font-size: 14px;
  vertical-align: middle;
}
th {
  text-align: left;
  color: var(--muted);
  font-weight: 600;
}
.pill {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #eef6ff;
  color: #1e40af;
}
.actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* Buttons */
.btn {
  border: 0;
  border-radius: 999px;
  padding: 10px 15px;
  font-weight: 600;
  cursor: pointer;
}
.btn-primary {
  background: var(--brand);
  color: #fff;
}
.btn-secondary {
  background: #eaeef2;
}
.btn-danger {
  background: #ef4444;
  color: #fff;
}
.btn-link {
  background: transparent;
  border: 0;
  padding: 0;
  color: #0f52bd;
  cursor: pointer;
  font: inherit;
}

/* Toast */
.toast {
  position: fixed;
  right: 16px;
  bottom: 16px;
  background: #111;
  color: #fff;
  padding: 10px 14px;
  border-radius: 10px;
  opacity: 0;
  transform: translateY(8px);
  transition: 0.25s;
  z-index: 70;
}
.toast.show {
  opacity: 1;
  transform: translateY(0);
}

/* Sections (SPA) */
.view {
  display: none;
}
.view.active {
  display: block;
}

/* Modal */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  display: none;
  place-items: center;
  z-index: 80;
  padding: 16px;
}
.modal-backdrop.open {
  display: grid;
}
.modal-card {
  width: 100%;
  max-width: 860px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  transform: translateY(10px) scale(0.98);
  opacity: 0;
  transition: 0.22s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal-card.show {
  transform: translateY(0) scale(1);
  opacity: 1;
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 0;
}
.modal-body {
  padding: 16px;
  max-height: 80vh;
  overflow: auto;
}
.icon-btn {
  border: 0;
  background: #eef2f7;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 700;
}

/* Form */
label {
  font-size: 12px;
  color: var(--muted);
  display: block;
  margin: 0 0 6px;
}
input,
select,
textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #e6e7e8;
  border-radius: 10px;
  font-size: 14px;
  background: #fff;
}
select,
input[type="number"],
input[type="text"],
input[type="email"] {
  height: 40px;
}
textarea {
  min-height: 90px;
  resize: vertical;
}

/* Grid */
.grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(12, 1fr);
}
.grid > * {
  min-width: 0;
}
.row-6 {
  grid-column: span 6;
}
.row-4 {
  grid-column: span 4;
}
.row-3 {
  grid-column: span 3;
}
.row-2 {
  grid-column: span 2;
}
.row-12 {
  grid-column: span 12;
}
@media (max-width: 860px) {
  .row-6,
  .row-4,
  .row-3,
  .row-2,
  .row-12 {
    grid-column: span 12;
  }
}

/* --- Form sections (task modal) --- */
.section {
  border: 1px solid #eef1f3;
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 12px;
  background: #fff;
}
.section h3 {
  margin: 0 0 10px;
  font-size: 16px;
}
.split-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.split-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 860px) {
  .split-2,
  .split-3 {
    grid-template-columns: 1fr;
  }
}
.hint {
  font-size: 12px;
  color: #667085;
  margin-top: 4px;
}
.select-multi {
  height: 110px;
}

/* Sections already exist */

/* Toggle switch */
.switch {
  --h: 28px;
  --w: 54px;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.switch input {
  display: none;
}
.switch .track {
  width: var(--w);
  height: var(--h);
  background: #e5e7eb;
  border-radius: 999px;
  position: relative;
  transition: 0.2s;
}
.switch .thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: calc(var(--h) - 6px);
  height: calc(var(--h) - 6px);
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: 0.2s;
}
.switch input:checked + .track {
  background: #0ea5e9;
}
.switch input:checked + .track .thumb {
  transform: translateX(calc(var(--w) - var(--h)));
}

/* Weekly day pills */
.day-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.day-pill {
  border: 1px solid #e6e7e8;
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
}
.day-pill.active {
  background: #0ea5e9;
  color: #fff;
  border-color: #0ea5e9;
}
.table-switch {
  --h: 22px;
  --w: 40px;
  display: inline-flex;
  align-items: center;
}
.table-switch input {
  display: none;
}
.table-switch .track {
  width: var(--w);
  height: var(--h);
  background: #e5e7eb;
  border-radius: 999px;
  position: relative;
  transition: 0.2s;
}
.table-switch .thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: calc(var(--h) - 6px);
  height: calc(var(--h) - 6px);
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: 0.2s;
}
.table-switch input:checked + .track {
  background: #0ea5e9;
}
.table-switch input:checked + .track .thumb {
  transform: translateX(calc(var(--w) - var(--h)));
}

/* --- Planner: weekly grid --- */
.planner-grid {
  --timeW: 110px;
  --rowH: 56px; /* minimum órasor magasság */
  border: 1px solid #eef1f3;
  border-radius: 12px;
  overflow: auto;
  background: #fff;
}
.pg-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: var(--timeW) repeat(7, 1fr);
  background: #fff;
  border-bottom: 1px solid #eef1f3;
}
.pg-head > div {
  padding: 10px;
  font-weight: 700;
  font-size: 14px;
  text-align: center;
}

/* Minden órához külön "row" – így tud auto magas lenni */
.pg-row {
  display: grid;
  grid-template-columns: var(--timeW) repeat(7, 1fr);
  min-height: var(--rowH);
  border-bottom: 1px solid #f0f3f6; /* vízszintes rácsvonal */
  background: #fff;
}
.pg-time {
  padding: 8px 10px;
  font-size: 12px;
  color: #667085;
  border-right: 1px solid #eef1f3;
}
.pg-cell {
  padding: 6px;
  border-right: 1px solid #f1f3f5;
}
.pg-row:last-child {
  border-bottom: 0;
}
.pg-cell:last-child {
  border-right: 0;
}

/* All-day sor */
.pg-allday {
  background: #fcfdfd;
}

/* --- Kártyák: NINCS abszolút pozícionálás --- */
.task-card {
  background: #fff;
  border: 1px solid #e8eef3;
  border-left: 4px solid #94a3b8;
  border-radius: 10px;
  padding: 6px 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
  margin: 6px 0;
  cursor: pointer;
}
.task-card h4 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
}
.task-card .task-row {
  display: flex;
  gap: 8px;
  align-items: center;
  color: #667085;
  flex-wrap: wrap;
}
.task-pill {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid #e8eef3;
  background: #f8fbfa;
  color: #475569;
}
.task-time {
  font-weight: 600;
  color: #111;
}

/* státuszszínek */
.task--pending {
  border-left-color: #94a3b8;
}
.task--claimed {
  border-left-color: #0ea5e9;
}
.task--done {
  border-left-color: #10b981;
}
.task--approved {
  border-left-color: #16a34a;
  box-shadow: 0 6px 18px rgba(22, 163, 74, 0.12);
}
.task--skipped {
  border-left-color: #f59e0b;
  opacity: 0.95;
}

/* --- WEEK HEADER --- */
.week-head {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
  border-bottom: 1px solid #eef2f7;
  background: #fff;
  position: sticky;
  top: 64px;
  z-index: 4;
}
.week-head__cell {
  text-align: center;
  padding: 10px 0 12px;
  border-left: 1px solid #f2f5f9;
}
.week-head__cell:first-child {
  border-left: none;
}
.week-head__dow {
  font-size: 11px;
  letter-spacing: 0.04em;
  color: #6b7280;
  text-transform: uppercase;
}
.week-head__date {
  font-weight: 600;
  font-size: 18px;
  color: #111827;
}

/* --- GRID oszlop ma --- */
.col.is-today,
.week-head__cell.is-today {
  background: #f7fbff;
}
.col.is-today {
  box-shadow: inset 0 0 0 2px #e1f0ff;
}

/* --- Kártya: pontok --- */
.card__meta .pts {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.card__meta .pts::before {
  content: "⭐";
  line-height: 1;
}

/* ÚJ: ⭐ a task-pillhez is (egységes jelölés) */
.task-pill.pts::before {
  content: "⭐";
  margin-right: 4px;
}

/* --- Alsó szűrősávok --- */
/*.planner-bottom{
  position: sticky; bottom:0; z-index:5; background:linear-gradient(to top, rgba(255,255,255,.95), rgba(255,255,255,0));
  padding:6px 6px 8px;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  border-top:1px solid #eef2f7;
}*/
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  font-size: 13px;
}

.filter-multi {
  min-width: 220px;
}

/* Felső filter sor: bal oldalt státusz, jobb oldalt tagok */
.planner-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

/* jobb oldal: tag körök + rearrange mód */
.planner-bottom-right {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

/* Role chipek (Parent / Child) – ugyanilyen körök */
.mchip.role-chip[data-role="Parent"] .avatar {
  background: #ecfdf3 !important; /* világos zöld háttér */
  border: 2px solid #bbf7d0 !important;
  color: #166534 !important; /* sötét zöld betű */
}

.mchip.role-chip[data-role="Parent"] .avatar {
  background: #ecfdf3 !important; /* világos zöld háttér */
  border: 2px solid #bbf7d0 !important;
  color: #166534 !important; /* sötét zöld betű */
}

/* ÚJ: “ma” kiemelés a rácsban */
.pg-head > div.is-today {
  background: #f7fbff;
  box-shadow: inset 0 -2px 0 #e1f0ff;
}
.pg-row > .pg-cell.is-today {
  background: #f7fbff;
}

/* --- Member chips (avatar körök) --- */
.member-chips {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.mchip {
  --size: 40px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  border-radius: 12px;
  transition: 0.15s;
}

.mchip .avatar {
  width: var(--size);
  height: var(--size);
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 800;
  color: #0f172a;
  background: #f1f5f9;
  border: 2px solid #e2e8f0;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.mchip .avatar:hover {
  transform: scale(1.12);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.mchip .label {
  font-size: 12px;
  color: #334155;
  max-width: 80px;
  text-align: center;
  line-height: 1.2;
}

/* kis jelvény a szerepkörhöz */
.mchip .role {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 999px;
  background: #f8fafc;
  color: #64748b;
  border: 1px solid #e2e8f0;
  margin-top: 2px;
}

/* Role badge színek */
.mchip[data-role="Parent"] .role {
  background: #ecfdf3;
  border-color: #bbf7d0;
  color: #166534;
}
.mchip[data-role="Child"] .role {
  background: #eef2ff;
  border-color: #c7d2fe;
  color: #4338ca;
}

/* Közös paletta: ugyanazt használjuk az avatarhoz és a kártyákhoz */
.mchip.color-0 .avatar {
  background: #fee2e2;
  border-color: #fecaca;
  color: #7f1d1d;
}
.mchip.color-1 .avatar {
  background: #dbeafe;
  border-color: #bfdbfe;
  color: #1e3a8a;
}
.mchip.color-2 .avatar {
  background: #fef3c7;
  border-color: #fde68a;
  color: #78350f;
}
.mchip.color-3 .avatar {
  background: #dcfce7;
  border-color: #bbf7d0;
  color: #166534;
}
.mchip.color-4 .avatar {
  background: #e0f2fe;
  border-color: #bae6fd;
  color: #0c4a6e;
}
.mchip.color-5 .avatar {
  background: #fae8ff;
  border-color: #f5d0fe;
  color: #701a75;
}

/* Ugyanez a háttér a kártyákon is */
.task-card--fc.color-0 {
  background: #fee2e2;
}
.task-card--fc.color-1 {
  background: #ffedd5;
}
.task-card--fc.color-2 {
  background: #fef9c3;
}
.task-card--fc.color-3 {
  background: #dcfce7;
}
.task-card--fc.color-4 {
  background: #e0f2fe;
}
.task-card--fc.color-5 {
  background: #fae8ff;
}

/* Role-only feladatok: csak Parent / Child, nincs konkrét emberhez kötve */
.task-card--fc.role-parent {
  background: #ecfdf3; /* ugyanaz a zöld, mint a role badge */
}

.task-card--fc.role-child {
  background: #eef2ff; /* lilás háttér */
}

/* Assignment modal extra spacing for info blocks */
#assignModal .muted {
  padding: 8px 0;
}

/* === STACKED MODALS === */
#assignModal.modal-backdrop {
  z-index: 90;
} /* Assignment – felül */
#taskModal.modal-backdrop {
  z-index: 80;
} /* Task – alatta */
#assignModal .modal-card {
  max-width: 920px;
}
#assignModal .modal-footer {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 12px;
}

/* Assignment header – title + status pill */
.assign-header-main {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Status pill a fejlécben */
.assign-status-pill {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #e5e7eb;
  color: #374151;
  font-weight: 500;
}

/* Színek státusz szerint */
.assign-status-pill.st-pending {
  background: #fef3c7;
  color: #92400e;
}
.assign-status-pill.st-claimed {
  background: #dbeafe;
  color: #1d4ed8;
}
.assign-status-pill.st-done {
  background: #dcfce7;
  color: #166534;
}
.assign-status-pill.st-approved {
  background: #e0f2fe;
  color: #0369a1;
}
.assign-status-pill.st-skipped {
  background: #f3f4f6;
  color: #4b5563;
}

.field-error {
  margin-top: 4px;
  font-size: 12px;
  color: #d93025;
}
/* kisebb tipó az assignment mezőkhöz */
.assign-field-label {
  font-size: 12px;
  color: #667085;
  margin: 0 0 6px;
}
.assign-inline {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 860px) {
  .assign-inline {
    grid-template-columns: 1fr;
  }
}

.btn.is-on {
  background: #0ea5e9;
  color: #fff;
}
.planning-mode .pg-cell {
  background: #f8fbff;
}
.planning-mode .pg-cell.drop-ok {
  outline: 2px dashed #94c5ff;
}
.task-card.dragging {
  opacity: 0.6;
  transform: scale(0.98);
}

/* === Planner toolbar === */
.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.toolbar .left,
.toolbar .center,
.toolbar .right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.toolbar .left {
  flex: 1;
}
.toolbar .center {
  gap: 8px;
}
.toolbar .right {
  gap: 8px;
  margin-left: auto;
}

.btn-ghost {
  background: #eef2f7;
  color: #0f172a;
}
.btn-ghost:hover {
  background: #e6ebf3;
}

/* === Planner: nézetváltó kapszula (Day / Week / Month / List) === */
.segmented {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  overflow: hidden;
}

.segmented .seg-btn {
  border: 0;
  background: transparent;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  color: #111827;
  white-space: nowrap;
}

.segmented .seg-btn:hover {
  background: #f3f4f6;
}

.segmented .seg-btn.is-on {
  background: #0ea5e9;
  color: #fff;
}

.btn-icon {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  vertical-align: bottom;
}
/* === BusyMoms új napi fejléc (SaaS style) === */
.bm-day-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.bm-day-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.bm-date-chip {
  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 12px;
  padding: 6px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 56px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
}

.bm-chip-month {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b7280;
}

.bm-chip-day {
  font-size: 18px;
  font-weight: 800;
  color: #111827;
  line-height: 1;
}

.bm-day-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.bm-day-title {
  font-size: 18px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bm-day-sub {
  font-size: 12px;
  color: #6b7280;
}

.bm-day-right {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.bm-nav {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.bm-nav-btn {
  border: 0;
  border-radius: 999px;
  padding: 6px 10px;
  background: #e5e7eb;
  color: #111827;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.bm-nav-btn.bm-nav-icon {
  width: 32px;
  height: 32px;
  padding: 0;
  display: grid;
  place-items: center;
}

.bm-nav-btn:hover {
  background: #d1d5db;
}

.bm-view-switch {
  display: inline-flex;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  overflow: hidden;
  background: #fff;
}

.bm-view-btn {
  border: 0;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  background: transparent;
  cursor: pointer;
}

.bm-view-btn.is-active {
  background: #0ea5e9;
  color: #fff;
}

/* mobilon egymás alá törik szépen */
@media (max-width: 720px) {
  .bm-day-header {
    align-items: flex-start;
  }
  .bm-day-right {
    width: 100%;
    justify-content: flex-start;
  }
}

/* === Planner header (mint a referencián) === */
.planner-header {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* bal oldal: dátum + pager */
.ph-left {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* középen a Day / Week / Month / List kapszula */
.ph-center {
  flex: 1;
  display: flex;
  justify-content: center;
}

/* jobb oldal: Print / New task / Generate week */
.ph-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* mobilon egymás alá törik szépen */
@media (max-width: 860px) {
  .planner-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
  }

  /* Bal: dátum / pager   |   Közép: Day / Week / Month / List */
  .planner-header .ph-left,
  .planner-header .ph-center {
    flex: 1 1 50%;
  }

  .planner-header .ph-left {
    justify-content: flex-start;
  }

  .planner-header .ph-center {
    justify-content: flex-end; /* ha túl szoros, nyugodtan tedd flex-start-ra */
  }

  /* Alul, külön sorban: Print / + New task / Generate week */
  .planner-header .ph-right {
    flex: 1 1 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
  }
}

.ph-date-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
}

/* kis dátum-kocka a bal oldalon (NOV / 16) */
.date-pill {
  border: 0;
  padding: 6px 10px;
  border-radius: 12px;
  background: #f3f4f6;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 44px;
  cursor: pointer;
}
.date-pill-month {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b7280;
}
.date-pill-day {
  font-size: 18px;
  font-weight: 700;
  color: #111827;
}

.ph-date-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ph-date-main {
  font-size: 14px;
  font-weight: 600;
}
.ph-date-sub {
  font-size: 12px;
  color: #6b7280;
}

/* A dátum + nézetváltó sor rendezése */
.ph-date-wrap {
  display: flex;
  align-items: center;
  gap: 8px; /* hogy ne érjenek össze */
  width: 100%;
}

/* A pager fix szélességű maradjon, ne nyúljon */
.ph-date-wrap .nav-pager {
  flex: 0 0 auto;
}

/* A dropdown kapja meg a maradék helyet */
.ph-view-select-wrap {
  flex: 1 1 auto;
}

/* Maga a select – ugyanaz a “pill” feeling, mint a pager */
.ph-view-select {
  width: 100%;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #111827;

  /* natív nyíl maradhat, de kicsit szebben nézzen ki */
  outline: none;
}

/* opcionális: fókusz-stílus, hogy illeszkedjen */
.ph-view-select:focus {
  border-color: #0ea5e9;
  box-shadow: 0 0 0 1px rgba(14, 165, 233, 0.3);
}

.ph-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* puha szürke gomb a Printnek */
.btn-soft {
  background: #f3f4f6;
  color: #111827;
}

/* fekete primary (mint az “Add event”) */
.btn-dark {
  background: #0ea5e9;
  color: #fff;
}

/* kék kontúros másodlagos */
.btn-primary-outline {
  background: #ecfeff;
  color: #0369a1;
}

/* nav sor: prev / today / next + nézetek */
.ph-nav {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ph-nav-left {
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav-circle {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 0;
  background: #e5e7eb;
  display: inline-grid;
  place-items: center;
  font-size: 15px;
  cursor: pointer;
}
.nav-circle:hover {
  background: #d1d5db;
}

.nav-chip {
  border-radius: 999px;
  border: 0;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  background: #e5e7eb;
  cursor: pointer;
}
.nav-chip:hover {
  background: #d1d5db;
}

/* nézet-váltó – szegmensek (Week/Day/Month/List) */
.ph-views {
  display: inline-flex;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  overflow: hidden;
  background: #fff;
}

.ph-views .seg-btn {
  border: 0;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  background: transparent;
  color: #374151;
}

/* mobilon törjük alá */
@media (max-width: 860px) {
  .planner-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .ph-right {
    align-items: flex-start;
  }
  .ph-actions {
    flex-wrap: wrap;
  }
}

/* a régi napi toolbar a bmDayView-ban ne látszódjon */
#bmDayView .bm-day-toolbar {
  display: none;
}

/* === DAY VIEW GRID === */
.day-grid {
  --timeW: 50px;
  --rowH: 56px;
  position: relative;
  height: calc(100vh - 242px);
  border: 1px solid #eef1f3;
  border-radius: 12px;
  overflow: auto;
  background: #fff;
}

/* Félórás pontozott vonal az órás sorok közepén */
.day-grid .dg-row .dg-cells {
  position: relative;
}

.day-grid .dg-row .dg-cells::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 1px dotted #e5e7eb;
  pointer-events: none;
}

.dg-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: var(--timeW) auto;
  background: #fff;
  border-bottom: 1px solid #eef1f3;
}
.dg-head > div {
  padding: 10px;
  font-weight: 700;
  font-size: 14px;
  text-align: center;
}
.dg-row {
  display: grid;
  grid-template-columns: var(--timeW) auto;
  min-height: var(--rowH);
  border-bottom: 1px solid #f0f3f6;
  background: #fff;
}
.dg-time {
  padding: 5px;
  font-size: 12px;
  color: #667085;
  border-right: 1px solid #eef1f3;
  text-align: right;
}

.dg-cells {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(var(--day-member-min-w), 1fr);
}
.dg-cell {
  padding: 6px;
  border-right: 1px solid #f1f3f5;
}
.dg-cells .dg-cell:last-child {
  border-right: 0;
}
.dg-row:last-child {
  border-bottom: 0;
}

/* === Day view: overlay réteg a nyúló kártyáknak === */
.day-grid {
  position: relative;
}

.day-grid .dg-body {
  position: relative;
}

/* Napi nézet – idő oszlop szélesség FullCalendar-szerűre húzva */
.day-grid .dg-time {
  width: 50px !important; /* keskeny, mint a FullCalendar */
}

/* A fejléchez is ugyanekkora hely kell a bal oldali "üres" cellának */
.day-grid .dg-head > div:first-child {
  width: 50px !important;
  min-width: 50px !important;
  max-width: 50px !important;
}

/* Félórás pontozott vonal, mint FullCalendarban */
.day-grid .dg-row .dg-cells {
  position: relative;
}

.day-grid .dg-row .dg-cells::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%; /* fél óra */
  border-top: 1px dotted #e5e7eb; /* pontozott vonal színe */
  pointer-events: none; /* ne zavarja a kattintást a kártyákon */
}

.dg-head {
  align-items: center;
}

/* Csak a napi nézet headerben lévő mchip-ekre vonatkozzon */
.dg-head .dg-member.mchip {
  --size: 26px; /* kisebb kör, mint a felső chipeknél */
  flex-direction: row; /* ne oszlop legyen, hanem sor */
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 0;
  border: none;
  box-shadow: none;
  cursor: default;
}

/* Név stílus */
.dg-member-name {
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Biztos ami biztos: a header chipeknél ne legyen “ugrálós” hover */
.dg-head .mchip .avatar {
  box-shadow: none;
  transform: none;
}

/* A kártyák egy overlay rácsban ülnek a háttér-órák fölött */
.dg-overlay {
  position: absolute;
  left: 0;
  right: 0;
  /* top + height JS-ből kap értéket */
  pointer-events: none; /* overlay ne fogja el a kattintást */
  display: grid;
}

.dg-ov-col {
  position: relative; /* ebben lesznek az abszolút kártyák */
}

/* A day-view kártyák itt abszolút pozicionáltak */
.dg-ov-col .task-card--fc {
  position: absolute;
  left: 4px;
  right: 4px;
  pointer-events: auto; /* a kártya kattintható marad */
}

/* Day header: member nevei */
.dg-member {
  font-weight: 700;
  font-size: 14px;
  color: #0f172a;
}
.dg-sub {
  font-size: 12px;
  color: #64748b;
  font-weight: 600;
}

/* All-day sor */
.dg-allday {
  background: #fcfdfd;
}

/* === DAY LIST VIEW (kompakt) === */
.daylist {
  --timeW: 110px;
  border: 1px solid #eef1f3;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}
.dl-row {
  display: grid;
  grid-template-columns: var(--timeW) 1fr;
  border-bottom: 1px solid #f0f3f6;
  background: #fff;
}
.dl-row:last-child {
  border-bottom: 0;
}
.dl-time {
  padding: 10px;
  font-size: 12px;
  color: #667085;
  border-right: 1px solid #eef1f3;
}
.dl-cards {
  padding: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.dl-cards .task-card {
  min-width: 260px;
  max-width: 340px;
  flex: 1 1 300px;
  margin: 0; /* kompakt kártyák */
}
.dl-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: var(--timeW) 1fr;
  background: #fff;
  border-bottom: 1px solid #eef1f3;
}
.dl-head > div {
  padding: 10px;
  font-weight: 700;
  font-size: 14px;
}
.dl-allday {
  background: #fcfdfd;
}

/* Day = 1 oszlopos rács a weekly grid stílussal */
.day-single .pg-head {
  grid-template-columns: var(--timeW) 1fr;
}
.day-single .pg-row {
  grid-template-columns: var(--timeW) 1fr;
}

/* A kártya érjen végig a hasábban és legyen kompaktabb a rácsban */
.planner-grid .task-card {
  width: 100%;
  margin: 6px 0;
}

/* ==== MONTH GRID + MINI CARDS ==== */
.month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
}

.cal-dow {
  padding: 8px 6px;
  font-weight: 600;
  font-size: 12px;
  border: 1px solid #eef1f3;
  border-bottom: none;
  text-align: center;
}

.cal-cell {
  border: 1px solid #eef1f3;
  min-height: 96px;
  padding: 6px 6px 4px;
  display: flex;
  flex-direction: column;
  background: #fff;
}

.cal-cell.is-today {
  background: #f7fbff;
  box-shadow: inset 0 0 0 1px #e1f0ff;
}

.cal-cell.is-outside {
  background: #fafafa;
  color: #9ca3af;
}

.cal-cell-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
  font-size: 12px;
}

.cal-cards {
  flex: 1;
  overflow: hidden;
}

.cal-cell.drop-ok {
  outline: 2px dashed #94c5ff;
  outline-offset: 2px;
}

/* Mini kártya hónap nézethez */
.task-card--mini {
  padding: 4px 6px;
  border-radius: 8px;
  margin: 3px 0;
  font-size: 11px;
  box-shadow: none;
}

.task-card--mini h4 {
  font-size: 11px;
}

.task-card--mini .task-row {
  font-size: 10px;
}

.cal-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.task-card--mini {
  font-size: 11px;
  margin: 0 0 4px;
}

.card-header {
  position: relative; /* hogy legyen mihez pozicionálni a popovert */
}

/* Dátumválasztó kis panel */
.date-popover {
  position: absolute;
  top: 44px; /* kb. a Today gomb alatt */
  left: 0; /* JS-ből tesszük majd a helyére */
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18);
  padding: 10px 12px;
  min-width: 220px;
  z-index: 50;
  display: none;
}

.date-popover.open {
  display: block;
}

.date-popover h4 {
  margin: 0 0 8px;
  font-size: 13px;
}

.dp-row {
  margin-bottom: 8px;
}
.dp-row label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  margin-bottom: 4px;
}

/* többféle nézet egy popoverben (day / week / month) */
.dp-view {
  display: none;
}
.dp-view.active {
  display: block;
}
.dp-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 6px;
}

.btn-sm {
  padding: 6px 10px;
  font-size: 13px;
  border-radius: 999px;
}

/* === FullCalendar – weekly kártya dizájn === */
/* === Member-based colors (0–5) – avatar + kártya bal sáv === */

/* avatarok */
.mchip.color-0 .avatar {
  background: #fee2e2;
  border-color: #fecaca;
}
.mchip.color-1 .avatar {
  background: #ffedd5;
  border-color: #fed7aa;
}
.mchip.color-2 .avatar {
  background: #fef9c3;
  border-color: #fef08a;
}
.mchip.color-3 .avatar {
  background: #dcfce7;
  border-color: #bbf7d0;
}
.mchip.color-4 .avatar {
  background: #e0f2fe;
  border-color: #bfdbfe;
}
.mchip.color-5 .avatar {
  background: #fae8ff;
  border-color: #f5d0fe;
}

/* kártya bal oldali sávja */
.task-card--fc.color-0 {
  border-left-color: #f97373;
}
.task-card--fc.color-1 {
  border-left-color: #fb923c;
}
.task-card--fc.color-2 {
  border-left-color: #eab308;
}
.task-card--fc.color-3 {
  border-left-color: #22c55e;
}
.task-card--fc.color-4 {
  border-left-color: #3b82f6;
}
.task-card--fc.color-5 {
  border-left-color: #a855f7;
}

/* alap event keret kikapcsolása, hogy csak a kártya látszódjon */
.fc-timegrid-event {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

/* FullCalendar header styling (ugyanaz mint a Day View feeling) */
.fc-header-toolbar {
  background: #ffffff;
  padding: 12px 20px !important;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
  margin-bottom: 0;
}

th.fc-col-header-cell {
  height: 39px;
  vertical-align: middle;
  color: #000;
  font-weight: bold;
}

.fc-theme-standard .fc-scrollgrid {
  border: none !important;
}

.fc-timegrid-slot {
  height: 27px !important;
}

/* FullCalendar fő konténer */
.fc {
  border-radius: 12px;
  //overflow: hidden; /* hogy a belső grid ne lógjon ki */
  border: 1px solid #e5e7eb !important;
}

/* a mi kártyánk a hét / nap rácsban */
.task-card--fc {
  width: 100%;
  margin: 0;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-left-width: 4px;
  border-radius: 10px;
  padding: 4px 6px;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
  font-size: 11px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden; /* NE lógjon ki semmi */
}

.task-card--fc .tc-title {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  min-height: 19px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

.task-card--fc .tc-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  margin-top: 2px;
}

.tc-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10px;
  white-space: nowrap;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
}

/* idő – legyen kicsit hangsúlyosabb kékes */
.tc-time {
  font-weight: 600;
  color: #0f172a;
  background: #eff6ff;
  border-color: #dbeafe;
}

/* hely – neutrális szürke, NINCS ház emoji */
.tc-loc {
  color: #334155;
  background: #f9fafb;
  border-color: #e5e7eb;
}

/* kihez tartozik – kicsit “lilás” badge */
.tc-who {
  color: #4c1d95;
  background: #f3e8ff;
  border-color: #e9d5ff;
}

/* pontok – sárgás badge, csak a ⭐ marad */
.tc-pts {
  color: #92400e;
  background: #fef3c7;
  border-color: #fde68a;
}

/* ikonok: csak a user + csillag, a házat kivesszük */
.tc-who::before {
  content: "👤";
}
.tc-pts::before {
  content: "⭐";
}

/* státusz-színek a bal oldali sávhoz */
.task-card--fc.st-pending {
  border-left-color: #fcd34d;
}
.task-card--fc.st-in-progress {
  border-left-color: #0ea5e9;
}
.task-card--fc.st-done {
  border-left-color: #22c55e;
}
.task-card--fc.st-approved {
  border-left-color: #16a34a;
}
.task-card--fc.st-skipped {
  border-left-color: #f97316;
}
/* FullCalendar event szövegszín felülírása a kártyáknál */
.fc-timegrid-event .fc-event-main {
  overflow: hidden;
  color: #111827 !important;
}

/* --- FullCalendar: a kártya töltse ki az egész idősáv magasságát --- */
/* A kártya töltse ki az egész idősáv magasságát */
.fc-timegrid-event .fc-event-main {
  height: 100%;
  padding: 0 !important;
}

.fc-timegrid-event .fc-event-main > .task-card--fc {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* Biztos ami biztos: a kártya és a cím is legyen sötét */
.task-card--fc,
.task-card--fc .tc-title {
  color: #111827 !important;
}

/* FullCalendar ne nyomja össze az event content-et */
.fc-timegrid-event-harness .fc-timegrid-event {
  /*height: auto !important;*/
  min-height: 32px !important;
}

.fc-timegrid-event-harness-inset .fc-timegrid-event,
.fc-timegrid-event.fc-event-mirror,
.fc-timegrid-more-link {
  box-shadow: none !important;
}

/*.fc-timegrid-event .fc-event-main {
  height: auto !important;
}*/

/* Havi nézet: a default FC event keretet kikapcsoljuk */
.fc-daygrid-event {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

/* A list view-hez is előkészítjük, hogy a kártya látszódjon, ne az alap FC */
.fc-list-item .fc-list-event-graphic,
.fc-list-item .fc-list-event-time {
  display: none;
}
.fc-list-item .fc-list-event-title {
  padding: 0;
}

/* === FullCalendar LIST nézet finomhangolás === */

.fc-list-table {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #eef1f3;
}

.fc-list-day {
  background: #f9fafb;
  font-weight: 600;
  color: #111827;
}

.fc-list-event td {
  border-bottom: 1px solid #f1f5f9;
}

.fc-list-event:last-child td {
  border-bottom: none;
}

/* ne legyen aláhúzott link, az egész sor úgyis kattintható */
.fc-list-event a {
  text-decoration: none;
}

/* a kártya illeszkedjen a sorba */
.fc-list-event .task-card--fc {
  margin: 2px 0;
}

.fc-theme-standard .fc-list {
  border: none !important;
}

/* === LIST nézet kártya layout === */
.task-card--fc.list-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lc-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lc-time {
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: #eff6ff;
  border: 1px solid #dbeafe;
  white-space: nowrap;
}

.lc-title {
  font-size: 14px;
  font-weight: 600;
}

/* hogy a pill-ek szépen törjenek több sorba is */
.list-card .tc-row {
  flex-wrap: wrap;
}

/* List nézet – kék pötty off */
.fc-list-event-dot {
  display: none !important;
}

/* === Planner: Today-prev-next kapszula === */
.nav-pager {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #fff;
  overflow: hidden;
}

.nav-pager-btn {
  border: 0;
  background: transparent;
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
}

.nav-pager-today {
  font-weight: 600;
  padding: 10px 20px; /* kicsit szélesebb középen */
}

.nav-pager-btn + .nav-pager-btn {
  border-left: 1px solid #e5e7eb; /* függőleges választóvonal */
}

.nav-pager-btn:hover {
  background: #f3f4f6;
}

/* --- Planner header right side in one line --- */
.ph-right {
  display: flex;
  align-items: center;
  gap: 16px; /* gombblokk és nav blokk közti távolság */
  flex-direction: row; /* FONTOS: ne legyen többé column */
  flex-wrap: nowrap;
}

/* A felső action gombok egy sorban maradnak */
.ph-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* A pager + segmented is egy sorban legyen */
.ph-nav {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Generate Week legyen fekete, mint New Task */
#genWeekBtn.btn-primary-outline {
  background: #111827;
  color: #fff;
  border: none;
}

/* Függőleges oszlop-elválasztó vonalak */
.day-grid .dg-row .dg-cells {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(var(--day-member-min-w), 1fr);
}

.day-grid .dg-row .dg-cells > .dg-cell {
  border-right: 1px solid #e5e7eb; /* halvány elválasztó */
}

.day-grid .dg-row .dg-cells > .dg-cell:last-child {
  border-right: none;
}
.day-grid .dg-head > .dg-member {
  border-right: 1px solid #e5e7eb;
}

.day-grid .dg-head > .dg-member:last-child {
  border-right: none;
}

/* --- Status filter chips (Waiting / To approve / Finished) --- */
.status-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.status-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: none !important;
  transition:
    background-color 0.15s,
    color 0.15s,
    opacity 0.15s,
    box-shadow 0.15s;
}

/* checkbox rejtve, de a JS ugyanúgy eléri */
.status-pill input {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

/* Színek – igazodnak a kártya státusz színeihez */
.status-waiting {
  background: #fef3c7 !important; /* Sárga */
  color: #92400e !important;
}

.status-approve {
  background: #dbeafe !important; /* Kék */
  color: #1e3a8a !important;
}

.status-finished {
  background: #dcfce7 !important; /* Zöld */
  color: #166534 !important;
}

.event-waiting {
  border-right: 6px solid #fcd34d !important; /* Sárga border */
}

.event-approve {
  border-right: 6px solid #60a5fa !important; /* Kék border */
}

.event-finished {
  border-right: 6px solid #4ade80 !important; /* Zöld border */
}

.st-pending td.fc-list-event-graphic {
  background: #fcd34d;
}

/* aktív állapot: kis árnyék */
.status-pill:not(.is-off) {
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
}

/* kikapcsolva: halvány, szaggatott kontúr */
.status-pill.is-off {
  opacity: 0.35;
  box-shadow: none;
  border-color: #d1d5db;
  border-style: dashed;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  overflow: hidden;
}

#app-root {
  height: 100%;
  overflow-y: auto; /* ← innentől itt scrollol minden */
  -webkit-overflow-scrolling: touch;
}

.bm-login-overlay {
  position: fixed;
  inset: 0; /* top:0; right:0; bottom:0; left:0 */
  display: flex;
  align-items: center; /* vertikális közép */
  justify-content: center; /* horizontális közép */
  background: #f4faf8; /* a mostani világos háttér */
  z-index: 9999;
}

.bm-login-modal {
  background: #fff;
  border-radius: 24px;
  padding: 24px 28px;
  max-width: 420px;
  width: 100%;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

.bm-login-modal h2 {
  margin: 0 0 8px;
  font-size: 22px;
}
.bm-login-modal p {
  margin: 0 0 16px;
  color: #64748b;
}
.bm-label {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 500;
  color: #475569;
}
.bm-input {
  width: 100%;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  margin-bottom: 12px;
  font-size: 14px;
}
.bm-login-btn {
  width: 100%;
  padding: 10px 14px;
  border-radius: 999px;
  border: none;
  font-weight: 600;
  background: #0ea5e9;
  color: #fff;
  cursor: pointer;
}

.bm-login-error {
  margin-top: 4px;
  font-size: 12px;
  color: #dc2626; /* piros */
  min-height: 16px; /* legyen hely akkor is, ha üres */
}

.bm-text-button {
  width: 100%;
  margin-top: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: none;
  font-weight: 500;
  font-size: 14px;
  background: #e5e7eb; /* világosszürke háttér */
  color: #4b5563; /* sötétebb szürke szöveg */
  cursor: pointer;
}

.bm-text-button:hover {
  background: #d1d5db; /* picit sötétebb hover */
}

/* Lucide icon stílus */
.nav-icon {
  width: 16px;
  height: 16px;
  margin-right: 6px;
  stroke-width: 2;
}

/* nav-btn layout frissítés, hogy jól álljon ikon+szöveg */
.nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Settings dropdown */
.nav-dropdown {
  position: relative;
}

.nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px 10px;
}

.nav-caret {
  font-size: 10px;
  margin-left: 2px;
}

.nav-dropdown-menu {
  position: absolute;
  top: 32px;
  left: 0;
  min-width: 180px;
  padding: 4px;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 10px 40px rgba(15, 23, 42, 0.16);
  display: none;
  z-index: 100;
}

.nav-dropdown.open .nav-dropdown-menu {
  display: block;
}

.nav-dropdown-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 8px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  color: #475569;
}

.nav-dropdown-item:hover {
  background: #f1f5f9;
}

/* Jobb oldali user menü */

.nav-user {
  display: flex;
  align-items: center;
  margin-left: 12px;
  position: relative;
}

.user-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 999px;
  border: none;
  background: #f1f5f9;
  cursor: pointer;
}

.user-avatar {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: #0ea5e9;
  color: white;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.user-name {
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
}

.user-role {
  font-size: 11px;
  color: #64748b;
}

.user-caret {
  font-size: 10px;
  color: #64748b;
}

.user-subline {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  color: #6b7280;
}

.user-dot {
  font-size: 0.7rem;
}

.user-points {
  font-weight: 500;
}

.user-dropdown {
  position: absolute;
  right: 0;
  top: 36px;
  min-width: 150px;
  padding: 4px;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 10px 40px rgba(15, 23, 42, 0.16);
  display: none;
  z-index: 100;
}

.user-dropdown.open {
  display: block;
}

.user-dropdown-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 8px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  color: #475569;
}

.user-dropdown-item:hover {
  background: #f1f5f9;
}

/* Ha mobilon a nav-links hamburgerrel lenyíló, a dropdown menü is ott jelenik meg */
@media (max-width: 768px) {
  .nav-dropdown-menu {
    position: static;
    box-shadow: none;
    margin-top: 4px;
  }
}

.dash-goal {
  margin-bottom: 24px;
  padding: 16px 20px;
  border-radius: 16px;
  background: linear-gradient(90deg, #e0f2fe, #fef9c3);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.12);
}

.dash-goal-left {
  flex: 2;
}

.dash-goal-label {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: #0f172a;
  opacity: 0.8;
  margin-bottom: 4px;
}

.dash-goal-name {
  font-size: 20px;
  font-weight: 700;
  color: #0f172a;
}

.dash-goal-desc {
  font-size: 14px;
  color: #334155;
  margin-top: 4px;
}

.dash-goal-right {
  flex: 1.5;
  text-align: right;
}

.dash-goal-points {
  font-weight: 600;
  margin-bottom: 6px;
  color: #0f172a;
}

.dash-goal-bar-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}

.dash-goal-bar {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.12);
  overflow: hidden;
}

.dash-goal-bar-fill {
  height: 100%;
  background: #0ea5e9;
  border-radius: inherit;
  width: 0%;
  transition: width 0.3s ease;
}

.dash-goal-percent {
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
}

/* mobilon alá-fölé rendezés */
@media (max-width: 768px) {
  .dash-goal {
    flex-direction: column;
    align-items: flex-start;
  }
  .dash-goal-right {
    width: 100%;
    text-align: left;
  }
  .dash-goal-bar-wrap {
    justify-content: flex-start;
  }
}

.dash-goal-cta {
  margin-top: 10px;
  padding: 6px 14px;
  border-radius: 999px;
  border: none;
  background: #0ea5e9;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(14, 165, 233, 0.4);
  display: block !important;
  align-items: center;
  gap: 6px;
}

.dash-goal-cta:hover {
  background: #0284c7;
}

.dash-goal-cta:active {
  transform: translateY(1px);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.3);
}

/* DASHBOARD LAYOUT */
.dash-page {
  max-width: 1120px;
  margin: 24px auto 40px;
  padding: 0 24px 32px;
}

.dash-card {
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
  padding: 20px 24px;
  margin-bottom: 20px;
}

/* CURRENT GOAL */
.dash-goal {
  display: flex;
  gap: 32px;
  align-items: center;
  background: linear-gradient(90deg, #e0f2fe 0%, #fef9c3 100%);
}

.dash-goal-left {
  flex: 1 1 55%;
}

.dash-label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: #64748b;
  margin-bottom: 4px;
}

.dash-goal-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #0f172a;
}

.dash-goal-sub {
  margin: 4px 0 12px;
  font-size: 13px;
  color: #475569;
}

.btn-link {
  border: none;
  background: transparent;
  padding: 0;
  font-size: 13px;
  font-weight: 600;
  color: #0284c7;
  cursor: pointer;
}

.btn-link:hover {
  text-decoration: underline;
}

.dash-goal-right {
  flex: 1 1 45%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.dash-goal-points {
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
}

.dash-goal-bar-wrap {
  width: 100%;
  max-width: 320px;
}

.dash-goal-bar-bg {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.3);
  overflow: hidden;
}

.dash-goal-bar-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #22c55e, #84cc16);
  transition: width 0.35s ease;
}

.dash-goal-bar-percent {
  font-size: 11px;
  color: #64748b;
  margin-top: 3px;
  text-align: right;
}

/* TODAY'S TASKS */
.dash-today {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dash-today-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}

.dash-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
}

.dash-today-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.chip {
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  padding: 4px 10px;
  font-size: 12px;
  background: #ffffff;
  color: #64748b;
  cursor: pointer;
}

.chip-active {
  border-color: #0ea5e9;
  background: #e0f2fe;
  color: #0369a1;
}

.dash-today-legend {
  font-size: 11px;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 4px;
}

.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  display: inline-block;
}

.legend-waiting {
  background: #fbbf24;
}
.legend-approve {
  background: #3b82f6;
}
.legend-done {
  background: #22c55e;
}

.legend-sep {
  opacity: 0.6;
}

.dash-today-list {
  margin-top: 4px;
}

/* Task rows – most csak design, adat később jön */
.dash-task-row {
  display: flex;
  align-items: center;
  padding: 10px 6px;
  gap: 10px;
  border-bottom: 1px solid #f1f5f9;
}

.dash-task-row:last-child {
  border-bottom: none;
}

.dash-task-member-dot {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: #0f172a;
}

.dash-task-main {
  flex: 1;
  min-width: 0;
}

.dash-task-name {
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash-task-meta {
  font-size: 11px;
  color: #64748b;
}

.dash-task-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dash-task-points {
  font-size: 12px;
  font-weight: 600;
  color: #16a34a;
}

.dash-status-pill {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #e2e8f0;
  color: #0f172a;
}

.dash-status-waiting {
  background: #fef3c7;
  color: #b45309;
}
.dash-status-approve {
  background: #dbeafe;
  color: #1d4ed8;
}
.dash-status-finished {
  background: #dcfce7;
  color: #15803d;
}

/* Empty state */
.dash-empty {
  padding: 16px 4px 10px;
  font-size: 13px;
  color: #64748b;
}

.dash-empty-sub {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  color: #94a3b8;
}

/* responsive */
@media (max-width: 768px) {
  .dash-goal {
    flex-direction: column;
    align-items: flex-start;
  }
  .dash-goal-right {
    align-items: stretch;
  }
}

/* WEEKLY SUMMARY */
.dash-week-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 18px;
}

.dash-stat-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 16px 18px;
  border-radius: 18px;
}

.dash-stat-label {
  font-size: 13px;
  font-weight: 500;
  color: #667085;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.dash-stat-value {
  font-size: 24px;
  font-weight: 700;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 4px;
}

.dash-stat-star {
  font-size: 18px;
}

/* week progress row */
.dash-week-progress {
  border-radius: 18px;
  background: #ffffff;
}

.dash-week-progress-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}

.dash-week-progress-label {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748b;
}

.dash-week-progress-meta {
  font-size: 13px;
  color: #0f172a;
  font-weight: 500;
}

/* responsive – 2 oszlop tableten, 1 oszlop mobilon */
@media (max-width: 1024px) {
  .dash-week-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .dash-week-grid {
    grid-template-columns: 1fr;
  }
}

/* Kártya alap */
.dash-task {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
  margin-bottom: 12px;
}

.dash-task-main {
  flex: 1 1 auto;
  min-width: 0;
}

.dash-task-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.dash-task-name {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #0f172a;
}

/* státusz */
.dash-task-status {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.dash-task-status-pending {
  background: #fee2e2;
  color: #b91c1c;
}

.dash-task-status-done {
  background: #dcfce7;
  color: #166534;
}

.dash-task-status-inprogress {
  background: #e0f2fe;
  color: #0369a1;
}

.dash-task-status-to-approve {
  background: #e0f2fe;
  color: #0369a1;
}

.dash-task-status-toapprove {
  background: #e0f2fe;
  color: #0369a1;
}

.dash-task-status-rejected {
  background: #fee2e2 !important;
  color: #b91c1c !important;
}

/* OWNER pill */
.dash-task-owner-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  margin-bottom: 8px;
}

.dash-task-owner-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
}

/* variációk */
.dash-task-owner-mine {
  background: #dcfce7;
  color: #166534;
}

.dash-task-owner-role {
  background: #fef3c7;
  color: #92400e;
}

.dash-task-owner-anyone {
  background: #e5e7eb;
  color: #374151;
}

/* meta sor */
.dash-task-meta {
  font-size: 13px;
  color: #64748b;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dash-task-time {
  font-weight: 500;
}

.dash-task-location::before {
  content: "• ";
}

/* jobb oldal: pontok + gomb */
.dash-task-aside {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
}

.dash-task-stats {
  display: flex;
  gap: 10px;
  font-size: 12px;
  color: #475569;
}

.dash-task-points {
  font-weight: 600;
}

.dash-task-minutes {
  opacity: 0.9;
}

/* Mark as done gomb */
.dash-task-complete-btn,
.dash-card-link {
  border: none;
  outline: none;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  background: #0f172a;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.25);
  transition:
    transform 0.06s ease,
    box-shadow 0.06s ease,
    opacity 0.06s ease,
    background 0.06s ease;
}

.dash-task-complete-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.35);
  background: #020617;
}

.dash-task-complete-btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.3);
}

.dash-task-complete-btn:disabled {
  opacity: 0.6;
  cursor: default;
  box-shadow: none;
}

/* === TASK CARD === */
.dash-task {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
  margin-bottom: 14px;
}

.dash-task-main {
  flex: 1 1 auto;
  min-width: 0;
}

.dash-task-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.dash-task-name {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #0f172a;
}

/* === STATUS PILL (Waiting / To approve / Finished) === */
.dash-task-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.dash-task-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
}

/* színek – legyenek összhangban a legendával */
.dash-task-status-waiting {
  background: #fef3c7;
  color: #ca8a04; /* sárga */
}

.dash-task-status-toapprove {
  background: #dbeafe;
  color: #2563eb; /* kék */
}

.dash-task-status-finished {
  background: #dcfce7;
  color: #16a34a; /* zöld */
}

/* owner + meta */
.dash-task-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  color: #64748b;
  margin-bottom: 4px;
}

.dash-task-owner-inline {
  font-weight: 500;
}

.dash-task-location::before {
  content: "• ";
}

.dash-task-time-row {
  font-size: 13px;
  color: #64748b;
}

.dash-task-time {
  font-weight: 500;
}

/* right side (stats + button) */
.dash-task-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  flex-shrink: 0;
}

.dash-task-stats {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: #475569;
}

/* pont-pill – mint a havi nézet sárga kapszulája */
.dash-task-points-pill,
.recent-reward-points {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border-radius: 999px;
  background: #fef3c7;
  color: #92400e;
  font-size: 12px;
  font-weight: 600;
}

.dash-task-points-value {
  display: inline-block;
}

.dash-task-minutes {
  opacity: 0.9;
}

/* === Mark as done – kék gomb, mint az "Open reward store" === */
.dash-task-complete-btn {
  border: none;
  outline: none;
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  background: #0ea5e9; /* világosabb kék */
  color: #ffffff;
  box-shadow: 0 10px 25px rgba(14, 165, 233, 0.35);
  transition:
    transform 0.08s ease,
    box-shadow 0.08s ease,
    background 0.08s ease,
    opacity 0.08s ease;
}

.dash-task-complete-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  background: #0284c7; /* sötétebb kék */
  box-shadow: 0 12px 30px rgba(6, 95, 151, 0.45);
}

.dash-task-complete-btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 4px 14px rgba(6, 95, 151, 0.35);
}

.dash-task-complete-btn:disabled {
  opacity: 0.6;
  cursor: default;
  box-shadow: none;
}

.dash-task {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
  margin-bottom: 14px;
}

.dash-task-main {
  flex: 1 1 auto;
  min-width: 0;
}

.dash-task-name {
  margin: 0 0 6px 0;
  font-size: 15px;
  font-weight: 600;
  color: #0f172a;
}

/* státusz sor a cím alatt */
.dash-task-status-row {
  margin-bottom: 8px;
}

/* STATUS PILL */
.dash-task-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.dash-task-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
}

/* színek – Waiting (sárga), To approve (kék), Finished (zöld) */
.dash-task-status-waiting {
  background: #fef3c7;
  color: #ca8a04;
}
.dash-task-status-toapprove {
  background: #dbeafe;
  color: #2563eb;
}
.dash-task-status-finished {
  background: #dcfce7;
  color: #16a34a;
}

/* Idő + owner + hely egy sorban */
.dash-task-meta-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #64748b;
}

.dash-task-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.dash-task-meta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
}

.dash-task-meta-icon i {
  display: inline-block;
}

.dash-task-meta-dot {
  opacity: 0.6;
}

/* jobb oldal (stats + gomb) változatlanul maradhat, csak beteszem ide is, hogy egyben lásd */
.dash-task-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  flex-shrink: 0;
}

.dash-task-stats {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: #475569;
}

.dash-task-points-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border-radius: 999px;
  background: #fef3c7;
  color: #92400e;
  font-size: 12px;
  font-weight: 600;
}

.dash-task-minutes {
  opacity: 0.9;
}

/* Mark as done – reward gomb stílus */
.dash-task-complete-btn {
  border: none;
  outline: none;
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  background: #0ea5e9;
  color: #ffffff;
  box-shadow: 0 10px 25px rgba(14, 165, 233, 0.35);
  transition:
    transform 0.08s ease,
    box-shadow 0.08s ease,
    background 0.08s ease,
    opacity 0.08s ease;
}

.dash-task-complete-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  background: #0284c7;
  box-shadow: 0 12px 30px rgba(6, 95, 151, 0.45);
}

.dash-task-complete-btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 4px 14px rgba(6, 95, 151, 0.35);
}

.dash-task-complete-btn:disabled {
  opacity: 0.6;
  cursor: default;
  box-shadow: none;
}

/* ==== REWARD STORE ==== */

.rewardstore-card {
  padding: 20px;
}

.rewardstore-header {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 16px;
}

.rewardstore-balance {
  padding: 10px 14px;
  border-radius: 14px;
  background: #eff6ff;
  border: 1px solid #dbeafe;
  min-width: 170px;
  text-align: right;
}

.rewardstore-balance-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748b;
  margin-bottom: 3px;
}

.rewardstore-balance-value {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
}

/* filter sor */

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

.rs-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rs-category {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #64748b;
}

.rs-category select {
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  padding: 6px 10px;
  font-size: 13px;
  background: #ffffff;
}

/* grid */

.rewardstore-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr; /* Mobil */
  align-items: start;
}

/* Tablet / kisebb laptop (≥ 700px) */
@media (min-width: 700px) {
  .rewardstore-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Laptop / desktop (≥ 1024px) */
@media (min-width: 1024px) {
  .rewardstore-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Nagy monitor (≥ 1400px) → 4 oszlop */
@media (min-width: 1400px) {
  .rewardstore-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* reward kártya */

.reward-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
  overflow: hidden;
}

.reward-card-image {
  width: 100%;
  aspect-ratio: 1 / 1; /* ⬅️ négyzet! */
  border-radius: 12px;
  overflow: hidden;
  background: #f1f5f9; /* placeholder szín */
}

.reward-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* kitölti szépen */
}

.reward-card-main {
  margin-top: 4px;
}

.reward-card-title {
  margin: 0 0 4px 0;
  font-size: 15px;
  font-weight: 600;
  color: #0f172a;
}

.reward-card-cost {
  font-size: 13px;
  font-weight: 600;
  color: #92400e;
  background: #fef3c7;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
}

.reward-card-desc {
  margin: 6px 0 0 0;
  font-size: 13px;
  color: #64748b;
}

/* tagek */

.reward-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.reward-tag {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
}

.reward-tag-audience {
  background: #eef2ff;
  color: #4338ca;
}

.reward-tag-stock {
  background: #ecfdf3;
  color: #166534;
}

/* gombok */

.reward-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.reward-card-actions .btn {
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 999px;
}

.reward-card-actions .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.reward-card-actions .btn-primary[disabled] {
  opacity: 0.6;
  box-shadow: none;
  cursor: default;
}

/* Placeholder image block */
.reward-card-placeholder {
  width: 100%;
  height: 140px;
  background: #f1f5f9; /* szép világosszürke */
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8; /* halvány ikon */
  font-size: 32px; /* ikon méret */
}

.reward-tag-goal {
  background: #ecfdf3;
  color: #166534;
  font-weight: 600;
}

.btn-goal-active {
  background: #e0f2fe;
  color: #0369a1;
  font-weight: 600;
}

.approval-card {
  display: flex;
  background: #fff;
  border-radius: 20px;
  padding: 20px;
  margin-bottom: 24px;
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.06);
}

/* NÉGYZETES KÉP */
.approval-left {
  width: 150px;
  height: 150px;
  flex-shrink: 0;
}

.approval-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
}

/* Tartalom */
.approval-content {
  flex: 1;
  display: flex;
  justify-content: space-between;
  padding-left: 20px;
}

/* Bal oldali szövegblokk */
.approval-title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 6px;
}

.approval-meta {
  font-size: 15px;
  color: #555;
}

/* Jobb oldal */
.approval-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  min-width: 140px;
}

.approval-points {
  font-size: 18px;
  font-weight: 600;
  color: #f4b400;
  margin-bottom: 10px;
}

/* Gombok */
.approval-actions {
  display: flex;
  gap: 10px;
}

.btn-approve,
.btn-reject {
  padding: 8px 17px;
  font-size: 14px;
  border-radius: 20px;
  border: none;
  cursor: pointer;
}

.btn-approve {
  background: #29b6f6;
  color: white;
}

.btn-reject {
  background: #eee;
  color: #555;
}

/******   DASHBOARD RECENT REWARDS    ***********/
.dash-recent-rewards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dash-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.dash-card-title {
  font-size: 14px;
  font-weight: 600;
}

.dash-card-link {
  border: none;
  background: none;
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}

.dash-card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dash-card-empty {
  font-size: 12px;
  color: #888;
}

/* sorok */

.recent-reward-row {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  background: #fafafa;
}

.rr-image {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
}

.rr-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rr-placeholder {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  background: #f0f0f0;
}

.rr-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rr-title {
  font-size: 13px;
  font-weight: 600;
}

.rr-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 11px;
  color: #666;
}

.rr-points {
  font-weight: 500;
}

.rr-date {
  opacity: 0.8;
}

/* státusz badge */

.rr-status {
  margin-left: 4px;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid transparent;
}

.status-badge .status-icon {
  font-size: 12px;
}

.status-badge.approved {
  background: #e6f6ea;
  border-color: #b4e1c0;
  color: #208b3a;
}

.status-badge.rejected {
  background: #fde8e8;
  border-color: #f8b4b4;
  color: #c81e1e;
}

.status-badge.pending {
  background: #eef2ff;
  border-color: #c7d2fe;
  color: #3730a3;
}

/*************************************
 * RECENT REWARDS – full card styling
 *************************************/

.recent-rewards-sections {
  margin-top: 24px;
}

.dash-recent-rewards,
.dash-section {
  background: #ffffff;
  border-radius: 18px;
  padding: 20px;
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.03),
    0 12px 30px rgba(15, 23, 42, 0.04);
}

.dash-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.dash-card-title {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
}

.dash-card-link {
  font-size: 13px;
  background: none;
  border: none;
  color: #0ea5e9;
  cursor: pointer;
  padding: 0;
}

.dash-card-link:hover {
  text-decoration: underline;
}

.dash-card-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dash-card-empty {
  font-size: 13px;
  color: #9ca3af;
}

/* ===== GENERIC CARD LOADER ===== */

.card-loader {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  font-size: 13px;
  color: #6b7280; /* szürkés szöveg */
}

.card-loader-spinner {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 2px solid #e5e7eb;
  border-top-color: #0ea5e9; /* famify kék */
  animation: card-loader-spin 0.7s linear infinite;
}

@keyframes card-loader-spin {
  to {
    transform: rotate(360deg);
  }
}

/*************************************
 * REWARD ROW (task-card style)
 *************************************/

.recent-reward-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.recent-reward-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

/* image */
.recent-reward-img {
  width: 50px;
  height: 50px;
  border-radius: 5px;
  overflow: hidden;
  flex-shrink: 0;
}

.recent-reward-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.recent-reward-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.recent-reward-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.recent-reward-icon {
  font-size: 16px;
}

.recent-reward-title {
  font-size: 15px;
  font-weight: 600;
  color: #0f172a;
}

.recent-reward-meta {
  display: flex;
  gap: 12px;
  font-size: 13px;
  color: #6b7280;
}

.recent-reward-points {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #f59e0b;
  font-weight: 500;
}

.recent-reward-points .star {
  font-size: 14px;
}

.recent-reward-date {
  color: #9ca3af;
}

/*************************************
 * STATUS PILL – matches task badges
 *************************************/

.recent-reward-status {
  flex-shrink: 0;
}

.reward-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid transparent;
}

.reward-pill-approved {
  background: #e6f6ea;
  color: #208b3a;
}

.reward-pill-rejected {
  background: #fde8e8;
  color: #c81e1e;
}

.reward-pill-pending {
  background: #eef2ff;
  color: #3730a3;
}

/* Reward Store tabs */
.rewardstore-tabs {
  display: inline-flex;
  gap: 8px;
  border-radius: 999px;
  padding: 4px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  margin-bottom: 14px;
}

.rs-tab {
  border: none;
  background: transparent;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  cursor: pointer;
  color: #6b7280;
  font-weight: 500;
}

.rs-tab-active {
  background: #111827;
  color: #ffffff;
}

.rewardstore-pane {
  margin-top: 4px;
}

/***** PROFILE VIEW *****/
.profile-card {
  max-width: 720px;
  margin: 0 auto;
}

.profile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.profile-main {
  display: flex;
  align-items: center;
  gap: 12px;
}

.profile-avatar {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #3b82f6;
  color: #fff;
  font-weight: 700;
}

.profile-name {
  font-size: 18px;
  font-weight: 700;
}

.profile-role {
  font-size: 13px;
  color: #6b7280;
}

.profile-points {
  text-align: right;
}

.profile-points-label {
  font-size: 12px;
  color: #6b7280;
}

.profile-points-value {
  font-size: 16px;
  font-weight: 600;
  color: #f59e0b;
}

.profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.profile-label {
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  margin-bottom: 4px;
}

.profile-value {
  font-size: 14px;
  color: #111827;
  word-break: break-word;
}

.profile-notes {
  grid-column: 1 / -1;
}

.profile-header-right {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.profile-actions {
  display: flex;
  gap: 8px;
}

.profile-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  object-fit: cover;
}

.profile-avatar-tools {
  margin-left: 64px;
  margin-bottom: 12px;
}

.link-button {
  border: none;
  background: none;
  padding: 0;
  font-size: 13px;
  color: #3b82f6;
  cursor: pointer;
}

.profile-input {
  width: 100%;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  padding: 6px 8px;
  font-size: 14px;
  background: #f9fafb;
}

.profile-input[disabled] {
  background: #f9fafb;
  color: #111827;
  border-color: transparent;
  padding-left: 0;
}

.profile-input-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.profile-input-sm {
  max-width: 90px;
}

.profile-input-suffix {
  font-size: 12px;
  color: #6b7280;
}

.profile-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 24px;
}

/* === SHOPPING LIST VIEW === */

.shopping-layout {
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) minmax(0, 1.4fr);
  gap: 16px;
}

@media (max-width: 900px) {
  .shopping-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

.shopping-main-header,
.shopping-history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.shopping-add-row {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.shopping-add-row input {
  flex: 1 1 120px;
  min-width: 0;
}

.shopping-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 320px;
  overflow-y: auto;
  margin-bottom: 12px;
}

.shopping-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #f8fafc;
}

.shopping-item-left {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex: 1;
}

.shopping-item-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.shopping-item-name {
  font-weight: 600;
}

.shopping-item-meta {
  font-size: 12px;
  color: #6b7280;
}

.shopping-item-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.shopping-item-delete {
  border: 0;
  background: transparent;
  font-size: 14px;
  cursor: pointer;
  padding: 4px;
}

.shopping-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid #e5e7eb;
  padding-top: 10px;
  margin-top: 6px;
}

.shopping-footer-left {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.shopping-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.shopping-label {
  font-size: 12px;
  color: #6b7280;
}

.shopping-footer-right {
  display: flex;
  justify-content: flex-end;
  padding-top: 10px;
}

.shopping-history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 320px;
  overflow-y: auto;
  padding-top: 4px;
}

.shopping-history-item {
  padding: 8px 10px;
  border-radius: 10px;
  background: #f9fafb;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.shopping-history-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.shopping-history-title {
  font-weight: 600;
}

.shopping-history-meta {
  font-size: 12px;
  color: #6b7280;
}

.shopping-history-total {
  font-weight: 600;
}

.user-avatar {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* név input + autocomplete */
.shopping-name-wrapper {
  position: relative;
  flex: 1 1 160px;
  min-width: 0;
}

.shopping-add-row input {
  flex: 1 1 120px;
  min-width: 0;
}

/* javaslat lista */
.shopping-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
  margin-top: 4px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.12);
  max-height: 220px;
  overflow-y: auto;
  font-size: 14px;
  display: none;
}

.shopping-suggestion-item {
  padding: 6px 10px;
  cursor: pointer;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.shopping-suggestion-item:hover {
  background: #f3f4f6;
}

.shopping-trip-modal.hidden {
  display: none;
}
.shopping-trip-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
}

.stm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
}

.stm-dialog {
  position: relative;
  max-width: 480px;
  margin: 60px auto;
  background: #fff;
  border-radius: 24px;
  padding: 24px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.25);
  animation: fadeInUp 0.18s ease-out;
}

.stm-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stm-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
}

.stm-meta {
  margin-top: 6px;
  font-size: 14px;
  color: #6b7280;
}

.stm-items {
  margin-top: 18px;
}

.stm-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #f1f5f9;
}

.stm-item:last-child {
  border-bottom: none;
}

.stm-item-name {
  font-weight: 500;
}

.stm-item-qty {
  font-size: 13px;
  color: #6b7280;
}

.stm-add-wrapper {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #edf2f7;
}

.stm-add-title {
  font-size: 13px;
  font-weight: 500;
  color: #4a5568;
  margin-bottom: 8px;
}

.stm-add-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.stm-input {
  flex: 1;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  font-size: 14px;
}

.stm-input-qty {
  max-width: 110px;
}

.stm-add-btn {
  padding: 8px 14px;
  border-radius: 999px;
  border: none;
  background: #111827;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}

.stm-add-btn:hover {
  opacity: 0.9;
}

.stm-add-error {
  margin-top: 6px;
  font-size: 12px;
  color: #e53e3e;
}

.stm-item-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.stm-item-delete {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  padding: 2px 4px;
  color: #9ca3af;
}

.stm-item-delete:hover {
  color: #ef4444;
}

.dash-task-complete-btn[data-confirm="ready"] {
  box-shadow: 0 10px 25px rgba(56, 189, 248, 0.55);
  transform: translateY(0); /* kicsit "kiemeljük" */
}

/* Filter gombokban lévő cím + darabszám */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.chip-label {
  white-space: nowrap;
}

/* kis darabszám badge a filterekben */
.chip-count {
  min-width: 18px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.6;
  text-align: center;
  background: #e5e7eb;
  color: #4b5563;
}
.chip-active .chip-count {
  background: #0ea5e9;
  color: #fff;
}

#as_member.is-readonly,
#as_points.is-readonly {
  opacity: 0.6;
  cursor: not-allowed;
}

.bm-card-inner {
  position: relative;
  height: 100%;
}

.bm-resize-handle {
  position: absolute;
  left: 4px;
  right: 4px;
  height: 6px;
  cursor: ns-resize;
  opacity: 0.6;
}

.bm-resize-top {
  top: 0;
}

.bm-resize-bottom {
  bottom: 0;
}

.dg-head {
  align-items: center;
}

.dg-member {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px 0;
  font-weight: 600;
}

.dg-avatar {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  background: #f1f5f9;
  border: 2px solid #e2e8f0;
  background-size: cover;
  background-position: center;
}

.dg-avatar-img {
  color: transparent; /* kép esetén ne látszódjon betű */
}

.dg-member-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 0;
  font-weight: 600;
}

.dg-member-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}

.dg-member-initial {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
}

.dg-member-initial.color-0 {
  background: #fee2e2;
  color: #991b1b;
}
.dg-member-initial.color-1 {
  background: #ffedd5;
  color: #9a3412;
}
.dg-member-initial.color-2 {
  background: #fef9c3;
  color: #854d0e;
}
.dg-member-initial.color-3 {
  background: #dcfce7;
  color: #166534;
}
.dg-member-initial.color-4 {
  background: #e0f2fe;
  color: #075985;
}
.dg-member-initial.color-5 {
  background: #f3e8ff;
  color: #6b21a8;
}

/* --- SHOPPING LIST WRAPPER --- */

#shopList.shopping-list {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* --- EGY TÉTEL KÁRTYÁJA --- */

.shopping-item {
  display: flex;
  align-items: stretch;
  padding: 10px 14px;
  background: #f7f9fc;
  border-radius: 12px;
  border: 1px solid transparent;
  transition:
    transform 0.08s ease,
    border-color 0.15s ease,
    background-color 0.15s ease;
}

/* kis szünet a kártyák között, ha a gap-et nem használnád */
.shopping-item + .shopping-item {
  margin-top: 6px;
}

.shopping-item:hover {
  background: #f4f7fd;
  transform: translateY(-1px);
}

/* --- BAL OLDAL (checkbox + szöveg) --- */

.shopping-item-left {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex: 1;
  min-width: 0; /* hosszú itemnév se tolja szét a layou-t */
}

/* checkbox + label */
.shopping-item-left label {
  display: flex;
  align-items: center;
  margin: 0;
}

/* ha input van a labelen belül */
.shopping-item-left input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

/* --- NÉV + MENNYISÉG BLOKK --- */

.shopping-item-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* első sor: terméknév */
.shopping-item-main > :first-child {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* második sor: mennyiség (pl. 12 L) */
.shopping-item-main > :nth-child(2) {
  font-size: 12px;
  color: #6b7280;
}

/* --- JOBB OLDAL (X gomb) --- */

.shopping-item-actions {
  display: flex;
  align-items: center;
  margin-left: 12px;
}

/* feltételezve, hogy egy button vagy span az X */

.shopping-item-actions button,
.shopping-item-actions .remove-item {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 4px;
  color: #9ca3af;
  border-radius: 999px;
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    transform 0.08s ease;
}

.shopping-item-actions button:hover,
.shopping-item-actions .remove-item:hover {
  background-color: rgba(239, 68, 68, 0.08);
  color: #ef4444;
  transform: scale(1.05);
}

/* --- (OPTIONAL) KÉSZ TÉTEL STÍLUS --- */
/* ha majd raksz rá pl. .completed class-t JS-ből */

.shopping-item.completed .shopping-item-main > :first-child {
  text-decoration: line-through;
  color: #9ca3af;
}

.shopping-item.completed .shopping-item-main > :nth-child(2) {
  color: #d1d5db;
}

.shopping-item.completed {
  background: #f3f4f6;
}

/* ===========================
   SHOPPING – RECENT TRIPS
   =========================== */

.shopping-history {
  display: flex;
  flex-direction: column;
}

.shopping-history-list {
  margin-top: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* egy sor a listában – teljes szélességű gombként viselkedik */
.trip-row {
  width: 100%;
  border: none;
  padding: 10px 14px;
  border-radius: 12px;
  background: #f8fafc;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  text-align: left;
  transition:
    background-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.08s ease;
}

.trip-row:hover {
  background: #eef4ff;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
  transform: translateY(-1px);
}

/* bal oldal: ikon + szöveg */
.trip-row-left {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.trip-icon {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #e0f2fe;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.trip-icon .lucide-icon {
  width: 16px;
  height: 16px;
}

/* szöveges rész */
.trip-row-text {
  flex: 1;
  min-width: 0;
}

.trip-row-main {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
}

.trip-store {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.trip-total {
  white-space: nowrap;
  color: #0f172a;
}

/* dátum + items */
.trip-row-sub {
  margin-top: 2px;
  font-size: 12px;
  color: #64748b;
}

/* jobb oldali kis chevron */
.trip-row-chevron {
  flex-shrink: 0;
  color: #cbd5f5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.trip-row:hover .trip-row-chevron {
  color: #94a3b8;
}

/* dropdown wrapper – alapból rejtve, csak mobilon kell */
.ph-view-select-wrap {
  display: none;
}

/* maga a select, kapszula stílusban */
.ph-view-select {
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  background: #fff;
  color: #111827;
  height: auto;
}

/* mobilon egymás alá törik szépen */
@media (max-width: 860px) {
  .shopping-footer-right {
    padding-top: 0;
  }

  .planner-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
  }

  /* Bal: dátum + mobil dropdown   |   Közép: kapszula (desktop only) */
  .planner-header .ph-left {
    flex: 1 1 100%;
  }

  .planner-header .ph-center {
    flex: 1 1 100%;
    justify-content: center;
  }

  /* Alul, külön sorban: Print / + New task / Generate week */
  .planner-header .ph-right {
    flex: 1 1 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* --- Shopping trip modal összegző sor --- */

.stm-summary {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #e5e7eb;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
  font-weight: 600;
  color: #111827;
}

.stm-summary-label {
  color: #6b7280;
  font-weight: 500;
}

.stm-summary-value {
  font-weight: 700;
}

/* --- Fejléc close gomb (kerek X) --- */

.stm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.stm-close {
  background: #f1f5f9;
  border: none;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #64748b;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    transform 0.08s ease;
}

.stm-close .lucide-icon {
  width: 16px;
  height: 16px;
}

.stm-close:hover {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  transform: translateY(-1px);
}

.stm-item-remove {
  background: #f1f5f9;
  border-radius: 999px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #9ca3af;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    transform 0.08s ease;
}

.stm-item-remove:hover {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  transform: scale(1.05);
}

.ph-filter-mobile button {
  padding: 1px 12px;
  border: 1px solid #e5e7eb;
  display: none;
  background: #fff;
}

.ph-filter-mobile button:hover {
  background: #f3f4f6;
}

.ph-filter-mobile button svg {
  width: 16px;
}

.ph-top-mobile {
  display: none;
}

#plannerWrap {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

#plannerWrap .fc {
  height: calc(100vh - 242px);
  border: none !important;
}

.modal-header {
  display: flex;
  align-items: center;
  gap: 8px; /* kis tér a cím és a pill között */
}

.modal-header h1 {
  margin: 0;
  flex-shrink: 0; /* ne törje le */
  font-size: 1.3em;
}

.modal-header #assignStatusPill {
  flex-shrink: 0; /* pill se törjön új sorba */
}

.modal-header #assignCloseBtn {
  margin-left: auto; /* X gomb jobbra tolva */
}

/* Alsó sor layout */
.shopping-footer {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

/* Store + Total spent mezők: rugalmasan kitöltik a helyet */
.shopping-footer-left {
  flex: 1;
  display: grid;
  grid-template-columns: 2fr 1fr; /* Store szélesebb, Total spent keskenyebb */
  gap: 12px;
}

/* Gomb konténer: jobbra igazítva */
.shopping-footer-right {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

/* Finish trip gomb – egységes dizájn */
#shopFinishBtn {
  background: #0ea5e9; /* vagy ami a primary kéketek */
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 10px 22px;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition:
    background 0.2s ease,
    transform 0.1s ease;
  white-space: nowrap;
  width: 100%;
}

#shopFinishBtn:hover {
  background: #0284c7; /* kicsit sötétebb kék hoverre */
  transform: translateY(-1px);
}

#shopFinishBtn:active {
  transform: translateY(0);
}

#shopFinishBtn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.dash-card.onboarding {
  background: #f4fbff;
  border: 1px solid rgba(0, 0, 0, 0.03);
}

.onb-header h2 {
  margin: 0 0 4px;
}

.onb-steps {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
}

.onb-step {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.04);
}

.onb-step-main {
  display: flex;
  gap: 12px;
  align-items: center;
}

.onb-step-num {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  background: white;
}

.onb-step-title {
  font-weight: 600;
}
.onb-step-desc {
  font-size: 13px;
  opacity: 0.8;
}

.onb-footer {
  margin-top: 8px;
  text-align: right;
}

.pill-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  border: none;
  background: #e5e7eb;
  color: #374151;
  font-size: 12px;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.pill-toggle .pill-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #9ca3af;
}

.pill-toggle.on {
  background: #dcfce7;
  color: #166534;
}
.pill-toggle.on .pill-dot {
  background: #16a34a;
}

.icon-btn {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: none;
  background: #e5e7eb;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-left: 4px;
  transition:
    background 0.15s ease,
    transform 0.1s ease;
}
.icon-btn i {
  width: 16px;
  height: 16px;
}
.icon-btn:hover {
  background: #d1d5db;
  transform: translateY(-1px);
}

.icon-btn-danger {
  background: #fee2e2;
}
.icon-btn-danger:hover {
  background: #fecaca;
}

/* === Planner event-loading progress bar === */

#plannerEventsBar {
  width: 100%;
  height: 3px;
  background: #e2e8f0; /* light gray */
  overflow: hidden;
  border-radius: 3px;
  margin: 4px 12px 6px;
  display: none; /* JS kapcsolja */
}

#plannerEventsBar .bar-fill {
  width: 40%;
  height: 100%;
  background: #0ea5e9; /* famify blue */
  animation: plannerBarSlide 1.3s infinite linear;
  border-radius: 3px;
}

@keyframes plannerBarSlide {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(250%);
  }
}

/* ============================
   MOBILE 
   ============================ */
/* Desktop: marad normál táblázat, semmi extra */

/* Mobil kártya nézet */
@media (max-width: 768px) {
  .table-wrap {
    overflow: visible; /* ne legyen vízszintes scroll */
  }

  .members-table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
  }

  .members-table thead {
    display: none;
  }

  .members-table tbody tr {
    display: block;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
    padding: 10px 12px;
    margin-bottom: 10px;
  }

  .members-table tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: 13px;
  }

  .members-table tbody td::before {
    content: attr(data-label);
    font-size: 11px;
    color: #6b7280;
    margin-right: 10px;
    flex: 0 0 auto;
  }

  .member-email-cell {
    max-width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .actions {
    justify-content: flex-end;
    gap: 6px;
  }
}

@media (max-width: 820px) {
  .shopping-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .shopping-footer-left {
    grid-template-columns: 1fr; /* mezők egymás alatt */
  }

  .shopping-footer-right {
    justify-content: flex-start;
  }
  /* Planner day view*/

  /* END Planner day view*/

  .modal-card {
    max-height: calc(100vh - 150px);
  }

  .modal-card h1 {
    font-size: 1.2em;
  }
  /* a kártya kisebb paddinggel, hogy több hely jusson a naptárnak */
  #view-planner .card {
    padding: 8px 6px;
  }

  /* a külső wrapper legyen vízszintesen scrollozható */
  #plannerWrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* maga a FullCalendar legyen szélesebb, mint a kijelző */
  #plannerWrap .fc {
    min-width: 950px; /* ha sok, 900–1000 között finomhangolhatod */
    overflow: visible !important; /* ne vágja le a túllógó részt */
    height: calc(100vh - 240px);
  }

  /* kozmetika: header + idő oszlop mobilon kompaktabb */
  #plannerWrap .fc-col-header-cell-cushion {
    font-size: 11px !important;
    white-space: nowrap !important;
    padding: 2px 0 !important;
  }

  #plannerWrap .fc-timegrid-slot-label {
    font-size: 10px !important;
    width: 35px !important;
  }

  #plannerWrap .fc-timegrid-event {
    margin-left: 2px !important;
    margin-right: 2px !important;
  }

  /* a planner kártya kicsit kisebb paddinggel */
  #view-planner .card {
    padding: 8px 6px;
  }

  .planner-header .ph-center {
    display: none; /* kapszula elrejtése */
  }

  .ph-view-select-wrap {
    display: block; /* dropdown mutatása */
  }

  .ph-date-wrap {
    justify-content: space-between;
    width: 100%;
  }

  .trip-row {
    padding: 12px 14px;
  }

  .trip-row-main {
    font-size: 13px;
  }

  .trip-row-sub {
    font-size: 11px;
  }

  /* --- Planner: status + member filter mobilon egymás alatt --- */
  #view-planner .planner-bottom {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-left: 0;
    margin-right: 0;
  }

  #view-planner .status-filter {
    width: 100%;
    justify-content: center;
  }

  #view-planner .planner-bottom-right {
    width: 100%;
    flex-direction: column; /* alatta legyen a member filter + reset */
    align-items: center;
    gap: 8px;
    justify-content: center;
  }

  #view-planner .member-filter {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .recent-reward-card {
    flex-direction: row;
    align-items: center;
  }

  .recent-reward-status {
    margin-left: auto;
    align-self: center;
  }

  .recent-reward-title {
    white-space: nowrap; /* itt jöhet vissza az egy sor + ellipsis, ha akarod */
    text-overflow: ellipsis;
    overflow: hidden;
  }

  span.status-text {
    display: none;
  }
}

/* ============================
   BOTTOM NAV (MOBILE ONLY)
   ============================ */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;

  display: none; /* desktopon rejtve */

  padding: 6px 14px calc(10px + env(safe-area-inset-bottom));
  background: #ffffff;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -10px 30px rgba(15, 23, 42, 0.16);

  z-index: 999;
  justify-content: space-between;
}

.bottom-nav-btn {
  flex: 1;
  background: none;
  border: none;
  padding: 6px 4px;
  cursor: pointer;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;

  color: #64748b;
  font-size: 11px;
  font-weight: 600;
}

.bottom-nav-btn .bottom-nav-icon {
  width: 22px;
  height: 22px;
}

/* Active állapot */
.bottom-nav-btn.active {
  color: var(--brand, #00aef3);
}

.bottom-nav-btn.active .bottom-nav-icon {
  color: var(--brand, #00aef3);
}

/* Mobilon jelenjen meg */
@media (max-width: 820px) {
  .bottom-nav {
    display: flex;
  }
}

/* ======================================
   PERFECT MOBILE NAV (your new structure)
   ====================================== */
@media (max-width: 820px) {
  /* 3 oszlopos grid */
  .nav-inner {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center;
    width: 100%;
    padding: 12px 14px;
  }

  /* Hamburgert hagyjuk bal oldalon */
  #hamb.hamb {
    justify-self: start;
  }

  /* Brand középre */
  .brand {
    justify-self: center;
  }

  /* Profil jobb oldalra */
  .nav-profile,
  .profile-block,
  .nav-right {
    justify-self: end;
  }

  /* Menü alapból rejtve */
  #navLinks {
    display: none !important;
    width: 100%;
    grid-column: 1 / 4;
    padding-top: 10px;
  }

  /* Menü nyitva */
  #navLinks.open {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px;
  }

  /* Menü gombok mobil stílusa */
  #navLinks .nav-btn {
    width: 100%;
    background: #f8fafc;
    border-radius: 12px;
    padding: 14px 18px;
    font-size: 16px;
    text-align: left;
  }

  #navLinks .nav-btn.active {
    background: #0ea5e9 !important;
    color: #fff !important;
  }

  /* Settings dropdown mobilon */
  .nav-dropdown-menu {
    position: relative !important;
    transform: none !important;
    inset: unset !important;
    width: 100% !important;
    background: #f0f4f8 !important;
    border-radius: 12px !important;
    padding: 6px 0 !important;
    box-shadow: none !important;
  }

  .nav-dropdown-item {
    padding: 12px 18px !important;
  }

  /* Profil eltűnik, ha a menü nyitva van */
  #navLinks.open ~ .nav-profile,
  #navLinks.open ~ .profile-block,
  #navLinks.open ~ .nav-right {
    display: none !important;
  }

  /* Brand középen marad menü nyitva esetén is */
  #navLinks.open ~ .brand {
    justify-self: center !important;
  }

  /* Settings sor ugyanolyan stílusú legyen, mint a többi nav-btn */
  .nav-btn.nav-settings {
    background: #f8fafc !important;
    padding: 14px 18px !important;
    border-radius: 12px !important;
    font-size: 16px !important;
    font-weight: 600;
    color: #334155;
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 12px;
  }

  /* Dropdown menü teljes szélességben, a Settings ALATT */
  .nav-dropdown-menu {
    position: relative !important;
    inset: unset !important;
    transform: none !important;
    width: 100% !important;
    margin: 6px 0 0 0 !important;
    background: #f8fafc !important;
    border-radius: 12px !important;
    padding: 6px 0 !important;
    box-shadow: none !important;
  }

  /* Egy sor – egy menüpont */
  .nav-dropdown-item {
    padding: 14px 18px !important;
    font-size: 16px !important;
    display: flex !important;
    gap: 12px !important;
    align-items: center;
  }

  /* NAV – három oszlopos grid */
  .nav-inner {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center;
    padding: 12px 14px;
    width: 100%;
  }

  /* Bal: hamburger */
  #hamb.hamb {
    grid-column: 1;
    justify-self: start;
  }

  /* Közép: brand */
  .brand {
    grid-column: 2;
    justify-self: center;
    text-align: center;
    width: 100%;
    padding-left: 40px;
  }

  /* Jobb: profil */
  .nav-user,
  .nav-profile,
  .nav-right {
    grid-column: 3;
    justify-self: end;
  }

  /* ---- NAVLINKS NEM A GRIDBEN VAN ---- */
  #navLinks {
    grid-column: 1 / -1 !important; /* teljes szélesség */
    margin-top: 10px;
    width: 100%;
    display: none !important;
    flex-direction: column;
    gap: 8px;
  }

  /* nyitva */
  #navLinks.open {
    display: flex !important;
  }

  /* menüpontok */
  #navLinks .nav-btn {
    width: 100%;
    background: #f8fafc;
    border-radius: 12px;
    padding: 14px 18px;
    font-size: 16px;
    text-align: left;
  }

  #navLinks .nav-btn.active {
    background: #0ea5e9 !important;
    color: #fff !important;
  }

  /* Settings dropdown ugyanúgy nézzen ki */
  .nav-dropdown-menu {
    position: relative !important;
    transform: none !important;
    width: 100% !important;
    background: #f0f4f8 !important;
    border-radius: 12px !important;
    padding: 6px 0 !important;
    box-shadow: none !important;
  }

  .nav-dropdown-item {
    padding: 14px 18px !important;
    font-size: 16px !important;
  }

  /* Profil eltűnik, ha menü nyitva */
  #navLinks.open ~ .nav-user {
    display: none !important;
  }

  /* 1) A teljes SETTINGS konténer is legyen "kártya" */
  .nav-dropdown.nav-btn {
    width: 100% !important;
    background: #f8fafc !important;
    border-radius: 12px !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* 2) A SETTINGS FŐGOMB (nav-dropdown-toggle) legyen nagy, tappolható */
  .nav-dropdown-toggle.nav-settings {
    width: 100%;
    padding: 14px 18px !important;
    font-size: 16px !important;
    text-align: left;
    display: flex;
    align-items: center;
    font-weight: 600;
    color: #334155;
    gap: 2px;
    border-radius: 12px;
  }

  /* 3) A DROPDOWN MENÜ TELJES SZÉLESSÉGŰ ALATTA */
  .nav-dropdown-menu {
    position: relative !important;
    inset: unset !important;
    transform: none !important;

    margin-top: 6px !important;
    padding: 10px 0 !important;
    width: 100% !important;

    background: #f0f4f8 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
  }

  /* 4) Dropdown tételek = megegyeznek a nav-btn-ekkel */
  .nav-dropdown-item {
    padding: 14px 18px !important;
    font-size: 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
  }

  /* 5) Nincs beljebb csúszás, teljes szélesség */
  .nav-dropdown.open {
    width: 100% !important;
  }

  .nav-btn {
    display: block;
  }
}

/* -------------------------
   MOBILE – Dashboard Today section
   ------------------------- */
@media (max-width: 480px) {
  /* A teljes header menjen oszlopba */
  .dash-today-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  /* A cím blokk 100% széles legyen */
  .dash-today-header > div:first-child {
    width: 100%;
  }

  /* TODAY’S TASKS + Today cím alatt legyen a filter MINDIG */
  .dash-today-filters {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  /* Filter gombok sorban, görgethető sávként */
  .dash-filter-btn {
    white-space: nowrap;
  }

  /* Ne legyen túl nagy a margin-top a listán */
  .dash-today-list {
    margin-top: 10px;
  }

  /* vízszintes scroll, de scrollbar nélkül */
  .dash-today-filters-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch; /* smooth swipe mobilon */
    padding-bottom: 4px; /* ne vágjon bele az alja */
  }

  /* minden böngészőben rejtsük a csíkot */
  .dash-today-filters-scroll::-webkit-scrollbar {
    display: none;
  }
  .dash-today-filters-scroll {
    -ms-overflow-style: none; /* IE/Edge */
    scrollbar-width: none; /* Firefox */
  }

  /* a gombok egy sorban maradjanak */
  .dash-today-filters {
    display: inline-flex;
    gap: 8px;
    white-space: nowrap;
  }

  /* 2 oszlopos grid mobilon */
  .dash-week-grid {
    display: grid;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }

  /* stat kártyák kompaktabbak */
  .dash-stat-card {
    padding: 16px !important;
    border-radius: 16px !important;
  }

  .dash-stat-value {
    font-size: 20px !important;
  }

  /* hosszú címek ne tolódjanak le */
  .dash-stat-label {
    font-size: 11px !important;
    white-space: nowrap;
  }

  /* progress rész is rövidebb legyen */
  .dash-week-progress {
    margin-top: 16px;
  }

  .ph-filter-mobile button {
    display: block;
  }
}

/* ===== Planner filters panel – mobil overlay ===== */
@media (max-width: 820px) {
  /* a teljes planner view legyen position: relative, hogy ehhez képest tudjunk pozicionálni */
  #view-planner {
    position: relative;
  }

  /* alapértelmezés: a filter panel (planner-bottom) elrejtve mobilon */
  #view-planner .planner-topbar {
    display: none;
  }

  /* amikor a view-planner kap egy .filters-open classt, nyíljon le kártyaként a filter alatt */
  #view-planner.filters-open .planner-topbar {
    display: flex;
    flex-direction: column;
    gap: 10px;

    position: absolute;
    left: 12px;
    right: 12px;
    top: 80px; /* ha nem pont jó, ezzel tudsz játszani: 70–100px között finomhangold */

    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 18px 35px rgba(15, 23, 42, 0.18);
    padding: 12px 14px 16px;
    z-index: 30;
  }

  /* hogy a kártya tartalma szépen törjön */
  #view-planner.filters-open .planner-bottom .status-filter,
  #view-planner.filters-open .planner-bottom-right {
    flex-wrap: wrap;
    justify-content: center;
  }

  /* Filter gomb "bekapcsolt" állapota */
  .ph-filters-btn.is-on {
    background: #0ea5e9;
    color: #fff;
  }

  .ph-filters-btn.is-on svg {
    stroke: #fff;
  }

  .ph-top-mobile {
    display: block;
    text-align: right;
    margin-bottom: 10px;
    padding-right: 5px;
  }

  .ph-right {
    display: none;
  }

  #view-planner .card {
    display: flex;
    flex-direction: column;
  }

  .container.planner-nopad {
    padding-left: 0;
    padding-right: 0;
  }
}

:root {
  --day-member-min-w: 130px; /* desktop default */
}

@media (max-width: 820px) {
  :root {
    --day-member-min-w: 200px; /* mobilon min. 200px / member */
  }

  #bmDayView .day-grid {
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    height: calc(100vh - 250px);
  }

  .assign-time .assign-inline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* --- Approvals: mobil layout --- */
  .approval-card {
    flex-direction: column;
    padding: 14px;
  }

  .approval-left {
    width: 100%;
    height: 180px;
    margin-bottom: 10px;
  }

  .approval-content {
    flex-direction: column;
    padding-left: 0;
    gap: 10px;
  }

  .approval-right {
    align-items: flex-start;
  }

  .approval-actions {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
  }

  .btn-approve,
  .btn-reject {
    flex: 0 0 auto;
  }
}

.approval-card + .approval-card {
  margin-top: 16px;
}

/* REWARDS admin – desktop vs mobile */
.rewards-admin-desktop {
  display: block;
}

.rewards-admin-mobile {
  display: none;
}

/* kis thumbnail a táblában is (hogy ne legyen inline style) */
.reward-thumb {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
  margin-right: 8px;
  vertical-align: middle;
}

/* MOBIL nézet – kártyák */
/* --- Rewards mobil kártya nézet --- */
@media (max-width: 820px) {
  /* csak a Rewards view-ra vonatkozzon */
  #view-rewards-setup .table-wrap {
    overflow: visible;
  }

  #view-rewards-setup table {
    border-collapse: separate;
    border-spacing: 0;
  }

  #view-rewards-setup thead {
    display: none; /* fejlécet eltüntetjük */
  }

  #view-rewards-setup tbody tr {
    display: block;
    margin-bottom: 12px;
    padding: 10px 14px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(15, 35, 52, 0.08);
  }

  #view-rewards-setup tbody td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0;
    border-bottom: none;
    font-size: 13px;
  }

  /* első sor: kép + név egyben, erősebb cím */
  #view-rewards-setup tbody td:first-child {
    font-weight: 600;
    gap: 8px;
  }
  #view-rewards-setup tbody td:first-child img {
    flex-shrink: 0;
  }

  /* kis label a mezők elé (Cost / Visible for / Stock / Active) */
  #view-rewards-setup tbody td:nth-child(n + 2)::before {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    margin-right: 6px;
  }
  #view-rewards-setup tbody td:nth-child(2)::before {
    content: "Cost";
  }
  #view-rewards-setup tbody td:nth-child(3)::before {
    content: "Visible for";
  }
  #view-rewards-setup tbody td:nth-child(4)::before {
    content: "Stock";
  }
  #view-rewards-setup tbody td:nth-child(5)::before {
    content: "Active";
  }

  /* az utolsó sorban (kapcsoló) ne húzódjon szét */
  #view-rewards-setup tbody td:last-child {
    justify-content: flex-end;
  }

  span.tasks-filter-label span {
    display: none;
  }

  /* teljes filter sor scrollozható legyen */
  #view-tasks .tasks-filters-row {
    white-space: nowrap;
    padding-bottom: 6px;
    gap: 20px;
    -webkit-overflow-scrolling: touch;
  }

  #view-tasks .tasks-filter-group {
    gap: 5px;
  }
}

.profile-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
}

.btn-primary {
  background: #00a7ff;
  color: white;
  border: none;
  padding: 10px 22px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.15s;
}

.btn-primary:hover {
  background: #0094e0;
}

.btn-secondary {
  background: #f1f1f1;
  color: #333;
  border: none;
  padding: 10px 22px;
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
  transition: 0.15s;
}

.btn-secondary:hover {
  background: #e2e2e2;
}

#profileEditBtn {
  width: 40px;
  height: 40px;
}

/* TASK TEMPLATES – card layout (scoped to view-tasks) */
#view-tasks .tasks-list {
  gap: 12px;
}

#view-tasks .task-card,
#taskStoreList .task-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
  border-left: 4px solid #e5e7eb;
  cursor: auto;
}

#view-tasks .task-card--active,
#taskStoreList .task-card--active {
  border-left-color: #22c55e !important;
}

#view-tasks .task-card--inactive,
#taskStoreList .task-card--inactive {
  border-left-color: #e5e7eb;
}

/* Smaller icons */
#view-tasks .task-tag i,
#view-tasks .task-meta-item i {
  width: 10px;
  height: 10px;
  margin-right: 3px;
  stroke-width: 2;
}

#view-tasks span.task-tag svg {
  width: 15px;
}

#view-tasks .task-tag {
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #f3f4f6;
  color: #4b5563;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

#view-tasks .task-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

#view-tasks .task-card-header,
#taskStoreList .task-card-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#view-tasks .task-card-title-row,
#taskStoreList .task-card-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#view-tasks .task-card-name,
#taskStoreList .task-card-name {
  font-weight: 600;
  font-size: 15px;
}

#view-tasks .task-card-actions,
#taskStoreList .task-card-actions {
  display: flex;
  gap: 6px;
}

#view-tasks .task-card-tags,
#taskStoreList .task-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

#view-tasks .task-card-footer,
#taskStoreList .task-card-footer {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#view-tasks .task-card-meta,
#taskStoreList .task-card-meta {
  display: flex;
  gap: 10px;
  font-size: 13px;
  color: #4b5563;
}

#view-tasks .task-card-active,
#taskStoreList .task-card-active {
  flex-shrink: 0;
}

#view-tasks .task-meta-item svg,
#taskStoreList .task-meta-item svg {
  font-size: 13px;
  width: 15px;
  margin-top: 2px;
}

/* Mobile */
@media (max-width: 820px) {
  #view-tasks .task-card,
  #taskStoreList .task-card {
    padding: 12px 12px;
  }

  #view-tasks .task-card-meta,
  #taskStoreList .task-card-meta {
    flex-wrap: wrap;
  }
}

#view-tasks button.filter-chip.active {
  background: #00a7ff;
  color: #fff;
  border: none;
}

#view-tasks .tasks-filter-group {
  margin-top: 5px;
}

#view-tasks .tasks-filter-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: #374151; /* sötétebb */
}

#view-tasks .tasks-filter-label i {
  width: 13px;
  height: 13px;
  stroke-width: 2;
  color: #6b7280; /* text-gray-500 */
}

/* FILTER ROW – center alignment */
#view-tasks .tasks-filter-group {
  display: flex;
  align-items: center; /* <<--- EZ HOZZA KÖZÉPRE VERTIKÁLISAN */
  gap: 10px;
  margin-bottom: 6px;
}

/* Label + icon együtt */
#view-tasks .tasks-filter-label {
  display: inline-flex;
  align-items: center; /* <<--- ikon és szöveg középre igazítása */
  gap: 6px;
  font-weight: 500;
  font-size: 14px;
}

/* The icons in front of Status, Recurrence, Assign */
#view-tasks .tasks-filter-label i {
  width: 16px;
  height: 16px;
  stroke-width: 2;
  margin-right: 2px;
  display: inline-flex;
}

/* REWARDS – card layout */
#view-rewards-setup .rewards-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#view-rewards-setup .reward-card {
  display: flex;
  align-items: stretch;
  flex-direction: unset;
  gap: 12px;
  background: #ffffff;
  border-radius: 16px;
  padding: 10px 16px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
  border-left: 4px solid #e5e7eb;
}

#view-rewards-setup .reward-tag svg {
  width: 15px;
}

#view-rewards-setup .reward-card--active {
  border-left-color: #22c55e;
}

#view-rewards-setup .reward-card--inactive {
  border-left-color: #e5e7eb;
}

/* kép bal oldalt */
#view-rewards-setup .reward-card-image {
  width: 100px;
  height: 100px;
  border-radius: 14px;
  overflow: hidden;
  flex-shrink: 0;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
}

#view-rewards-setup .reward-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#view-rewards-setup .reward-card-image--placeholder span {
  font-size: 24px;
}

/* fő rész */
#view-rewards-setup .reward-card-main {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
}

#view-rewards-setup .reward-card-top {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#view-rewards-setup .reward-card-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

#view-rewards-setup .reward-card-name {
  font-weight: 600;
  font-size: 15px;
}

#view-rewards-setup .reward-card-actions {
  display: flex;
  gap: 6px;
}

/* tagek (pont, visible, stock) */
#view-rewards-setup .reward-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

#view-rewards-setup .reward-tag {
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #f3f4f6;
  color: #4b5563;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

#view-rewards-setup .reward-tag i {
  width: 12px;
  height: 12px;
  stroke-width: 2;
}

#view-rewards-setup .star-emoji {
  font-size: 13px;
}

/* alsó sor – pill toggle */
#view-rewards-setup .reward-card-bottom {
  margin-top: 6px;
  display: flex;
  justify-content: flex-end;
}

/* TITLE + ACTIONS sor finomhangolás */
#view-rewards-setup .reward-card-title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

#view-rewards-setup .reward-card-name {
  flex: 1; /* cím rugalmasan törik */
  min-width: 0;
}

#view-rewards-setup .reward-card-actions {
  display: flex;
  flex-direction: row;
  gap: 6px;
  flex-shrink: 0; /* ikon sor nem megy össze */
  white-space: nowrap; /* és nem törik sorba */
}

#view-rewards-setup .reward-card-actions .icon-btn svg {
  width: 20px;
}

/* mobil */
@media (max-width: 820px) {
  #view-rewards-setup .reward-card {
    padding: 10px 12px;
    gap: 8px;
  }

  /* kicsit kisebb kép, hogy legyen hely a szövegnek */
  #view-rewards-setup .reward-card-image {
    width: 80px;
    height: 80px;
  }

  #view-rewards-setup .reward-card-title-row {
    align-items: flex-start;
    gap: 8px;
  }

  #view-rewards-setup .reward-card-name {
    font-size: 14px;
  }

  #view-rewards-setup .reward-card-tags {
    gap: 4px;
  }

  /* pill balra igazítva mobilon, hogy ne lógjon ki jobbra */
  #view-rewards-setup .reward-card-bottom {
    justify-content: flex-start;
  }

  #view-rewards-setup .reward-card-actions {
    gap: 4px;
  }

  #view-rewards-setup .reward-card-actions .icon-btn {
    width: 30px;
    height: 30px;
    padding: 0;
  }

  .reward-card-bottom {
    height: 20px;
  }
  .reward-card-bottom button {
    position: absolute;
    left: 30px;
  }
}

/* MEMBERS – card layout */
#view-members .members-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#view-members .member-card {
  display: flex;
  align-items: stretch;
  gap: 12px;
  background: #ffffff;
  border-radius: 16px;
  padding: 10px 16px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
  border: 1px solid #e5e7eb;
}

#view-members .member-actions svg {
  width: 18px;
}

#view-members .member-meta-item svg {
  width: 19px;
}

/* avatar kör */
#view-members .member-avatar {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: linear-gradient(135deg, #00a7ff, #38bdf8);
  color: #ffffff;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

#view-members .member-avatar span {
  font-size: 18px;
}

/* fő rész */
#view-members .member-main {
  display: flex;
  flex-direction: column;
  flex: 1;
}

#view-members .member-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

#view-members .member-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

#view-members .member-name-btn {
  padding: 0;
}

#view-members .member-name {
  font-weight: 600;
  font-size: 15px;
}

#view-members .member-role-pill {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #e0edff;
  color: #1d4ed8;
}

#view-members .member-actions {
  display: flex;
  gap: 6px;
}

#view-members .member-email {
  font-size: 13px;
  color: #4b5563;
  margin-top: 2px;
}

/* meta sor: cal + approval + points */
#view-members .member-meta-row {
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

#view-members .member-meta-left {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#view-members .member-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

#view-members .member-meta-item i {
  width: 14px;
  height: 14px;
  stroke-width: 2.1;
}

#view-members .member-points {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
  color: #4b5563;
}

#view-members .member-points .star-emoji {
  font-size: 14px;
}

/* MEMBER AVATAR – fix overflow + crop */
#view-members .member-avatar {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #fff;
  font-weight: 600;
  font-size: 20px;
}

/* NINCS kép → kék háttér + betű */
#view-members .member-avatar.no-photo {
  background: #3b82f6; /* tailwind 'blue-500' árnyalat */
}

/* VAN kép → szürke háttér (csak a szélén dereng) */
#view-members .member-avatar.has-photo {
  background: #f3f4f6;
}

/* Kép kitölti a kört */
#view-members .member-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Mobil tuning */
@media (max-width: 820px) {
  #view-members .member-card {
    padding: 10px 12px;
    gap: 10px;
  }

  #view-members .member-top {
    align-items: flex-start;
    gap: 8px;
  }

  #view-members .member-meta-row {
    align-items: flex-start;
    gap: 6px;
  }

  #view-members .member-meta-left {
    gap: 6px;
  }

  #view-members .member-actions .icon-btn {
    width: 30px;
    height: 30px;
    padding: 0;
  }
}

.info-box {
  background: #f5f9ff;
  border: 1px solid #dbe7ff;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: #345;
  position: relative;
  margin-bottom: 14px;
}

.info-box .close-info {
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 16px;
  color: #789;
  cursor: pointer;
  transition: 0.2s;
}

.info-box .close-info:hover {
  color: #456;
}

/* a teljes goal kártya – ez valószínűleg már megvan nálad, csak referencia */
.dash-goal {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 24px;
}

/* BAL oldal: kép + szöveg egymás mellett */
.dash-goal-left {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

/* a szöveges rész legyen egy blokkban */
.dash-goal-left-inner {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* kép stílus – fontos a flex-shrink:0, hogy ne torzuljon */
.dash-goal-img {
  width: 120px;
  height: 120px;
  border-radius: 16px;
  object-fit: cover;
  flex-shrink: 0;
}

.logo {
  text-align: center;
}

.child-mode [data-view="members"],
.child-mode [data-view="tasks"],
.child-mode [data-view="rewards-setup"],
.child-mode [data-view="approvals"],
.child-mode [data-view="shopping"],
.child-mode [data-view="settings"] {
  display: none !important;
}

.child-mode #plannerHeader .new-task-btn,
.child-mode #plannerHeader .generate-week-btn {
  display: none !important;
}

.nav-dropdown-menu {
  display: none;
  position: absolute; /* vagy relative parenttől függően */
  /* ide jöhet background, padding, shadow, stb. */
}

.nav-dropdown-menu.open {
  display: block;
}

.user-dropdown {
  display: none;
  position: absolute; /* vagy ahogy az elrendezésed kívánja */
  /* háttér, padding, shadow, stb. */
}

.user-dropdown.open {
  display: block;
}

.modal-backdrop.open .modal-card {
  opacity: 1;
}

/* Alap kártya-stílus */
.fc .planner-event {
  border-radius: 5px;
  border-left: 4px solid !important;
  padding: 2px 4px;
  font-size: 11px;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.08) !important;
}

/* Cím + idő a kártyán belül */
.fc .planner-event .pe-title {
  font-weight: 600;
  font-size: 11px;
  line-height: 1.2;
}

.fc .planner-event .pe-time {
  font-size: 10px;
  opacity: 0.8;
  margin-top: 2px;
}

/* Státusz szerinti BORDER szín */
.fc .planner-event.st-pending {
  border-color: #fbbf24 !important; /* sárga – elvégzendő */
}

.fc .planner-event.st-awaiting {
  border-color: #3b82f6 !important; /* kék – jóváhagyásra vár */
}

.fc .planner-event.st-done {
  border-color: #22c55e !important; /* zöld – kész */
}

/* többi státuszra óvatos színek, ha használnád */
.fc .planner-event.st-rejected {
  border-color: #ef4444 !important;
}
.fc .planner-event.st-cancelled,
.fc .planner-event.st-skipped {
  border-color: #9ca3af !important;
}

/* MEMBER / ROLE SZÍNSÁVOK (háttér) – pe-c0..pe-c7 */

.fc .planner-event.pe-c0,
.day-grid .dg-task.pe-c0,
.mchip.pe-c0 .avatar {
  background: #fef3c7 !important; /* halvány sárgás */
}

.fc .planner-event.pe-c1,
.day-grid .dg-task.pe-c1,
.mchip.pe-c1 .avatar {
  background: #e0f2fe !important; /* halvány kék */
}

.fc .planner-event.pe-c2,
.day-grid .dg-task.pe-c2,
.mchip.pe-c2 .avatar {
  background: #dcfce7 !important; /* halvány zöld */
}

.fc .planner-event.pe-c3,
.day-grid .dg-task.pe-c3,
.mchip.pe-c3 .avatar {
  background: #fce7f3 !important; /* halvány rózsaszín */
}

.fc .planner-event.pe-c4,
.day-grid .dg-task.pe-c4,
.mchip.pe-c4 .avatar {
  background: #ede9fe !important; /* lila */
}

.fc .planner-event.pe-c5,
.day-grid .dg-task.pe-c5,
.mchip.pe-c5 .avatar {
  background: #cffafe !important; /* türkiz */
}

.fc .planner-event.pe-c6,
.day-grid .dg-task.pe-c6,
.mchip.pe-c6 .avatar {
  background: #fee2e2 !important; /* pirosas */
}

.fc .planner-event.pe-c7,
.day-grid .dg-task.pe-c7,
.mchip.pe-c7 .avatar {
  background: #e5e7eb !important; /* szürkésebb */
}

/* Alap chip-stílus (már van nálad, csak kiegészítéshez) */
.mchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: #f9fafb;
  font-size: 13px;
  cursor: pointer;
  transition:
    box-shadow 0.15s ease,
    transform 0.1s ease,
    background 0.1s;
}

.fc-custom-task {
  cursor: pointer;
}

.fc-custom-task:hover {
  filter: brightness(0.97);
}

/* ===== Planner – custom tooltip ===== */

.planner-tooltip {
  position: fixed;
  z-index: 9999;
  background: #111827; /* sötét slate */
  color: #f9fafb;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.4;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.35);
  pointer-events: none;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(4px);
  visibility: hidden;
  transition:
    opacity 120ms ease-out,
    transform 120ms ease-out,
    visibility 0s linear 120ms;
}

.planner-tooltip--visible {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  transition:
    opacity 120ms ease-out,
    transform 120ms ease-out,
    visibility 0s;
}

.planner-tooltip__dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #d0f224; /* famify zöld */
  margin: 0 6px;
}

/* DAY VIEW – órán belül több feladat egymás mellett */

.day-grid .dg-body .dg-row .dg-cells {
  /* ez maradhat ahogy van, ha már definiáltad – csak infó */
}

.day-grid .dg-body .dg-cell {
  display: flex;
  gap: 4px; /* kis hézag a kártyák között */
  align-items: stretch;
}

/* hogy szépen kitöltsék a sort, ha 2–3 kártya is van ugyanabban a cellában */
.day-grid .dg-body .dg-cell .dg-task {
  flex: 1 1 0;
  min-width: 0;
}

/* opcionális: ha szűk a hely, a szöveg törjön, ne nyomja szét a cellát */
.day-grid .dg-body .dg-cell .dg-task .pe-title {
  white-space: normal;
}

/* Havi nézet: legyen egy kis rés az események között */
.fc-daygrid-day-events .fc-daygrid-event-harness {
  margin-bottom: 4px !important; /* 4px vagy amit szeretnél */
}

.shopping-item-note {
  color: #777;
  font-size: 12px;
  margin-left: 4px;
}

.shopping-item-sub {
  display: flex;
  align-items: center;
  gap: 2px;
}

/* ===== TASK STORE GRID ===== */

#taskStoreList,
#routineStoreList {
  margin-top: 8px;
}

/* rugalmas grid – mobilon 1, desktopon 2 oszlop */
.taskstore-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

@media (min-width: 768px) {
  .taskstore-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* kártya alap */
.taskstore-card {
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.06);
  background: #ffffff;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* fejléc: ikon + cím + leírás */
.taskstore-card__header {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.taskstore-card__icon {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: #eff6ff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.taskstore-card__text {
  flex: 1;
}

.taskstore-card__title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: #0f172a;
}

.taskstore-card__desc {
  margin-top: 2px;
  font-size: 12px;
  color: #64748b;
}

/* meta chipek: pont, perc, nehézség, típus */
.taskstore-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.taskstore-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 999px;
  background: #f1f5f9;
  font-size: 11px;
  color: #475569;
}

.taskstore-chip--type {
  background: #ecfeff;
}

/* footer – CTA gomb */
.taskstore-card__footer {
  margin-top: 4px;
}

.taskstore-btn {
  width: 100%;
  border: none;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  background: #0ea5e9; /* ugyanaz a kék, mint a fő CTA */
  color: #ffffff;
  transition:
    transform 0.05s ease,
    box-shadow 0.05s ease,
    background-color 0.1s ease;
}

.taskstore-btn:hover:not(:disabled) {
  background: #0284c7;
  box-shadow: 0 4px 10px rgba(56, 189, 248, 0.35);
  transform: translateY(-1px);
}

.taskstore-btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: none;
}

.taskstore-btn:disabled {
  opacity: 0.6;
  cursor: default;
  background: #9ae4ba;
  color: #000;
}

/* ===== TASK STORE TOOLBAR ===== */

.taskstore-toolbar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

.taskstore-search {
  width: 100%;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.7);
  padding: 6px 12px;
  font-size: 13px;
  outline: none;
  background: #f8fafc;
}

.taskstore-search:focus {
  border-color: #0ea5e9;
  box-shadow: 0 0 0 1px rgba(14, 165, 233, 0.35);
  background: #ffffff;
}

.taskstore-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

div#taskStoreTypeFilters,
div#routineStoreTypeFilters {
  margin-top: 5px;
}

.taskstore-filter-chip {
  border: none;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 13px;
  background: #e2e8f0;
  color: #475569;
  cursor: pointer;
  margin: 3px 0;
}

.taskstore-filter-chip.active {
  background: #0ea5e9;
  color: #ffffff;
}

/* ===== TASKS TOOLBAR ===== */

.tasks-toolbar {
  margin-bottom: 12px;
}

.tasks-toolbar__row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.tasks-toolbar__search {
  flex: 1 1 220px;
}

.tasks-toolbar__search input {
  width: 100%;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid #dde3f0;
  font-size: 14px;
}

.tasks-toolbar__search input:focus {
  outline: none;
  border-color: #0094ff;
  box-shadow: 0 0 0 2px rgba(0, 148, 255, 0.15);
}

.tasks-toolbar__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tasks-toolbar__filters select {
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid #dde3f0;
  font-size: 13px;
  background: #f9fafb;
  cursor: pointer;
}

.tasks-toolbar__filters select:focus {
  outline: none;
  border-color: #0094ff;
}

/* ===== TASK LIST CARDS ===== */

.tasks-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tasklist-card {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 12px;
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #edf2fb;
  box-shadow: 0 4px 10px rgba(15, 35, 52, 0.04);
  padding: 12px 16px;
}

.tasklist-card--inactive {
  opacity: 0.6;
}

.tasklist-card__main {
  flex: 1 1 auto;
  min-width: 0;
}

.tasklist-card__title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}

.tasklist-card__icon {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #f3f4ff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tasklist-card__icon i {
  width: 14px;
  height: 14px;
}

.tasklist-card__title {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
}

.tasklist-card__subtitle {
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tasklist-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.task-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #f3f4f6;
  font-size: 11px;
  color: #4b5563;
}

.task-meta-chip i {
  width: 12px;
  height: 12px;
}

.tasklist-card__side {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  gap: 8px;
}

.tasklist-card__actions {
  display: flex;
  gap: 6px;
}

/* mobilon a kártya törjön */
@media (max-width: 640px) {
  .tasklist-card {
    flex-direction: column;
    align-items: stretch;
  }

  .tasklist-card__side {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

/* ===== TASKS TOOLBAR (search + filter selectek) ===== */

.tasks-toolbar {
  margin-bottom: 24px;
  padding: 16px 20px 14px;
  border-radius: 18px;
  background: #f8fafc;
  border: 1px solid #e5ecff;
}

.tasks-toolbar__row {
  display: flex;
  gap: 16px;
  align-items: stretch;
  flex-wrap: wrap;
}

/* bal oldalt a kereső */
.tasks-toolbar__left {
  flex: 1 1 52%;
}

/* jobb oldalt a 3 select egymás alatt */
.tasks-toolbar__right {
  flex: 1 1 48%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* közös alap-stílus inputoknak / selecteknek */
.tasks-search-input,
.tasks-filter-select {
  width: 100%;
  height: 44px;
  border-radius: 999px;
  border: 1px solid #d7deee;
  padding: 0 14px;
  font-size: 14px;
  line-height: 1.3;
  background: #ffffff;
  color: #1f2933;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.04);
  outline: none;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background-color 0.15s ease;
}

/* placeholder finomabb */
.tasks-search-input::placeholder {
  color: #9ca8c4;
}

/* focus state */
.tasks-search-input:focus,
.tasks-filter-select:focus {
  border-color: #0ea5e9;
  box-shadow: 0 0 0 1px rgba(14, 165, 233, 0.35);
}

/* selectek “compact” felirat-stílusa (Állapot: Mind, stb.) */
.tasks-filter-select {
  font-weight: 500;
  color: #111827;
  background-color: #fdfdff;
}

/* kicsit kisebb top/bottom padding mobilon */
@media (max-width: 768px) {
  .tasks-toolbar {
    padding: 12px 12px 10px;
    border-radius: 14px;
  }

  .tasks-toolbar__row {
    flex-direction: column;
    gap: 10px;
  }

  .tasks-toolbar__left,
  .tasks-toolbar__right {
    flex: 1 1 100%;
  }

  .tasks-search-input,
  .tasks-filter-select {
    height: 40px;
    font-size: 13px;
  }
}

/* --- FILTER sor fixálása: mindenképp egy sorban legyenek --- */
.tasks-toolbar__filters {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 12px;
  flex-wrap: nowrap !important;
}

.tasks-toolbar__filters select {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  white-space: nowrap !important;
}

/* === TASK LIST – GRID LAYOUT === */

/*.tasks-list--grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}*/

/* === MINI TASK CARDS === */

.tasklist-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.tasklist-card--inactive {
  opacity: 0.6;
}

.tasklist-card__body {
  display: flex;
  flex-direction: column;
}

.tasklist-card__header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.tasklist-card__icon {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: #f3f4ff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tasklist-card__icon i {
  width: 18px;
  height: 18px;
}

.tasklist-card__titles {
  flex: 1;
  min-width: 0;
}

.tasklist-card__title {
  font-weight: 600;
  font-size: 14px;
  color: #0f172a;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tasklist-card__subtitle {
  font-size: 12px;
  color: #6b7280;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tasklist-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.task-mini-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #f4f5fb;
  font-size: 11px;
  color: #4b5563;
}

.task-mini-chip i {
  width: 12px;
  height: 12px;
}

.tasklist-card__footer {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* kisebb pill toggle, hogy elférjen a kártyán */
.pill-toggle.pill-toggle--small {
  padding: 4px 10px;
  font-size: 11px;
}

/* ===== TASK LIST – GRID LAYOUT ===== */

#view-tasks .tasks-list.tasks-list--grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  align-items: flex-start;
  gap: 16px;
}

/* TASK LIST – kompakt rács layout */
.tasks-list.tasks-list--grid {
  gap: 16px;
  align-items: stretch;
}

/* két kártya egymás mellett desktopon */
.tasks-list.tasks-list--grid .tasklist-card {
  box-sizing: border-box;
  width: 100%;
}

/* mobilon menjen vissza egy oszlopba */
@media (max-width: 768px) {
  .tasks-list.tasks-list--grid {
    flex-direction: column;
  }

  .tasks-list.tasks-list--grid .tasklist-card {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
  }
}

/* Kártyák 2 oszlopban desktopon */
.tasks-list.tasks-list--grid .tasklist-card {
  margin: 0;
}

/* Mobilon 1 oszlop */
@media (max-width: 768px) {
  .tasks-list.tasks-list--grid .tasklist-card {
    flex: 0 1 100%;
    max-width: 100%;
  }
}

.tasklist-card__icon svg {
  width: 20px;
}

.task-mini-chip svg {
  width: 15px;
}

/* RUTIN LISTA – ugyanaz a dizájn, mint a task kártyák */

#view-routines .routines-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

#view-routines .tasklist-card.tasklist-card--compact {
  width: calc(50% - 8px);
}

@media (max-width: 900px) {
  #view-routines .tasklist-card.tasklist-card--compact {
    width: 100%;
  }
}

/* rutin toolbar (kereső + selectek) */

.routines-toolbar {
  margin-bottom: 16px;
}

.routines-toolbar__row {
  display: flex;
  gap: 12px;
  align-items: stretch;
}

.routines-toolbar__search {
  flex: 1 1 auto;
}

.routines-toolbar__filters {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}

.routines-toolbar__filters .select {
  min-width: 160px;
}

/* --- Tasks / Rutinok tabok a headerben --- */

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.card-header-left {
  display: flex;
  align-items: center;
}

/* ===== Shared segmented tabs: Tasks + RewardStore ===== */

.tasks-tabs,
.rs-tabs {
  display: inline-flex;
  background: #f3f4f6;
  padding: 4px;
  border-radius: 999px;
  gap: 4px;
}

.tasks-tab,
.rs-tab {
  border: none;
  background: transparent;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  color: #6b7280;
  white-space: nowrap;

  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tasks-tab.active,
.rs-tab.active {
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
  color: #111827;
}

/* Icons */
.tasks-tab__icon,
.rs-tab__icon {
  width: 16px;
  height: 16px;
}

/* Header gombok – ikon + label */

.card-header-buttons .btn-icon {
  display: inline-flex;
  align-items: center;
  margin-right: 6px;
}

.card-header-buttons .btn-icon i {
  width: 16px;
  height: 16px;
}

/* Ha rejtjük a gombokat (pl. majd ha külön header lesz) */
.tasks-header-buttons--hidden {
  display: none;
}

.routine-store-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

/* nagyobb rutin modal */
.modal-card--lg {
  max-width: 720px;
  width: 100%;
}

/* Header bal oszlop – hogy ugyanúgy törjön, mint a task modalnál */
#routineTemplateModal .modal-header__left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Kis chip a cím alatt */
.routine-template-meta {
  margin-top: 4px;
}

.routine-modal__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #f5f7fb;
  font-size: 12px;
  color: #555;
}

.routine-modal__tasks-count {
  padding-left: 8px;
  border-left: 1px solid rgba(0, 0, 0, 0.08);
}

/* Szekció header – cím balra, check jobb szélén */
.routine-template-tasks-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

/* A task list ne legyen túl magas, szépen scrollozzon */
.routine-template-tasks-list {
  max-height: 420px;
  overflow-y: auto;
}

/* Kártyák: kompakt + kijelölés zöld borderrel (ahogy már megcsináltuk) */
.routine-modal-task-card.tasklist-card--compact {
  margin-bottom: 10px;
  padding: 10px 14px;
  border-radius: 16px;
  border: 1px solid #e2e6f0;
  background: #fff;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s,
    box-shadow 0.15s,
    transform 0.05s;
}

.routine-modal-task-card--selected {
  border-color: #bde6ff !important;
  background: #f3fbff !important;
}

/* Meta chip + emoji ikon (⭐ ⏱ ⚡) */
.routine-modal-task-card .tasklist-card__meta {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.routine-modal-task-card .task-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  background: #f5f7fb;
}

.task-meta-chip__icon {
  font-size: 12px;
}

/* ---- ROUTINE TEMPLATE MODAL ---- */

#routineTemplateModal .modal-card {
  max-width: 880px;
}

/* Feladatok blokk fejléce */
.routine-template-tasks-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* checkbox + szöveg egymás mellett, kattintható */
.checkbox.checkbox--inline {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.875rem;
  color: var(--text-muted, #6b7280);
  cursor: pointer;
}

.checkbox.checkbox--inline input[type="checkbox"] {
  margin: 0;
}

/* A feladat kártyák listája a rutin modalban */
.routine-template-tasks-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Kártya – alap */
.routine-modal-task-card {
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease;
}

/* Meta chipek – új emojikhoz is működjenek szépen */
.routine-modal-task-card .task-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.routine-template-tasks-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.checkbox.checkbox--inline {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.875rem;
  cursor: pointer;
}

#routineTemplateModal .modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 10px;
}

.routine-popup-task-meta {
  padding: 0 18px;
}

/* Routine modal – "Összes feladat kijelölése" */
.checkbox.checkbox--inline {
  display: inline-flex;
  flex-direction: row; /* felülírja a globál oszlopot */
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap; /* ne tördelje új sorba a szöveget */
}

.checkbox.checkbox--inline input[type="checkbox"] {
  margin: 0; /* ha kell, leveheted a globál margót */
}

.modal-section__title {
  font-weight: 600;
  font-size: 15px;
}

.modal-section__header.routine-template-tasks-header {
  border-bottom: solid 1px #eee;
  padding-bottom: 5px;
}

#routineTemplateTasks .task-mini-chip,
#routineTemplateTasks .tasklist-card__icon {
  background: #fff;
}

.routine-modal-task-card--selected .tasklist-card__icon {
  color: #00a7ff;
}

.tasklist-card.tasklist-card--compact {
  padding: 14px 16px;
}

.routine-modal-task-card:hover {
  border-color: #00a7ff !important;
}

.routine-tasks-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  border-radius: 0.5rem;
  border: none;
  background: #fff;
  cursor: pointer;
}

.routine-tasks-toggle__left {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

.routine-tasks-toggle__summary {
  font-size: 0.85rem;
  font-weight: 500;
}

.routine-tasks-toggle__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-left: 0.5rem;
  flex: 1;
}

.routine-tasks-preview-chip {
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  background: #eef2ff;
  font-size: 0.75rem;
  white-space: nowrap;
}

.routine-tasks-preview-chip--muted {
  background: #e5e7eb;
}

.routine-tasks-toggle__caret {
  margin-left: auto;
  font-size: 0.7rem;
  transform: rotate(0deg);
  transition: transform 0.15s ease;
}

.routine-tasks-toggle--open .routine-tasks-toggle__caret {
  transform: rotate(180deg);
}

/* lista alapból rejtve */
.routine-tasks-list {
  display: none;
  margin-top: 0.4rem;
  padding: 0.35rem 0.5rem 0.2rem;
  border-radius: 0.5rem;
  background: #fff;
}

.routine-tasks-list--open {
  display: block;
}

.routine-task-row {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  padding: 0.25rem 0;
  background: #fff;
  border-radius: 5px;
  margin: 5px;
}

.routine-task-row__icon {
  margin-top: 0.05rem;
  flex-shrink: 0;
}

.routine-task-row__title {
  font-size: 0.85rem;
  font-weight: 500;
}

.routine-task-row__meta {
  font-size: 0.75rem;
  color: #6b7280;
}

.routine-tasks {
  padding: 0.35rem 0.5rem 0.25rem;
  border-radius: 0.75rem;
  background: #fff;
  border: 1px solid #e5e7ebc2; /* nagyon halvány border */
}

.routines-list .tasklist-card {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.routine-card-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.routine-card-header-row .tasklist-card__main {
  flex: 1;
}

.routine-card-header-row .tasklist-card__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
}

/* ===== Routine editor layout ===== */

.routine-editor {
  padding: 24px 24px 40px;
}

.routine-editor__inner {
  max-width: 1000px;
  margin: 0 auto;
}

.routine-editor__header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.routine-editor__title {
  font-size: 1.6rem;
  font-weight: 600;
  margin: 0;
}

/* Vissza gomb (szürke, ghost) */
.btn-ghost {
  border: none;
  background: transparent;
  padding: 4px 0;
  font-size: 0.95rem;
  color: var(--text-muted, #64748b);
  cursor: pointer;
}

.btn-ghost:hover {
  color: var(--text-main, #0f172a);
}

/* Fő kártya a formnak */
.routine-editor__card {
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
  padding: 24px 28px 20px;
}

/* Blokkok a kártyán belül */
.routine-editor__block + .routine-editor__block {
  border-top: 1px solid rgba(148, 163, 184, 0.25);
  margin-top: 24px;
  padding-top: 24px;
}

.routine-editor__block-title {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 4px;
}

.routine-editor__block-desc {
  font-size: 0.9rem;
  color: var(--text-muted, #64748b);
  margin: 0 0 16px;
}

.routine-editor__muted {
  font-size: 0.85rem;
  color: var(--text-muted, #94a3b8);
}

/* Alap form elemek – igazodva a meglévőkhöz */
.form-row {
  margin-bottom: 14px;
}

.form-label {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 4px;
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  padding: 8px 10px;
  font-size: 0.95rem;
  outline: none;
  background: #f8fafc;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  border-color: #38bdf8;
  background: #ffffff;
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.3);
}

.form-textarea {
  resize: vertical;
}

/* 2 oszlopos sor desktopon */
.form-row--grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 768px) {
  .form-row--grid {
    grid-template-columns: 1fr;
  }
}

.form-row--inline {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Checkbox label */
.checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--text-main, #0f172a);
}

/* Task gombok (pill) */
.routine-editor__task-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}

.pill-btn {
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  padding: 6px 14px;
  font-size: 0.9rem;
  cursor: default;
  color: #64748b;
}

.pill-btn--primary {
  border-color: #38bdf8;
  background: #e0f2fe;
  color: #0369a1;
}

/* Planner placeholder */
.planner-preview-placeholder {
  border-radius: 12px;
  border: 1px dashed #cbd5f5;
  padding: 14px 16px;
  font-size: 0.9rem;
  color: #64748b;
  background: #f8fafc;
}

/* Lenti footer sáv a mentéssel */
.routine-editor__footer {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid rgba(148, 163, 184, 0.25);

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Primary mentés gomb (illeszkedjen a többihez) */
.btn-primary {
  border: none;
  border-radius: 999px;
  padding: 8px 20px;
  font-size: 0.95rem;
  font-weight: 500;
  color: #ffffff;
  background: #0ea5e9;
  cursor: pointer;
  transition:
    background 0.15s ease,
    box-shadow 0.15s ease;
}

.btn-primary:hover {
  background: #0284c7;
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.25);
}

.btn-primary:disabled {
  opacity: 0.6;
  cursor: default;
  box-shadow: none;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  width: auto !important;
}

.checkbox-label span {
  display: inline-block;
  white-space: nowrap;
}

.checkbox-label input[type="checkbox"] {
  transform: scale(1.2);
  cursor: pointer;
}

.checkbox-label {
  cursor: pointer;
}

/* Fejléc a rutin feladat blokknál */

.routine-editor-tasks-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

/* === Rutin tasks modal === */

.routine-tasks-modal {
  max-width: 920px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.routine-tasks-modal__header {
  align-items: center;
  gap: 12px;
}

.routine-tasks-modal__tabs {
  display: inline-flex;
  gap: 4px;
  padding: 0 24px 12px;
  border-bottom: 1px solid #e5edf5;
  margin-top: 15px;
}

.routine-tab {
  border: none;
  background: transparent;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 14px;
  cursor: pointer;
  color: #64748b;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.routine-tab.active {
  background: #0ea5e91a;
  color: #0f172a;
  font-weight: 600;
}

.routine-tasks-modal__body {
  padding: 16px 24px 12px;
  overflow-y: auto;
  flex: 1 1 auto;
}

.routine-tab-panel {
  display: none;
}

.routine-tab-panel.is-active {
  display: block;
}

.routine-tasks-modal__footer {
  padding: 12px 24px 16px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid #e5edf5;
}

/* Saját feladatok lista a modalban */

.routine-own-tasks-list {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.routine-own-task-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
}

.routine-own-task-row__label-main {
  font-size: 14px;
  font-weight: 500;
  color: #0f172a;
}

.routine-own-task-row__label-sub {
  font-size: 12px;
  color: #64748b;
}

.routine-own-task-row__meta {
  margin-left: auto;
  display: inline-flex;
  gap: 6px;
  font-size: 12px;
  color: #64748b;
}

/* Preview a rutin editorban */

.routine-editor-tasks-preview {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.routine-editor-task-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #e0f2fe;
  color: #0f172a;
  font-size: 13px;
}

.routine-editor-task-chip__remove {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  color: #64748b;
}

/* ===== Routine editor – task gombok ===== */

.routine-editor-tasks-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.routine-editor-tasks-header .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 1.1rem;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    color 0.15s ease,
    transform 0.05s ease;
}

/* első gomb: “primary” */
.routine-editor-btn-primary {
  background-color: #0ea5e9;
  color: #fff;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
}

.routine-editor-btn-primary:hover {
  background-color: #0074d0;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.16);
  transform: translateY(-1px);
}

.routine-editor-btn-primary:active {
  background-color: #0062af;
  box-shadow: none;
  transform: translateY(0);
}

/* második gomb: “ghost / secondary” */
.routine-editor-btn-ghost {
  background-color: #f3f4f6;
  color: #111827;
  border-color: #e5e7eb;
}

.routine-editor-btn-ghost:hover {
  background-color: #e5e7eb;
  border-color: #d1d5db;
}

.routine-editor-btn-ghost:active {
  background-color: #d1d5db;
}

/* Mobilon egymás alá, teljes szélességben */

@media (max-width: 640px) {
  .routine-editor-tasks-header {
    flex-direction: column;
    align-items: stretch;
  }

  .routine-editor-tasks-header .btn {
    width: 100%;
  }
}

.routine-modal-tasks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.routine-tabs .routine-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.routine-tabs .routine-tab i,
.routine-tasks-modal__tabs svg {
  width: 15px;
  height: 15px;
  stroke-width: 2;
}

.modal-footer.routine-tasks-modal__footer {
  display: flex;
  justify-content: flex-end !important;
  gap: 12px;
}

.routine-editor-task-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: 10px;
  background: #f7fbff;
  margin-bottom: 6px;
  gap: 8px;
}

.routine-editor-task-row__left {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.routine-editor-task-row__drag {
  border: none;
  background: transparent;
  padding: 4px;
  cursor: grab;
}

.routine-editor-task-row__title {
  font-weight: 500;
}

.routine-editor-task-row__meta {
  font-size: 12px;
  color: #6b7280;
}

.routine-editor-task-row__right {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* drag állapotok */
.routine-editor-task-row.is-dragging {
  opacity: 0.6;
}

.routine-editor-task-row.is-drag-over {
  outline: 2px dashed #3b82f6;
}

.routine-editor-tasks-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.routine-editor-tasks-header {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.routine-tasks-list--editor-style .routine-editor-task-row__drag--readonly {
  cursor: default;
  opacity: 0.5;
}

.routine-tasks-list--editor-style .routine-editor-task-row {
  cursor: default;
}

.routine-tasks .routine-editor-task-row__drag {
  display: none;
}

/* REWARDS – grid layout, 2 kártya egy sorban desktopon */

.card #rewardsTableWrap .rewards-list {
  display: grid !important; /* flex felülírása */
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 16px;
}

@media (min-width: 900px) {
  .card #rewardsTableWrap .rewards-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.reward-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.store-btn {
  background: #f1f5f9;
  border-radius: 999px;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #0f172a;
  cursor: pointer;
  border: none;
  transition: background 0.15s ease;
}

.store-btn:hover {
  background: #e2e8f0;
}

.store-btn i {
  width: 16px;
  height: 16px;
}

/* ===== REWARD STORE MODAL ===== */

.modal-card.modal-card--wide {
  max-width: 720px;
}

.modal-subtitle {
  font-size: 13px;
  color: #64748b;
  margin-bottom: 12px;
}

.reward-store-body {
  min-height: 120px;
}

/* loader a store-hoz */
.reward-store-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px 0;
  font-size: 14px;
  color: #64748b;
}

/* store kártyák gridje */
.reward-store-list {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 12px;
}

@media (min-width: 700px) {
  .reward-store-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* kártya – hasonló a rewards cardhoz, de compact */
.reward-store-card {
  display: flex;
  gap: 10px;
  border-radius: 14px;
  padding: 10px 12px;
  background: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.4);
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.06);
}

.reward-store-card-image {
  flex: 0 0 56px;
  height: 56px;
  border-radius: 12px;
  overflow: hidden;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
}

.reward-store-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.reward-store-card-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.reward-store-card-name {
  font-weight: 600;
  font-size: 14px;
  color: #0f172a;
}

.reward-store-card-desc {
  font-size: 12px;
  color: #64748b;
}

.reward-store-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
}

.reward-store-card-points {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #fef3c7;
  color: #92400e;
}

.reward-store-card-points .star {
  font-size: 13px;
}

/* kis primary gomb a kártyán */
.btn-xs-primary {
  border: none;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
  background: #0ea5e9;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.btn-xs-primary:hover {
  background: #0284c7;
}

.reward-store-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.reward-store-search {
  flex: 1;
}

.reward-store-search input[type="search"] {
  width: 100%;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid #e3e7ee;
  font-size: 14px;
  outline: none;
}

.reward-store-search input[type="search"]:focus {
  border-color: #45a6ff;
  box-shadow: 0 0 0 2px rgba(69, 166, 255, 0.15);
}

.reward-store-filter select {
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid #e3e7ee;
  font-size: 14px;
  background: #fff;
}

/* kicsit levegősebb kártyák */
.reward-store-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.reward-store-card {
  border-radius: 16px;
  border: 1px solid #edf0f6;
  background: #ffffff;
  padding: 10px 14px;
  display: flex;
  gap: 10px;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.04);
}

.reward-store-card-name {
  font-weight: 600;
  margin-bottom: 4px;
}

.reward-store-card-desc {
  font-size: 13px;
  color: #6b7280;
  margin-bottom: 6px;
}

.reward-store-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

h2#rewardStoreTitle {
  margin: 0;
}

/* ===== SHOPPING QTY CONTROLS ===== */

.shopping-item-right {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* közös gomb alap */
.shopping-qty-btn,
.shopping-delete-btn {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  color: #374151;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.05s ease;
}

.shopping-qty-btn:hover {
  background: #f3f4f6;
}

.shopping-qty-btn:active {
  transform: scale(0.95);
}

/* – / + finom szétválasztás */
.shopping-qty-btn-minus {
  color: #6b7280;
}

.shopping-qty-btn-plus {
  color: #111827;
}

/* érték badge */
.shopping-qty-value {
  min-width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #f3f4f6;
  color: #111827;
  font-size: 14px;
  font-weight: 600;

  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* törlés gomb */
.shopping-delete-btn {
  border-color: #fee2e2;
  background: #fff;
  color: #ef4444;
}

.shopping-delete-btn:hover {
  background: #fee2e2;
}

.shopping-delete-btn:active {
  transform: scale(0.95);
}

/* ===== Dashboard Progress blocks ===== */

.dash-progress-wrap {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 14px;
  margin: 14px 0;
}

@media (max-width: 980px) {
  .dash-progress-wrap {
    grid-template-columns: 1fr;
  }
}

/* próbálj ráülni a meglévő card stílusodra */
.dash-card {
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 18px;
  padding: 16px 16px 14px;
  box-shadow: 0 10px 25px rgba(2, 8, 23, 0.04);
}

.dash-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.dash-card-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  color: #0f172a;
}

.dash-card-icon {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(2, 132, 199, 0.1);
}

/* Level badge */
.dash-level-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.05);
  color: #0f172a;
  font-weight: 700;
  font-size: 13px;
}
.dash-level-badge-label {
  opacity: 0.7;
  font-weight: 700;
}

.dash-level-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.dash-level-line {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
}
.dash-level-arrow {
  opacity: 0.5;
}

.dash-level-sub {
  margin-top: 6px;
  color: rgba(15, 23, 42, 0.72);
  font-size: 13px;
}

.dash-xp-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(250, 204, 21, 0.14);
  border: 1px solid rgba(250, 204, 21, 0.25);
  font-weight: 700;
  color: rgba(15, 23, 42, 0.85);
  font-size: 13px;
  white-space: nowrap;
}

/* Progress bar */
.dash-progress {
  margin-top: 6px;
}
.dash-progress-track {
  height: 12px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.06);
  overflow: hidden;
}
.dash-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(59, 130, 246, 1),
    rgba(34, 197, 94, 1)
  );
  transition: width 220ms ease;
}

.dash-progress-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  font-size: 12px;
}

.dash-muted {
  color: rgba(15, 23, 42, 0.55);
}
.dash-percent {
  font-weight: 800;
  color: rgba(15, 23, 42, 0.78);
}

/* Achievement card bits */
.dash-ach-chip {
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.22);
  font-weight: 800;
  font-size: 12px;
  color: rgba(15, 23, 42, 0.85);
}

.dash-ach-title {
  font-weight: 800;
  font-size: 15px;
  color: #0f172a;
  margin-bottom: 4px;
}
.dash-ach-sub {
  color: rgba(15, 23, 42, 0.7);
  font-size: 13px;
  margin-bottom: 10px;
}

.dash-progress--sm .dash-progress-track {
  height: 10px;
}

/* ===== DASH ROW LAYOUT ===== */
.dash-row {
  display: grid;
  gap: 16px;
  margin: 16px 0;
}
.dash-row--2 {
  grid-template-columns: 1.25fr 1fr;
}
@media (max-width: 980px) {
  .dash-row--2 {
    grid-template-columns: 1fr;
  }
}

/* ===== GENERIC CARD (ha nincs már egységes) ===== */
.dash-card {
  background: #fff;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
  border: 1px solid rgba(15, 23, 42, 0.06);
}

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

.dash-card-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
}

.dash-icon-pill {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.06);
  font-size: 14px;
}

.dash-badge {
  font-weight: 700;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.06);
  color: rgba(15, 23, 42, 0.9);
}

.dash-badge--soft {
  background: rgba(34, 197, 94, 0.12);
  color: rgba(21, 128, 61, 1);
}

.dash-muted {
  color: rgba(15, 23, 42, 0.55);
  font-size: 12px;
}

/* ===== FAMILY PROGRESS ===== */
.dash-family-levels {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.dash-family-levels-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
}

.dash-arrow {
  color: rgba(15, 23, 42, 0.4);
}

.dash-xp-pill {
  font-weight: 800;
  font-size: 12px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(250, 204, 21, 0.16);
  border: 1px solid rgba(250, 204, 21, 0.25);
  white-space: nowrap;
}

.dash-progress-track {
  height: 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.08);
  overflow: hidden;
}

.dash-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #60a5fa, #22c55e);
  transition: width 250ms ease;
}

.dash-progress-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}

.dash-family-mini {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}

.dash-mini-item {
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(15, 23, 42, 0.04);
  border: 1px solid rgba(15, 23, 42, 0.06);
}

.dash-mini-label {
  font-size: 11px;
  color: rgba(15, 23, 42, 0.55);
  margin-bottom: 2px;
}

.dash-mini-value {
  font-size: 13px;
  color: rgba(15, 23, 42, 0.9);
}

/* ===== WEEKLY BOARD ===== */
.dash-board-sub {
  font-size: 12px;
  color: rgba(15, 23, 42, 0.62);
  margin: 0 0 10px 0;
}

.dash-board-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}

.dash-board-item {
  display: grid;
  grid-template-columns: 22px 28px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.03);
  border: 1px solid rgba(15, 23, 42, 0.06);
}

.dash-rank {
  width: 22px;
  height: 22px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 12px;
  background: rgba(15, 23, 42, 0.08);
}
.dash-rank--1 {
  background: rgba(250, 204, 21, 0.22);
}
.dash-rank--2 {
  background: rgba(148, 163, 184, 0.22);
}
.dash-rank--3 {
  background: rgba(251, 146, 60, 0.18);
}

.dash-avatar {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  background: rgba(59, 130, 246, 0.14);
  color: rgba(30, 64, 175, 1);
  user-select: none;
}

.dash-name {
  font-weight: 700;
  color: rgba(15, 23, 42, 0.9);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-metric {
  font-size: 12px;
  color: rgba(15, 23, 42, 0.7);
  white-space: nowrap;
}

.dash-board-empty {
  padding: 12px;
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.03);
  border: 1px dashed rgba(15, 23, 42, 0.12);
  color: rgba(15, 23, 42, 0.6);
  font-size: 12px;
}

.dash-board-footer {
  margin-top: 10px;
}

/* ===== WEEKLY SUMMARY (NEW) ===== */
.dash-week-top {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 16px;
  align-items: stretch;
  margin-bottom: 14px;
}
@media (max-width: 980px) {
  .dash-week-top {
    grid-template-columns: 1fr;
  }
}

.dash-week-progress-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.dash-week-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (max-width: 980px) {
  .dash-week-kpis {
    grid-template-columns: repeat(2, 1fr);
  }
}

.dash-kpi {
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(15, 23, 42, 0.04);
  border: 1px solid rgba(15, 23, 42, 0.06);
}
.dash-kpi-label {
  font-size: 11px;
  color: rgba(15, 23, 42, 0.55);
  margin-bottom: 2px;
}
.dash-kpi-value {
  font-size: 13px;
  color: rgba(15, 23, 42, 0.92);
}

/* Family list */
.dash-week-family {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
}

.dash-week-family-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.dash-family-list {
  display: grid;
  gap: 10px;
}

.dash-family-row {
  display: grid;
  grid-template-columns: 220px 1fr 34px;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-radius: 16px;
  background: rgba(15, 23, 42, 0.03);
  border: 1px solid rgba(15, 23, 42, 0.06);
}
@media (max-width: 980px) {
  .dash-family-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

.dash-family-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.dash-family-namewrap {
  min-width: 0;
}
.dash-family-name {
  font-weight: 800;
  color: rgba(15, 23, 42, 0.92);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-family-sub {
  font-size: 12px;
  color: rgba(15, 23, 42, 0.55);
}

.dash-family-mid {
  min-width: 0;
}
.dash-family-bar {
  height: 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.08);
  overflow: hidden;
}
.dash-family-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #60a5fa, #22c55e);
  width: 0%;
  transition: width 250ms ease;
}
.dash-family-mid-meta {
  margin-top: 7px;
  font-size: 12px;
  color: rgba(15, 23, 42, 0.65);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.dash-family-right {
  display: flex;
  justify-content: flex-end;
}
@media (max-width: 980px) {
  .dash-family-right {
    justify-content: flex-start;
  }
}

.dash-onb-body {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.dash-onb-step {
  font-size: 12px;
  font-weight: 700;
  color: #2b6cb0;
  background: #e6f0ff;
  display: inline-flex;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 8px;
}
.dash-onb-heading {
  margin: 0 0 6px;
  font-size: 18px;
}
.dash-onb-desc {
  margin: 0;
  color: #5b6573;
}
.dash-onb-actions {
  display: flex;
  gap: 10px;
}
.dash-link {
  background: transparent;
  border: 0;
  color: #2b6cb0;
  cursor: pointer;
  font-weight: 600;
}

.ob-highlight {
  position: relative;
  z-index: 50;
  outline: 3px solid rgba(59, 130, 246, 0.9);
  outline-offset: 3px;
  border-radius: 999px;
}

.ob-highlight-pulse {
  animation: obPulse 1.2s ease-in-out infinite;
}

@keyframes obPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.35);
  }
  70% {
    box-shadow: 0 0 0 14px rgba(59, 130, 246, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
  }
}

.ph-top-mobile svg,
.ph-top-mobile i,
.ph-actions button svg,
.ph-actions button i {
  width: 16px;
  height: 16px;
}

#reward_category.form-select {
  width: 100%;
  max-width: 100%;
}

/* ===== Onboarding finish overlay + confetti ===== */

#ob-finish-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(3px);
  z-index: 9999;
  padding: 16px;
}

.ob-finish-card {
  position: relative;
  width: min(520px, 92vw);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  padding: 18px 18px 14px;
  overflow: hidden;
}

.ob-finish-emoji {
  font-size: 38px;
  line-height: 1;
}
.ob-finish-title {
  font-size: 22px;
  font-weight: 800;
  margin-top: 6px;
}
.ob-finish-desc {
  margin-top: 8px;
  opacity: 0.9;
  line-height: 1.35;
}
.ob-finish-actions {
  margin-top: 14px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.ob-confetti-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ob-confetti {
  position: absolute;
  top: -12px;
  width: 10px;
  height: 14px;
  border-radius: 2px;
  opacity: 0.95;
  animation-name: obConfettiFall;
  animation-timing-function: cubic-bezier(0.15, 0.8, 0.25, 1);
  animation-fill-mode: both;
}

/* egyszerű szín variációk (stabil, nem random JS-ből) */
.ob-confetti:nth-child(3n) {
  background: #d0f224;
}
.ob-confetti:nth-child(3n + 1) {
  background: #6ee7b7;
}
.ob-confetti:nth-child(3n + 2) {
  background: #60a5fa;
}

@keyframes obConfettiFall {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(520px) rotate(720deg);
    opacity: 0;
  }
}

.dash-onboarding {
  background: #f4fbff;
}

#ob-finish-overlay.ob-fadeout {
  opacity: 0;
  transition: opacity 0.35s ease;
}

.app-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f6fbff;
}
.app-loader.hidden {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.app-loader-card {
  text-align: center;
  padding: 22px 26px;
  border-radius: 16px;
  background: white;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  min-width: 260px;
}
.app-loader-logo {
  font-weight: 800;
  font-size: 24px;
  letter-spacing: 0.2px;
  margin-bottom: 10px;
}
.app-loader-spin {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 3px solid rgba(0, 0, 0, 0.08);
  border-top-color: rgba(0, 0, 0, 0.35);
  margin: 10px auto 12px;
  animation: famifySpin 0.9s linear infinite;
}
@keyframes famifySpin {
  to {
    transform: rotate(360deg);
  }
}

.app-loader-text {
  font-size: 14px;
  opacity: 0.7;
}

.dash-cta-wrap {
  display: grid;
  gap: 14px;
  margin-bottom: 14px;
}
@media (min-width: 920px) {
  .dash-cta-wrap {
    grid-template-columns: 1fr 1fr;
  }
}

.dash-cta-card .dash-cta-text {
  margin: 10px 0 14px;
  color: #5b6773;
  line-height: 1.35;
  font-size: 14px;
}

.dash-cta-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.dash-cta-done {
  font-weight: 600;
  color: #1f7a3a;
  background: rgba(31, 122, 58, 0.08);
  padding: 8px 10px;
  border-radius: 10px;
}

.dash-cta-badge {
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.06);
}

/* ===== PLANNER TOPBAR ===== */

.planner-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;

  padding: 8px 12px;
  margin-bottom: 8px;

  background: transparent;
}

/* ===== DESKTOP FILTERS (LEFT) ===== */

.planner-filters-desktop {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pf-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pf-label {
  font-size: 11px;
  line-height: 1;
  opacity: 0.6;
  padding-left: 4px;
}

.pf-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  font-size: 13px;
  font-weight: 500;

  padding: 6px 28px 6px 12px;
  border-radius: 999px;

  border: 1px solid rgba(0, 0, 0, 0.08);
  background-color: #fff;

  cursor: pointer;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;

  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

.pf-select:hover {
  border-color: rgba(0, 0, 0, 0.18);
}

.pf-select:focus {
  outline: none;
  border-color: #4f46e5;
  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.15);
}

.planner-bottom-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.member-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}

/* ================================
   PLANNER HEADER / TOP ACTIONS UI
   (letisztult szerep-logika + filter csak mobilon)
   ================================ */

.planner-header {
  gap: 12px;
  align-items: center;
}

.ph-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* --- FILTER gomb: csak mobilon --- */
@media (min-width: 992px) {
  .planner-header .ph-filter-mobile {
    display: none !important;
  }
}

/* Base */
.planner-header .btn,
.planner-header .nav-pager-btn,
.planner-header .seg-btn {
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.1px;
}

.planner-header .btn {
  height: 38px;
  padding: 0 14px;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1;
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease,
    background-color 0.12s ease,
    border-color 0.12s ease,
    color 0.12s ease;
}

.planner-header .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.planner-header .btn:active {
  transform: translateY(0px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

.planner-header .btn i,
.planner-header .nav-pager-btn i {
  width: 16px;
  height: 16px;
  stroke-width: 2.2px;
}

/* Focus */
.planner-header .btn:focus-visible,
.planner-header .nav-pager-btn:focus-visible,
.planner-header .seg-btn:focus-visible {
  outline: 2px solid #38bdf8;
  outline-offset: 2px;
}

/* --- PRIMARY: Új feladat (kék) --- */
.planner-header #addTaskTopBtn.btn,
.ph-top-mobile .btn-add-task.btn {
  background-color: #0ea5e9;
  border-color: #0ea5e9;
  color: #ffffff;
}
.planner-header #addTaskTopBtn.btn:hover,
.ph-top-mobile .btn-add-task.btn:hover {
  background-color: #0284c7;
  border-color: #0284c7;
}

/* --- NEUTRAL: Rutinok + Generálás (szürke/outline) --- */
.planner-header .btn-templates.btn,
.planner-header #genWeekBtn.btn,
.ph-top-mobile .btn-gen-week.btn {
  background-color: #f8fafc;
  border-color: #e2e8f0;
  color: #0f172a;
}
.planner-header .btn-templates.btn:hover,
.planner-header #genWeekBtn.btn:hover,
.ph-top-mobile .btn-gen-week.btn:hover {
  background-color: #ffffff;
  border-color: #cbd5e1;
}

/* icon neutrál gombokon */
.planner-header .btn-templates.btn i,
.planner-header #genWeekBtn.btn i {
  color: #0f172a;
}

/* --- DESTRUCTIVE (soft red): Ürítés --- */
.planner-header #clearRangeBtn.btn {
  background-color: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}
.planner-header #clearRangeBtn.btn:hover {
  background-color: #fee2e2;
  border-color: #fca5a5;
  color: #7f1d1d;
}
.planner-header #clearRangeBtn.btn i {
  color: #b91c1c;
}

/* ================================
   Member chips – csak a kör kapja a kéket aktívnál
   ================================ */

.member-chips .mchip .avatar {
  border: 1px solid transparent;
}

.member-chips .mchip.is-on .avatar {
  background: #e0f2fe; /* light sky */
  border-color: #38bdf8; /* sky border */
  box-shadow: 0 10px 22px rgba(14, 165, 233, 0.22);
}

.routine-del-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.routine-del-row {
  display: flex;
  gap: 12px;
  padding: 12px;
  border: 1px solid #e8eef6;
  border-radius: 14px;
  background: #fff;
}

.routine-del-row.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.routine-del-row__main {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.routine-del-row__title {
  font-weight: 600;
}

.routine-del-row__meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.routine-del-row__hint {
  font-size: 12px;
  opacity: 0.7;
}

.routine-del-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.routine-del-row {
  display: flex;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  align-items: flex-start;
  background: #fff;
}

.routine-del-row input[type="checkbox"] {
  margin-top: 6px;
}

.routine-del-row.is-disabled {
  opacity: 0.55;
}

.routine-del-row__title {
  font-weight: 600;
}

.routine-del-row__meta {
  margin-top: 6px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.routine-del-row__hint {
  margin-top: 6px;
  font-size: 12px;
  opacity: 0.7;
}

/* ===== Routine delete modal list ===== */

.routine-del-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.routine-del-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  background: #fff;
}

.routine-del-row.is-disabled {
  opacity: 0.55;
}

.routine-del-row__main {
  flex: 1;
  min-width: 0;
  text-align: left; /* <<< ez a lényeg, nehogy jobbra húzza bármi */
}

.routine-del-row__title {
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 8px;
  word-break: break-word;
}

.routine-del-row__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}

.routine-del-row__hint {
  font-size: 12px;
  opacity: 0.65;
}

/* A checkbox/switch oszlop fix szélesség, ne “ússzon el” */
.routine-del-row__toggle {
  width: 46px; /* mini switch helye */
  padding-top: 2px;
  display: flex;
  justify-content: center;
}

/* ===== Mini switch (Privacy-szerű) ===== */

.mini-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  user-select: none;
}

.mini-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.mini-switch__track {
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(0, 0, 0, 0.1);
  display: inline-block;
  position: relative;
  transition: 0.18s ease;
}

.mini-switch__thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  top: 1px;
  left: 1px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
  transition: 0.18s ease;
}

.mini-switch input:checked + .mini-switch__track {
  background: #0ea5e9;
}

.mini-switch input:checked + .mini-switch__track .mini-switch__thumb {
  transform: translateX(18px);
}

.mini-switch input:disabled + .mini-switch__track {
  opacity: 0.45;
  cursor: not-allowed;
}

.routine-del-option {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.routine-del-option__text {
  flex: 1;
  min-width: 0;
}

.routine-del-option__title {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;
}

.routine-del-option__muted {
  opacity: 0.75;
  font-weight: 500;
}

.ph-top-mobile {
  align-items: center;
  gap: 8px;
  padding: 15px 6px 10px;
  margin-bottom: 6px;
  background: #f3f7fb;
  border-radius: 16px;
  text-align: center;
}

/* Base button style */
.ph-top-mobile .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.ph-top-mobile .btn-gen-week.btn {
  background: #f0f0f0;
}

.clearRangeBtn span {
  display: none;
}

.fc .fc-toolbar.fc-header-toolbar {
  display: none;
}

/* ============================
   Reward store header buttons
   ============================ */

.rewardstore-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Left side (title, tabs, stb.) */
.rewardstore-header .card-header-left {
  flex: 1 1 auto;
  min-width: 0;
}

/* Right side buttons */
.rewardstore-header .card-header-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Buttons inside header */
.rewardstore-header .card-header-buttons .btn {
  height: 36px;
  padding: 0 12px;
  font-size: 13px;
  border-radius: 999px;

  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

/* Icon inside button */
.rewardstore-header .btn-icon {
  font-size: 16px;
}

@media (max-width: 720px) {
  .rewardstore-header {
    gap: 8px;
  }

  .rewardstore-header .card-header-buttons .btn {
    padding: 0 10px;
    font-size: 12px;
  }

  button#rsManageBtn .btn-label {
    display: none;
  }

  button#rsManageBtn span.btn-icon {
    margin: 0;
  }
  .dash-progress-wrap {
    margin: 0;
    gap: 0;
  }

  article#dashPushCard {
    margin-bottom: 8px;
  }

  .container.no-padding {
    padding: 0;
    margin: 0;
    max-width: 100%;
  }

  button#rsManageBtn .btn-label {
    display: none;
  }

  button#rsManageBtn span.btn-icon {
    margin: 0;
  }

  button#taskStoreBtn span.btn-label {
    display: none;
  }

  button#addTaskBtn span.btn-label {
    display: none;
  }

  button#taskStoreBtn span.btn-icon,
  button#addTaskBtn .btn-icon {
    margin: 0;
  }
  .routine-tasks-toggle__summary {
    font-size: 0.85rem;
    font-weight: 500;
    max-width: 60px;
  }

  span.routine-tasks-toggle__icon {
    display: none;
  }

  .routines-toolbar__filters .select {
    min-width: 160px;
    max-width: 30% !important;
  }

  .routines-toolbar__filters {
    margin-top: 10px;
  }
}

.dash-cta-card .dash-cta-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

#dashInstallHowBtn {
  margin-top: 10px;
}

#dashInstallHowText {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.04);
  line-height: 1.35;
  font-size: 13px;
}

@media (max-width: 520px) {
  .dash-cta-card .dash-cta-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .dash-cta-card .dash-cta-actions .btn {
    width: 100%;
  }
}

div#plannerWrap {
  height: calc(100vh - 280px);
}

.planner-tooltip {
  position: fixed;
  z-index: 99999;
  max-width: 260px;
  padding: 10px 12px;
  border-radius: 14px;
  font-size: 12px;
  line-height: 1.25;
  color: #fff;
  background: rgba(15, 23, 42, 0.92); /* slate-900 */
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(10px);

  opacity: 0;
  transform: translate3d(0, 6px, 0) scale(0.98);
  transition:
    opacity 0.12s ease,
    transform 0.12s ease;

  pointer-events: none; /* ne akadályozza a hover-t */
  white-space: normal;
}

.planner-tooltip--visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.planner-tooltip__dot {
  display: inline-block;
  width: 4px;
  height: 4px;
  margin: 0 6px 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
}

/* ===== Assign modal redesign ===== */

.modal-card--assign {
  width: min(860px, calc(100vw - 32px));
  max-height: min(86vh, 860px);
  overflow: hidden;
  border-radius: 18px;
}

#assignModal.open .modal-card--assign {
  transform: translateY(0);
}

.am-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 18px 18px 12px 18px;
}

.am-titleRow {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.am-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: #eef6ff;
  border: 1px solid #d6e6ff;
  font-size: 18px;
  flex: 0 0 auto;
}

.am-titleWrap {
  display: grid;
  gap: 8px;
}

.am-title {
  margin: 0;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 800;
}

.am-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.am-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid #e6e8ef;
  background: #f7f8fb;
  color: #2b2f38;
}

.am-pill--status.as-waiting {
  background: #eef6ff;
  border-color: #d6e6ff;
}
.am-pill--status.as-to-approve {
  background: #fff6e6;
  border-color: #ffe1b8;
}
.am-pill--status.as-finished {
  background: #e9fbef;
  border-color: #bfeccc;
}

.am-pill--points {
  background: #fff8e8;
  border-color: #ffe6b8;
}

.am-pill--assignee {
  background: #f2f3f7;
  border-color: #e1e4ee;
}

.am-actions {
  display: flex;
  gap: 8px;
}

.am-iconBtn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid #e6e8ef;
  background: #fff;
  display: grid;
  place-items: center;
  font-size: 16px;
}

.am-divider {
  height: 1px;
  background: #eef0f5;
}

.am-body {
  padding: 14px 18px 16px 18px;
  overflow: auto;
  max-height: calc(86vh - 140px);
}

.am-sectionTitle {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b7280;
  margin: 8px 0 10px;
}

.am-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr 1fr;
}

.am-span2 {
  grid-column: span 2;
}

.am-field {
  display: grid;
  gap: 6px;
}

.am-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 800;
  color: #2b2f38;
}

.am-labelIcon {
  font-size: 14px;
  opacity: 0.9;
}

.am-input,
.am-textarea {
  width: 100%;
  border-radius: 12px;
  border: 1px solid #e6e8ef;
  background: #fff;
  padding: 10px 12px;
  font-size: 14px;
  outline: none;
}

.am-input:focus,
.am-textarea:focus {
  border-color: #b9d7ff;
  box-shadow: 0 0 0 3px rgba(62, 142, 255, 0.12);
}

.am-timeRow {
  display: grid;
  grid-template-columns: 1fr 18px 1fr;
  align-items: center;
  gap: 10px;
}

.am-timeDash {
  text-align: center;
  color: #9aa3b2;
  font-weight: 800;
}

.am-hint {
  font-size: 12px;
  color: #7a8293;
  margin-top: 2px;
}

.am-section {
  margin-top: 14px;
}

.am-readonly {
  border: 1px solid #e6e8ef;
  background: #fafbff;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 14px;
  color: #2b2f38;
}

.am-muted {
  color: #7a8293;
}

.am-textarea {
  min-height: 110px;
  resize: vertical;
}

.am-footer {
  padding: 12px 18px 18px 18px;
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid #eef0f5;
  background: #fff;
}

.am-footerRight {
  display: inline-flex;
  gap: 10px;
  align-items: center;
}

.am-danger {
  border-color: #ffccd1 !important;
  background: #fff1f2 !important;
  color: #b42318 !important;
}

/* Mobile */
@media (max-width: 640px) {
  .modal-card--assign {
    width: calc(100vw - 18px);
    border-radius: 16px;
  }
  .am-grid {
    grid-template-columns: 1fr;
  }
  .am-span2 {
    grid-column: auto;
  }
  .am-timeRow {
    grid-template-columns: 1fr;
  }
  .am-timeDash {
    display: none;
  }
}

/* ================================
   ROUTINE MODAL (Planner) – clean + inline edit
================================ */

/* overlay */
#routineModalPlanner {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.45);
  z-index: 9999;
}
#routineModalPlanner.open {
  display: flex;
}

#routineModalPlannerCard {
  width: min(920px, calc(100vw - 32px));
  max-height: min(82vh, 760px);
  overflow: hidden;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 20px 80px rgba(0, 0, 0, 0.22);
  transform: translateY(10px);
  opacity: 0;
  transition:
    transform 180ms ease,
    opacity 180ms ease;
}
#routineModalPlannerCard.show {
  transform: translateY(0);
  opacity: 1;
}

/* close X */
#routineModalPlannerCard .modal-x {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.03);
  display: grid;
  place-items: center;
  position: absolute;
  top: 12px;
  right: 12px;
}

/* header – ne essen szét */
#routineModalPlannerCard .am-head {
  display: flex;
  align-items: center;
  padding: 18px 54px 14px 18px; /* jobb oldalt hely az X-nek */
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}
#routineModalPlannerCard .am-title-wrap {
  min-width: 0;
  width: 100%;
}
#routineModalPlannerCard .am-title {
  margin: 0;
  font-size: 18px;
  line-height: 1.2;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#routineModalPlannerCard .am-sub {
  margin-top: 8px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
#routineModalPlannerCard .am-pill {
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.03);
  line-height: 1;
  white-space: nowrap;
}
#routineModalPlannerCard .am-pill--muted {
  opacity: 0.8;
}

/* body scroll */
#routineModalPlannerCard .am-body {
  padding: 14px 18px 18px;
  overflow: auto;
  max-height: calc(82vh - 170px);
}

/* list */
.rm-list {
  display: grid;
  gap: 10px;
}

/* card + status stripe */
.rm-card {
  position: relative;
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-left: 3px solid;
  background: #fff;
  overflow: hidden;
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease,
    border-color 0.12s ease;
}
.rm-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  border-color: rgba(0, 0, 0, 0.12);
}

/* row */
.rm-row {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 12px 12px 14px; /* stripe miatt */
}
.rm-left {
  min-width: 0;
  padding-left: 6px;
} /* stripe vizuálisan */
.rm-title {
  font-weight: 800;
  font-size: 14px;
  line-height: 1.2;
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rm-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.rm-chip {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.03);
  line-height: 1;
  white-space: nowrap;
}
.rm-chip--status {
  font-weight: 700;
}
.rm-chip--waiting {
  border-color: rgba(0, 130, 255, 0.22);
  background: rgba(0, 130, 255, 0.08);
}
.rm-chip--to-approve {
  border-color: rgba(245, 158, 11, 0.3);
  background: rgba(245, 158, 11, 0.1);
}
.rm-chip--finished {
  border-color: rgba(34, 197, 94, 0.3);
  background: rgba(34, 197, 94, 0.1);
}

.rm-right {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
.rm-pts {
  font-weight: 800;
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.rm-caret {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.03);
  transition: transform 0.15s ease;
}

/* expand */
.rm-expand {
  display: none;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
  background: rgba(0, 0, 0, 0.015);
}
.rm-card.is-open .rm-expand {
  display: block;
}
.rm-card.is-open .rm-caret {
  transform: rotate(180deg);
}

.rm-expand-inner {
  padding: 12px 12px 14px 14px;
  display: grid;
  gap: 10px;
}

/* inline editor */
.rm-form {
  display: grid;
  gap: 10px;
}
.rm-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.rm-field label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 6px;
  opacity: 0.9;
}
.rm-input,
.rm-select,
.rm-textarea {
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: #fff;
  padding: 10px 10px;
  font-size: 13px;
}
.rm-textarea {
  min-height: 78px;
  resize: vertical;
}

.rm-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
}

/* disabled state (nem waiting) */
.rm-form.is-locked .rm-input,
.rm-form.is-locked .rm-select,
.rm-form.is-locked .rm-textarea {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(0, 0, 0, 0.65);
}

/* bottom actions */
#routineModalPlannerCard .am-actions {
  padding: 12px 18px 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  background: #fff;
}

/* mobile */
@media (max-width: 640px) {
  #routineModalPlannerCard {
    width: calc(100vw - 16px);
    max-height: 88vh;
    border-radius: 16px;
  }
  #routineModalPlannerCard .am-head {
    padding: 14px 54px 12px 14px;
  }
  #routineModalPlannerCard .am-body {
    padding: 12px 14px 14px;
    max-height: calc(88vh - 170px);
  }
  .rm-row {
    padding: 10px 10px 10px 12px;
  }
  .rm-grid {
    grid-template-columns: 1fr;
  }

  #app-route {
    padding-bottom: 80px;
  }
}

/* scroll lock */
body.modal-open {
  overflow: hidden;
}

.rm-status--waiting {
  border-left-color: #fbbf24 !important; /* sárga – elvégzendő */
}

.rm-status--to-approve {
  border-left-color: #3b82f6 !important; /* kék – jóváhagyásra vár */
}

.rm-status--finished {
  border-left-color: #22c55e !important; /* zöld – kész */
}

/* többi státuszra óvatos színek, ha használnád */
.rm-status--rejected {
  border-left-color: #ef4444 !important;
}

.dash-board-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dash-board-mid {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dash-board-bar {
  height: 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.dash-board-bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #60a5fa, #22c55e);
}

.dash-metric {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  white-space: nowrap;
}

.dash-metric-points {
  font-size: 12px;
  opacity: 0.9;
}

/* =========================
   APPROVALS (Rewards + Tasks)
   ========================= */

#view-approvals .card-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* Segmented tabs */
.segmented {
  display: inline-flex;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 999px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.03);
}

.segmented-btn {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
  color: rgba(0, 0, 0, 0.75);
  user-select: none;
}

.segmented-btn:hover {
  background: rgba(0, 0, 0, 0.06);
}

.segmented-btn.is-active {
  background: #111;
  color: #fff;
}

/* Sections */
.approval-section {
  margin-top: 12px;
}

/* Card list */
.approval-card {
  display: flex;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 14px;
  background: #fff;
  margin-bottom: 10px;
}

/*.approval-left {
  width: 64px;
  flex: 0 0 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/*.approval-image {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid rgba(0, 0, 0, 0.1);
}*/

.approval-badge {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.approval-content {
  flex: 1;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 12px;
}

.approval-main {
  flex: 1;
  min-width: 0;
}

.approval-title {
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 6px;
  color: #111;
}

.approval-meta,
.approval-date {
  font-size: 13px;
  color: rgba(0, 0, 0, 0.7);
  margin-top: 2px;
}

.approval-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  min-width: 120px;
}

.approval-points {
  font-weight: 900;
  font-size: 14px;
  color: #111;
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 6px 10px;
  border-radius: 999px;
}

.approval-actions {
  display: flex;
  gap: 8px;
}

/* Buttons */
.approval-actions .btn-approve,
.approval-actions .btn-reject {
  border: 0;
  cursor: pointer;
  border-radius: 12px;
  padding: 9px 10px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}

.approval-actions .btn-approve {
  background: #29b6f6;
  color: #fff;
}

.approval-actions .btn-approve:hover {
  filter: brightness(1.05);
}

.approval-actions .btn-reject {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.85);
  border: 1px solid rgba(0, 0, 0, 0.12);
}

.approval-actions .btn-reject:hover {
  background: rgba(0, 0, 0, 0.1);
}

.approval-actions button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Loader (reuse your existing if you have) */
#view-approvals .card-loader {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px dashed rgba(0, 0, 0, 0.15);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.02);
}

#view-approvals .card-loader-spinner {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.15);
  border-top-color: rgba(0, 0, 0, 0.55);
  animation: ap_spin 0.8s linear infinite;
}

@keyframes ap_spin {
  to {
    transform: rotate(360deg);
  }
}

/* Mobile */
@media (max-width: 520px) {
  #view-approvals .card-head-row {
    align-items: flex-start;
  }

  .approval-card {
    padding: 10px;
  }

  .approval-left {
    width: 100%;
    flex-basis: 56px;
  }

  /*.approval-image,
  .approval-badge {
    width: 48px;
    height: 48px;
    border-radius: 12px;
  }*/

  .approval-content {
    flex-direction: column;
    align-items: stretch;
  }

  .approval-right {
    align-items: flex-start;
    min-width: 0;
    flex-direction: row;
    width: 100%;
  }

  .approval-actions {
    margin-left: auto;
  }

  .approval-actions .btn-approve,
  .approval-actions .btn-reject {
    padding: 10px 10px;
  }

  .approval-content {
    flex-direction: column;
    gap: 12px;
  }

  .approval-right {
    width: 100%;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
  }

  .approval-points {
    flex: 0 0 auto;
    min-width: 54px; /* hogy ne nyomódjon össze */
    margin-bottom: 0px;
  }

  .approval-actions {
    flex: 1 1 auto;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
  }

  .approval-actions button,
  .approval-actions .btn-approve,
  .approval-actions .btn-reject {
    flex: 1 1 0;
    min-width: 0;
    white-space: nowrap;
  }
}

/* APPROVALS TABS – ugyanaz a pill stílus mint a mintád (Bolt/Előzmények) */
#approvals_tabs.segmented {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px;
  border-radius: 999px;
  background: transparent; /* nincs “szürke kapszula” */
  border: 0;
}

#approvals_tabs .segmented-btn {
  appearance: none;
  border: 1px solid #e5e7eb; /* light border */
  background: #ffffff; /* fehér pill */
  cursor: pointer;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 8px 12px;
  border-radius: 999px;

  font-weight: 600;
  font-size: 13px;
  color: #111827; /* sötét szöveg */

  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.05s ease;
}

#approvals_tabs .segmented-btn:hover {
  background: #f9fafb;
  border-color: #d1d5db;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

#approvals_tabs .segmented-btn:active {
  transform: translateY(1px);
}

/* aktív pill – finoman kiemelve, nem fekete */
#approvals_tabs .segmented-btn.is-active {
  background: #f3f4f6;
  border-color: #d1d5db;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

/* lucide ikon méret + szín */
#approvals_tabs .segmented-btn svg,
#approvals_tabs .segmented-icon {
  width: 16px;
  height: 16px;
  display: inline-block;
  color: #6b7280; /* ikon szürkés */
}

#approvals_tabs .segmented-btn.is-active svg {
  color: #111827; /* aktívnál sötétebb ikon */
}

/* mobil kicsit kompaktabb */
@media (max-width: 520px) {
  #approvals_tabs.segmented {
    gap: 8px;
    padding: 4px;
  }
  #approvals_tabs .segmented-btn {
    padding: 8px 10px;
    gap: 6px;
  }
}

.is-hidden {
  display: none !important;
}

.nav-btn,
.bottom-nav-btn {
  position: relative; /* hogy a badge abszolút tudjon ülni */
}

.nav-badge {
  position: absolute;
  top: 6px;
  right: -10px;

  min-width: 18px;
  height: 18px;
  padding: 0 6px;

  border-radius: 999px;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
  font-weight: 700;

  background: #ff3b30; /* iOS red vibe */
  color: white;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* bottom navon kicsit más pozíció kell */
.nav-badge--bottom {
  top: 4px;
  right: 16px;
}

.dash-recent-reward {
  display: flex;
  gap: 12px;
  align-items: center;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
  padding: 10px;
  border-radius: 10px;
}

.dash-recent-reward + .dash-recent-reward {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.dash-recent-reward-img {
  width: 120px;
  height: 120px;
  border-radius: 12px;
  object-fit: cover;
  flex: 0 0 auto;
}

.dash-recent-reward-img--placeholder {
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.04);
  font-size: 18px;
}

.dash-recent-reward-mid {
  flex: 1;
  min-width: 0;
}

.dash-recent-reward-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.dash-recent-reward-name {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-recent-reward-meta {
  margin-top: 4px;
  opacity: 0.75;
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 13px;
}

.dash-recent-reward-right {
  flex: 0 0 auto;
}

.dash-recent-reward-points {
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 999px;
  background: #fef3c7;
  color: #92400e;
}

.dash-reward-status {
  font-size: 12px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.06);
  white-space: nowrap;
}

.dash-reward-status--pending {
  background: rgba(255, 179, 0, 0.18);
}
.dash-reward-status--approved {
  background: rgba(0, 200, 83, 0.16);
}
.dash-reward-status--rejected {
  background: rgba(244, 67, 54, 0.14);
}
.dash-reward-status--fulfilled {
  background: rgba(33, 150, 243, 0.14);
}

.dash-recent-reward-points-container {
  margin-top: 15px;
}

/* --- UI Confirm/Prompt modal only (scoped) --- */
#uiConfirmModal.modal-backdrop,
#uiPromptModal.modal-backdrop {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  /* kicsit prémiumabb háttér */
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  z-index: 9999;
  padding: 16px;
}

#uiConfirmModal .modal-card,
#uiPromptModal .modal-card {
  width: min(520px, 100%);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.25);
  overflow: hidden;

  /* kis anim, hogy ne “csöppenjen” */
  transform: translateY(6px) scale(0.99);
  opacity: 0;
  animation: uiModalIn 140ms ease-out forwards;
}

@keyframes uiModalIn {
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

#uiConfirmModal .modal-header,
#uiPromptModal .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 10px;
}

#uiConfirmModal .modal-header h3,
#uiPromptModal .modal-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.2px;
}

#uiConfirmModal .modal-body,
#uiPromptModal .modal-body {
  padding: 0 18px 16px;
  color: rgba(0, 0, 0, 0.72);
  font-size: 14px;
  line-height: 1.45;
}

#uiConfirmModal .modal-footer,
#uiPromptModal .modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 18px 18px;
}

#uiConfirmModal .ui-modal-close,
#uiPromptModal .ui-modal-close {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 0;
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.55);
  cursor: pointer;
  display: grid;
  place-items: center;
}

#uiConfirmModal .ui-modal-close:hover,
#uiPromptModal .ui-modal-close:hover {
  background: rgba(0, 0, 0, 0.1);
}

#uiPromptModal input,
#uiPromptModal textarea {
  width: 100%;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  outline: none;
  font-size: 14px;
}

#uiPromptModal input:focus,
#uiPromptModal textarea:focus {
  border-color: rgba(0, 0, 0, 0.22);
}

/* gombok: ha van saját .btn-ed, ez csak finoman javít rajta */
#uiConfirmModal .btn,
#uiPromptModal .btn {
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 700;
}

.approvals-grid {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}
.mini-card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  padding: 12px;
}
.mini-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  margin-bottom: 8px;
}

/* === Member modal: permissions block === */
.perm-card {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.02);
}

.perm-card__top {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}

.perm-title {
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
}

.perm-sub {
  margin-top: 2px;
  font-size: 12px;
  opacity: 0.75;
}

.perm-preset {
  min-width: 220px;
  display: grid;
  gap: 6px;
}

.perm-label {
  font-size: 12px;
  opacity: 0.8;
}

.perm-advanced-toggle {
  width: 100%;
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #fff;
  cursor: pointer;
}

.perm-caret {
  opacity: 0.7;
  transform: translateY(-1px);
}

.perm-advanced {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(0, 0, 0, 0.12);
}

.perm-legend {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.pill {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: #fff;
}
.pill--inherit {
  opacity: 0.75;
}
.pill--allow {
}
.pill--deny {
}

.perm-group {
  margin-top: 10px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}

.perm-group__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.02);
  font-weight: 600;
  cursor: pointer;
}

.perm-group__body {
  padding: 10px 12px;
  display: grid;
  gap: 10px;
}

.perm-row {
  display: grid;
  gap: 6px;
}

.perm-row__top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.perm-row__label {
  font-weight: 600;
  font-size: 13px;
}

.perm-row__desc {
  font-size: 12px;
  opacity: 0.75;
  margin-top: 2px;
}

.perm-state {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.perm-chip {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 6px 8px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  cursor: pointer;
  user-select: none;
  font-size: 12px;
  background: #fff;
}

.perm-chip input {
  accent-color: #111;
}

.perm-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

@media (max-width: 640px) {
  .perm-card__top {
    flex-direction: column;
  }
  .perm-preset {
    min-width: unset;
    width: 100%;
  }
}

#permAdvanced {
  display: none;
}
#permAdvanced.is-open {
  display: block;
}

.inline-loader {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.03);
  font-size: 14px;
}

.spinner {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 2px solid rgba(0, 0, 0, 0.15);
  border-top-color: rgba(0, 0, 0, 0.55);
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

span.routine-tasks-toggle__icon svg {
  width: 18px;
}

/* =========================
   RESET PASSWORD MODAL
   ========================= */

#reset-overlay {
  position: fixed;
  inset: 0;
  background: rgba(240, 247, 250, 0.85);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.bm-login-modal {
  width: 100%;
  max-width: 420px;
  background: #fff;
  border-radius: 20px;
  padding: 28px 28px 24px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);
}

.bm-login-modal .logo {
  margin-bottom: 12px;
}

.bm-login-modal .logo img {
  height: 42px;
}

.bm-login-modal h2 {
  font-size: 20px;
  font-weight: 700;
  margin: 10px 0 6px;
  color: #0f172a;
}

.bm-login-modal p {
  font-size: 14px;
  color: #64748b;
  margin-bottom: 18px;
}

/* ===== fields ===== */

.bm-field {
  margin-bottom: 12px;
}

.bm-field input {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  font-size: 14px;
  background: #f8fafc;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}

.bm-field input:focus {
  outline: none;
  border-color: #38bdf8;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25);
}

.bm-field input[disabled],
.bm-field input[readonly] {
  background: #f1f5f9;
  color: #64748b;
  cursor: not-allowed;
}

/* ===== buttons ===== */

.bm-btn-primary {
  width: 100%;
  height: 44px;
  margin-top: 6px;
  border-radius: 14px;
  border: none;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  background: linear-gradient(135deg, #38bdf8, #0ea5e9);
  color: #fff;
  transition:
    transform 0.05s ease,
    box-shadow 0.15s ease;
}

.bm-btn-primary:hover {
  box-shadow: 0 10px 25px rgba(14, 165, 233, 0.35);
}

.bm-btn-primary:active {
  transform: translateY(1px);
}

.bm-btn-secondary {
  width: 100%;
  height: 42px;
  margin-top: 8px;
  border-radius: 14px;
  border: none;
  background: #e5e7eb;
  color: #334155;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.bm-btn-secondary:hover {
  background: #d1d5db;
}

/* ===== QUICK SETUP INLINE (no modal) ===== */
.dash-quicksetup-card .qs-inline {
  margin-top: 14px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  padding-top: 14px;

  /* collapsed by default */
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-4px);
  transition:
    max-height 260ms ease,
    opacity 200ms ease,
    transform 200ms ease;
}

.dash-quicksetup-card.is-open .qs-inline {
  max-height: 2400px; /* elég nagy, hogy minden lépés beleférjen */
  opacity: 1;
  transform: translateY(0);
}

.qs-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
  width: 100%;
}

.qs-step {
  padding: 8px 10px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  background: rgba(0, 0, 0, 0.05);
  color: rgba(0, 0, 0, 0.72);
  user-select: none;
}

.qs-step--active {
  background: rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.9);
  font-weight: 700;
}

.qs-body {
  padding: 6px 0 0 0;
  width: 100%;
}

.qs-h3 {
  margin: 6px 0 4px 0;
  font-size: 16px;
}

.qs-muted {
  margin: 0 0 10px 0;
  font-size: 13px;
}

.qs-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 720px) {
  .qs-choice-grid {
    grid-template-columns: 1fr;
  }
}

.qs-choice {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  padding: 12px;
  display: flex;
  gap: 10px;
  cursor: pointer;
  background: #fff;
}

.qs-choice.is-selected {
  border-color: rgba(0, 0, 0, 0.18);
  background: rgba(0, 0, 0, 0.03);
}

.qs-choice-emoji {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.06);
  display: grid;
  place-items: center;
  font-size: 18px;
  flex: 0 0 auto;
}

.qs-choice-main p {
  margin: 2px 0 0 0;
}

.qs-members {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.qs-member-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 0.8fr;
  gap: 10px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.03);
}

@media (max-width: 900px) {
  .qs-member-row {
    grid-template-columns: 1fr;
  }
}

.qs-field .qs-label {
  font-size: 12px;
  opacity: 0.7;
  margin-bottom: 6px;
}

.qs-member-name {
  font-weight: 800;
}

.qs-input,
.qs-select {
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  padding: 10px 12px;
  background: #fff;
}

.qs-inline {
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}

.qs-link {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  font-weight: 700;
}

.qs-pets,
.qs-packs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 720px) {
  .qs-pets,
  .qs-packs {
    grid-template-columns: 1fr;
  }
}

.qs-checkcard,
.qs-pack {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  padding: 12px;
  background: #fff;
  cursor: pointer;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  align-items: flex-start;
}

.qs-checkcard.is-on,
.qs-pack.is-on {
  border-color: rgba(0, 0, 0, 0.18);
  background: rgba(0, 0, 0, 0.03);
}

.qs-checkcard-left {
  display: flex;
  gap: 10px;
  align-items: center;
}

.qs-checkcard-emoji {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.06);
  display: grid;
  place-items: center;
  font-size: 18px;
  flex: 0 0 auto;
}

.qs-check {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 12px;
  user-select: none;
}

.qs-summary {
  margin-top: 12px;
  border-radius: 14px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.03);
}

.qs-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.qs-tip {
  margin-top: 8px;
  font-size: 12px;
}

.qs-footer {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  width: 100%;
}

.qs-panel-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.qs-panel-title-row .qs-h3 {
  margin: 0; /* ha eddig volt top/bottom margin */
  line-height: 1.2;
}

@media (max-width: 520px) {
  .qs-panel-title-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .qs-panel-title-row .btn {
    width: 100%;
  }
}

.qs-av-grid input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

.qs-checkcard {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  transition: all 0.15s ease;
}

.qs-checkcard.is-on {
  border-color: #3b82f6;
  background: #eff6ff;
}

.qs-checkcard:hover {
  border-color: #93c5fd;
}

#qsPets .qs-checkcard > input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}

.qs-preview-head {
  margin: 10px 0 14px;
}

.qs-routine-card {
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 14px;
  padding: 14px;
  background: #fff;
  margin-bottom: 12px;
}

.qs-routine-card.is-disabled {
  opacity: 0.55;
}

.qs-routine-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.qs-routine-left {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.qs-routine-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
}

.qs-routine-title {
  font-size: 15px;
  font-weight: 800;
}

.qs-routine-chips {
  margin-top: 8px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.qs-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.05);
  font-size: 12px;
  font-weight: 700;
}

.qs-routine-taskchips {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.qs-taskchip {
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.04);
  font-size: 12px;
  cursor: pointer;
  user-select: none;
}

.qs-routine-right {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.qs-iconbtn {
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: #fff;
  border-radius: 10px;
  padding: 6px 10px;
  cursor: pointer;
}

.qs-mini-check input {
  width: 18px;
  height: 18px;
}

.qs-routine-expand {
  margin-top: 12px;
  border-top: 1px dashed rgba(0, 0, 0, 0.12);
  padding-top: 10px;
}

.qs-task-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
}

.qs-task-row.is-excluded {
  opacity: 0.5;
  text-decoration: line-through;
}
.qs-task-name {
  font-weight: 700;
  font-size: 13px;
}

/* Task store: locked CTA ne legyen zöld */
.taskstore-card--locked .taskstore-btn {
  background: #f3f4f6 !important; /* light gray */
  color: #111827 !important; /* dark text */
  border: 1px solid #e5e7eb !important; /* subtle border */
  box-shadow: none !important;
  cursor: not-allowed;
  opacity: 1; /* ne fakuljon el túlzottan */
}

.taskstore-card--locked .taskstore-btn:hover,
.taskstore-card--locked .taskstore-btn:active {
  background: #f3f4f6 !important;
  transform: none !important;
}

/* opcionális: lock ikon és szöveg picit "badge" feeling */
.taskstore-card--locked .taskstore-btn {
  font-weight: 600;
}

.qs-routine-card.is-added {
  opacity: 0.55;
  filter: grayscale(0.4);
}

.qs-added-badge {
  font-size: 12px;
  font-weight: 600;
  opacity: 0.8;
  margin-top: 6px;
}

/* =========================
   QUICKSETUP – STEP 5 PACKS
   Checkbox elrejtése + kijelölés mint a Pets kártyák
   ========================= */

/* 1) Checkbox ne látszódjon a rutincsomag kártyákon (STEP 5) */
.qs-panel[data-panel="5"] .qs-mini-check input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}

/* Ha akarod: maga a mini-check container se látszódjon (csak a JS-nek marad ott az input) */
.qs-panel[data-panel="5"] .qs-mini-check {
  width: 1px;
  height: 1px;
  overflow: hidden;
  position: relative;
}

/* 2) Kártya hover ugyanaz a feeling, mint a checkcardnál */
.qs-panel[data-panel="5"] .qs-routine-card {
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease;
}

.qs-panel[data-panel="5"] .qs-routine-card:hover {
  border-color: #93c5fd; /* mint a qs-checkcard hover */
}

/* 3) Kijelölés: modern böngészőkben (Chrome) :has() alapján automatikusan */
.qs-panel[data-panel="5"]
  .qs-routine-card:has(.qs-mini-check input[type="checkbox"]:checked) {
  border-color: #3b82f6; /* mint a qs-checkcard.is-on */
  background: #eff6ff; /* mint a qs-checkcard.is-on */
}

/* 4) Ha van disabled/already-added állapot, maradjon “szürkés” */
.qs-panel[data-panel="5"] .qs-routine-card.is-added {
  /* nálad már van ilyen: opacity + grayscale :contentReference[oaicite:2]{index=2} */
  /* itt csak biztosítjuk, hogy ne legyen erős kék kijelölés */
  border-color: rgba(0, 0, 0, 0.12);
  background: #fff;
}

/* Ha mégis checked + is-added együtt előfordul, ne kékítse be */
.qs-panel[data-panel="5"]
  .qs-routine-card.is-added:has(.qs-mini-check input[type="checkbox"]:checked) {
  border-color: rgba(0, 0, 0, 0.12);
  background: #fff;
}

/* Step5: duplikáció elkerülése blokk kuka (már lockolunk anyway) */
.qs-panel[data-panel="5"] .qs-check {
  display: none !important;
}

/* rewards thumbnail */
.qs-reward-thumb {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  overflow: hidden;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
}
.qs-reward-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.qs-reward-thumb .qs-reward-emoji {
  font-size: 20px;
}

div#qsRewards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.qs-chip svg {
  width: 15px;
}

.modal-footer {
  padding: 0 16px 16px 16px;
  text-align: right;
}

/* ===========================
   SHOPPING – FULL HEIGHT + MOBILE TABS
   =========================== */

/* a shopping view töltsön ki egy "oldalnyi" magasságot az app-rooton belül */
#view-shopping {
  min-height: calc(
    100vh - 140px
  ); /* ha kell, finomhangoljuk 120–180px között */
}

/* desktop: két hasáb nyúljon le, kártyák legyenek egy magasságban */
#view-shopping .shopping-layout {
  align-items: stretch;
}

/* kártyák: legyen belső flex layout, hogy a lista tudjon nőni, footer lent maradjon */
#view-shopping .shopping-main,
#view-shopping .shopping-history {
  display: flex;
  flex-direction: column;
  min-height: 0; /* fontos: belső scrollhoz */
}

/* a listák ne 320px-ek legyenek, hanem töltsék ki a kártyát és görgessenek */
#view-shopping .shopping-list,
#view-shopping .shopping-history-list {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none; /* felülírja a korábbi max-height:320px-et */
  overflow-y: auto;
}

/* footer mindig alul */
#view-shopping .shopping-footer {
  margin-top: auto;
  position: sticky;
  bottom: 0;
  background: #ffffff;
  padding-top: 12px;
}

/* ---------- MOBILE TABS UI ---------- */
.shopping-mobile-tabs {
  display: none; /* desktopon rejtve */
  gap: 6px;
  padding: 6px;
  border-radius: 999px;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
}

.shopping-tab {
  flex: 1;
  border: none;
  background: transparent;
  padding: 10px 12px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 13px;
  color: #6b7280;
  cursor: pointer;
  white-space: nowrap;
}

.shopping-tab.is-active {
  background: #ffffff;
  color: #111827;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

/* mobilon: tabok látszanak + csak az aktív panel */
@media (max-width: 900px) {
  .shopping-mobile-tabs {
    display: flex;
  }

  /* alap: history rejtve mobilon */
  #view-shopping .shopping-history {
    display: none;
  }

  /* ha history tab aktív: listát rejtsd, historyt mutasd */
  #view-shopping.shopping-tab-history .shopping-main {
    display: none;
  }
  #view-shopping.shopping-tab-history .shopping-history {
    display: flex;
  }

  /* mobilon ne legyen túl magas "két kártya egymás alatt" érzés */
  #view-shopping {
    min-height: calc(100vh - 120px);
  }
}

h2#stm-title {
  padding: 0;
  margin: 0;
}

/* ===========================
   SHOPPING – MOBILE FIXES
   =========================== */

@media (max-width: 900px) {
  /* 1) Mobilon ne duplázzuk a tab-címet: rejtsük a kártya headereket */
  .shopping-main-header,
  .shopping-history-header {
    display: none !important;
  }

  /* 2) A kártyák töltsék ki a rendelkezésre álló magasságot,
        és a belső lista kapja a scrollt */
  #view-shopping .shopping-main,
  #view-shopping .shopping-history {
    min-height: calc(100vh - 220px); /* header + padding + bottom nav + tabs */
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  /* A listák mindig nőjenek, és scrollozzanak, ha túl hosszú */
  #view-shopping .shopping-list,
  #view-shopping .shopping-history-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    max-height: none;
  }

  /* Üres állapot is töltse ki a helyet (hogy "leérjen" a kártya) */
  #shopListEmpty,
  #shopHistoryEmpty {
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
    padding: 14px 0;
  }

  /* Ha üres állapot látszik, legyen kényelmesen olvasható (nem kötelező) */
  #shopListEmpty.dash-empty,
  #shopHistoryEmpty.dash-empty {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* Footer maradjon alul (nálad már sticky-vel jó, ez csak biztosíték) */
  #view-shopping .shopping-footer {
    margin-top: auto;
  }
}

/* ===========================
   SHOPPING TRIP MODAL – SCROLLABLE ITEMS
   =========================== */

/* a dialog legyen "oszlopos", és ne tudjon kilógni a viewportból */
.shopping-trip-modal .stm-dialog {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 140px);
  overflow: hidden; /* a scroll a .stm-items-ben lesz */
}

/* csak a tétel lista görgessen, a summary+add blokk maradjon mindig lent */
.shopping-trip-modal .stm-items {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  margin-top: 18px; /* nálad is ez van, oké */
}

/* ezek mindig látszódjanak (nem scrolloznak el) */
.shopping-trip-modal .stm-summary,
.shopping-trip-modal .stm-add-wrapper {
  flex: 0 0 auto;
}

/* mobilon legyen kényelmesebb méretezés (fuller modal érzés) */
@media (max-width: 900px) {
  .shopping-trip-modal .stm-dialog {
    margin: 14px auto;
    width: calc(100% - 24px);
    max-width: 520px;
    max-height: calc(100vh - 120px);
  }
}

/* ===========================
   SHOPPING – MOBILE TAB VISIBILITY (override-proof)
   =========================== */
@media (max-width: 900px) {
  /* Default: LIST tab -> history rejtve */
  #view-shopping:not(.shopping-tab-history) .shopping-history {
    display: none !important;
  }
  #view-shopping:not(.shopping-tab-history) .shopping-main {
    display: flex !important;
  }

  /* HISTORY tab -> list rejtve */
  #view-shopping.shopping-tab-history .shopping-main {
    display: none !important;
  }
  #view-shopping.shopping-tab-history .shopping-history {
    display: flex !important;
  }
}

/* ===========================
   SHOPPING HISTORY – MONTH NAV + SUMMARY
   =========================== */

.shopping-history-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
  margin-bottom: 10px;
}

.shop-month-btn {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: #fff;
  font-weight: 700;
  cursor: pointer;
}

.shop-month-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.shop-month-label {
  min-width: 160px;
  text-align: center;
  font-weight: 700;
  color: #111827;
}

/* a kártyán belül: lista görget, summary lent fixen látszik */
.shopping-history {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.shopping-history-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.shopping-history-summary {
  flex: 0 0 auto;
  position: sticky;
  bottom: 0;
  background: #fff;
  border-top: 1px solid #eef2f7;
  padding: 12px 6px 6px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.shop-sum-title {
  font-weight: 700;
  color: #111827;
}

.shop-sum-total {
  font-weight: 800;
  color: #111827;
}

.shop-sum-missing {
  margin-left: 8px;
  color: #6b7280;
  font-size: 12px;
}

/* mobilon a header rejtve van nálad – a controls+summary maradjon */
@media (max-width: 900px) {
  .shopping-history-controls {
    margin-top: 0;
  }

  .shop-month-label {
    min-width: 140px;
  }
}

.shopping-history-controls {
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;

  margin: 8px 0 12px;
  padding: 6px 8px;

  border-radius: 12px;
  background: #f7f9fb;
}

/* Nyilak */
.shop-month-btn {
  width: 36px;
  height: 36px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 10px;
  border: 1px solid #e6e6e6;
  background: #fff;

  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

/* Disabled állapot */
.shop-month-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

/* Dátum középen */
.shop-month-label {
  text-align: center;
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
}

/* ===== Dashboard: Activity feed ===== */
.dash-activity-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dash-activity-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.03);
  border: 1px solid rgba(15, 23, 42, 0.06);
}

.dash-activity-left {
  display: flex;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
}

.dash-activity-avatar {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  background: rgba(59, 130, 246, 0.14);
  color: rgba(30, 64, 175, 1);
  flex: 0 0 auto;
  user-select: none;
}

.dash-activity-text {
  min-width: 0;
}

.dash-activity-line {
  font-size: 13px;
  color: rgba(15, 23, 42, 0.9);
  line-height: 1.25;
}

.dash-activity-line strong {
  font-weight: 800;
}

.dash-activity-sub {
  margin-top: 4px;
  font-size: 12px;
  color: rgba(15, 23, 42, 0.55);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.dash-activity-time {
  white-space: nowrap;
}

.dash-activity-xp {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(250, 204, 21, 0.16);
  border: 1px solid rgba(250, 204, 21, 0.25);
  font-weight: 700;
}

.dash-activity-right {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ===== ACTIVITY: timeline (connected) ===== */

.dash-activity-list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;

  /* a timeline sáv helye */
  padding-left: 52px; /* több hely kell a vonal+pötty+connector miatt */
}

/* a fő függőleges vonal */
.dash-activity-list::before {
  content: "";
  position: absolute;
  left: 22px; /* timeline x */
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: rgba(15, 23, 42, 0.08);
  border-radius: 999px;
}

/* kártya */
.dash-activity-item {
  position: relative;
  padding: 14px 14px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease,
    background 0.12s ease;
}

.dash-activity-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
  background: rgba(15, 23, 42, 0.03);
}

/* a pötty a timeline-on (a kártyához kötve) */
.dash-activity-item::before {
  content: "";
  position: absolute;
  left: -35px; /* padding-left-hez igazítva */
  top: 20px; /* a kártya tetejétől – finomhangolható */
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.9);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.14);
}

/* ✅ a connector: vízszintes vonal pötty → kártya */
.dash-activity-item::after {
  content: "";
  position: absolute;
  top: 24px; /* pötty közepe */
  right: 100%; /* a kártya bal szélétől indul */
  width: 28px; /* menjen ki a timeline-ig */
  height: 2px;
  background: rgba(15, 23, 42, 0.08);
  border-radius: 999px;
  margin-right: 0px; /* kis rés a kártya és a vonal között */
}

/* első elem kiemelése (frissebb) */
.dash-activity-item:first-child::before {
  background: rgba(34, 197, 94, 0.95);
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.14);
}

/* avatar + szöveg */
.dash-activity-left {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  min-width: 0;
}

.dash-activity-avatar {
  width: 30px;
  height: 30px;
  border-radius: 12px;
  font-weight: 900;
  background: linear-gradient(
    180deg,
    rgba(59, 130, 246, 0.2),
    rgba(59, 130, 246, 0.1)
  );
  border: 1px solid rgba(59, 130, 246, 0.22);
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.1);
  flex: 0 0 auto;
}

.dash-activity-line {
  font-size: 13.5px;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.dash-activity-sub {
  margin-top: 6px;
  font-size: 12px;
  color: rgba(15, 23, 42, 0.55);
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

/* idő chip + lucide ikon */
.dash-activity-time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.04);
  border: 1px solid rgba(15, 23, 42, 0.06);
}

.dash-activity-time .dash-activity-clock {
  width: 14px;
  height: 14px;
  stroke-width: 2;
  opacity: 0.7;
}

.dash-activity-item[data-me="1"]::before {
  background: rgba(34, 197, 94, 0.95);
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.14);
}

/* ===== Dashboard Spend Compare ===== */
.dash-spend-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-top: 4px;
}

.dash-spend-amount-label {
  font-size: 12px;
  color: rgba(15, 23, 42, 0.55);
}

.dash-spend-amount-value {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin-top: 2px;
}

.dash-spend-delta {
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
}

.dash-spend-delta-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 900;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(15, 23, 42, 0.03);
}

.dash-spend-delta-pill.is-up {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.2);
}

.dash-spend-delta-pill.is-down {
  background: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.2);
}

.dash-spend-delta-sub {
  font-size: 12px;
  color: rgba(15, 23, 42, 0.55);
}

.dash-spend-bars {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dash-spend-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.dash-spend-row-title {
  font-size: 12px;
  color: rgba(15, 23, 42, 0.62);
  font-weight: 700;
}

.dash-spend-row-number {
  font-size: 12px;
  color: rgba(15, 23, 42, 0.72);
  font-weight: 800;
}

.dash-spend-bar {
  height: 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.06);
  overflow: hidden;
}

.dash-spend-fill {
  height: 100%;
  border-radius: 999px;
  width: 0%;
  transition: width 0.25s ease;
}

.dash-spend-fill--now {
  background: linear-gradient(90deg, #60a5fa, #22c55e);
}

.dash-spend-fill--prev {
  background: rgba(59, 130, 246, 0.35);
}

.dash-spend-foot {
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* ===== Dashboard: Today suggestions ===== */
.dash-suggest-sub {
  margin-top: 4px;
  color: rgba(15, 23, 42, 0.55);
  font-size: 13px;
}

.dash-suggest-list {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dash-suggest-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.06);
  background: #fff;
}

.dash-suggest-left {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dash-suggest-title {
  font-weight: 900;
  letter-spacing: -0.01em;
  font-size: 13.5px;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.dash-suggest-title .dash-suggest-emoji {
  flex: 0 0 auto;
}

.dash-suggest-title .dash-suggest-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-suggest-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
  color: rgba(15, 23, 42, 0.55);
}

.dash-suggest-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.04);
  border: 1px solid rgba(15, 23, 42, 0.06);
  font-weight: 800;
}

.dash-suggest-footer {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
}

.dash-suggest-btn {
  padding: 10px 12px;
}

.dash-suggest-clock {
  width: 14px;
  height: 14px;
  stroke-width: 2;
  opacity: 0.75;
}

/* ===== Goal: collapsible recent rewards ===== */
.dash-goal-recent {
  margin-top: 10px;
}

.dash-goal-recent-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.65);
  cursor: pointer;
}

.dash-goal-recent-btn-left {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
}

.dash-goal-recent-icon {
  display: inline-flex;
}

.dash-goal-recent-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 18px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.18);
}

.dash-goal-recent-chevron {
  width: 18px;
  height: 18px;
  stroke-width: 2;
  opacity: 0.7;
  transition: transform 0.18s ease;
}

.dash-goal-recent-btn[aria-expanded="true"] .dash-goal-recent-chevron {
  transform: rotate(180deg);
}

.dash-goal-recent-panel {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
}

.dash-goal-recent-actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}

.dash-goal-recent-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* a listában a meglévő reward row stílusait újrahasználjuk */
.dash-goal-recent-list .dash-recent-reward {
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 14px;
  padding: 10px;
}

/* opcionális: a régi külön kártyát elrejtjük */
.recent-rewards-sections {
  display: none !important;
}

/* ✅ goal kártya tudjon wrap-elni, hogy lehessen alul full width blokk */
.dash-goal {
  flex-wrap: wrap;
  align-items: flex-start; /* így az alul lévő rész szépen ül */
}

/* a két oszlop maradjon két oszlop (desktopon) */
.dash-goal-left {
  flex: 1 1 55%;
  min-width: 320px;
}
.dash-goal-right {
  flex: 1 1 45%;
  min-width: 260px;
}

/* ✅ recent blokk teljes szélességben alul */
.dash-goal-recent--full {
  flex: 1 1 100%;
  width: 100%;
  margin-top: 12px;
}

/* panel kis elválasztó, hogy “alul külön szekció” érzés legyen */
.dash-goal-recent--full .dash-goal-recent-panel {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
}

/* ===== Goal layout: stable grid (prevents progress shift) ===== */
.dash-goal {
  display: grid;
  grid-template-columns: 1fr 360px; /* bal + jobb */
  gap: 16px;
  align-items: center;
}

/* bal/jobb blockok ne flexeljenek szét */
.dash-goal-left,
.dash-goal-right {
  min-width: 0;
}

/* recent blokk teljes szélességben alul */
.dash-goal-recent--full {
  grid-column: 1 / -1;
  width: 100%;
  margin-top: 6px;
}

/* mobilon egymás alá */
@media (max-width: 900px) {
  .dash-goal {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .dash-goal-recent--full {
    margin-top: 10px;
  }

  .dash-goal-recent--full .dash-goal-recent-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* ===== Milestone: gold after 5 days ===== */
.dash-ach-card.is-gold .dash-progress-fill {
  background: rgba(250, 204, 21, 0.95) !important; /* arany */
}

.dash-ach-card.is-gold .dash-ach-chip {
  background: rgba(250, 204, 21, 0.14);
  border: 1px solid rgba(250, 204, 21, 0.22);
}

/* ===== Milestone: perfect week highlight (7/7) ===== */
.dash-ach-card.is-perfect {
  border-color: rgba(250, 204, 21, 0.45) !important;
  box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.1);
}

.dash-ach-card.is-perfect .dash-ach-title {
  font-weight: 900;
}

/* === FIX: Planner mobile top buttons alignment === */
@media (max-width: 820px) {
  .ph-top-mobile {
    display: flex;
    align-items: center;
    justify-content: center; /* vagy space-between, ha azt akarod */
    gap: 8px;
    flex-wrap: nowrap; /* ha kell törés: tedd wrap-ra */
    text-align: initial; /* ne baseline/center text igazítással trükközzön */
  }

  .ph-top-mobile .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    margin: 0;
  }

  /* SVG/ikon baseline bug ellen */
  .ph-top-mobile svg,
  .ph-top-mobile i {
    display: block;
  }
}

/* === Routines toolbar – mobile layout fix === */
@media (max-width: 820px) {
  .routines-toolbar__row {
    display: flex;
    flex-direction: column;
    gap: 0px;
    width: 100%;
  }

  /* kereső teljes szélesség */
  .routines-toolbar__search {
    width: 100%;
    flex: 0 0 auto;
  }

  .routines-toolbar__search input,
  .routines-toolbar__search select {
    width: 100%;
  }

  /* filterek alatta, több sorban */
  .routines-toolbar__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
  }

  .routines-toolbar__filters > * {
    flex: 1 1 auto; /* szép egyenletes gombok */
    min-width: 120px; /* ne legyen túl kicsi */
  }
}

@media (max-width: 820px) {
  /* filterek: 3 egymás mellett */
  .routines-toolbar__filters {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
  }

  /* a filter "mezők" ne lógjanak ki */
  .routines-toolbar__filters select,
  .routines-toolbar__filters .select,
  .routines-toolbar__filters .field,
  .routines-toolbar__filters > * {
    width: 100%;
    min-width: 130px;
  }
}

/* extra biztonság: nagyon kicsi mobilokon törjön 2 oszlopra */
@media (max-width: 420px) {
  .routines-toolbar__filters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .routines-toolbar__filters select,
  .routines-toolbar__filters .select,
  .routines-toolbar__filters .field,
  .routines-toolbar__filters > * {
    width: 100%;
    min-width: 120px;
  }
}

/* === Quick setup card: mobile fixed height + inner scroll === */
@media (max-width: 820px) {
  /* maga a kártya ne nőjön ki a képernyőből */
  #dashQuickSetupCard.dash-quicksetup-card {
    max-height: calc(100dvh - 140px); /* állítható */
    overflow: hidden; /* a belső fog scrollozni */
    display: flex;
    flex-direction: column;
  }

  /* ha a header/action rész nagy, ne zsugorodjon össze */
  #dashQuickSetupCard .dash-card-head,
  #dashQuickSetupCard .dash-quicksetup-text,
  #dashQuickSetupCard .dash-quicksetup-actions {
    flex: 0 0 auto;
  }

  /* az expandable rész töltse ki a maradék helyet, és scrollozzon */
  #dashQuickSetupCard #qsInlineWrap {
    flex: 1 1 auto;
    min-height: 0; /* IMPORTANT: különben nem működik rendesen a belső scroll */
    overflow: hidden; /* a body fog scrollozni */
    display: flex;
    flex-direction: column;
  }

  /* a lépések (stepper) maradhat felül */
  #dashQuickSetupCard #qsSteps {
    flex: 0 0 auto;
  }

  /* a tényleges tartalom scrollozzon */
  #dashQuickSetupCard .qs-body {
    flex: 1 1 auto;
    min-height: 0; /* IMPORTANT */
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px; /* hogy ne tapadjon a footerhez */
  }

  /* footer maradjon lent (nem scrollozik el) */
  #dashQuickSetupCard .qs-footer {
    flex: 0 0 auto;
  }

  /* kért plusz: rewards 2 oszlop mobilon */
  div#qsRewards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  #dashQuickSetupCard .qs-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
  }

  #dashQuickSetupCard .qs-footer .btn {
    min-width: 96px; /* hogy ne legyenek túl picik */
  }
}

/* === Modal footer mobile UX fix (Tasks + Routines) === */
@media (max-width: 820px) {
  .modal-footer .btn {
    flex: 0 0 auto;
    min-width: 110px;
    height: 44px; /* mobile tap size */
    padding: 0 16px;
    width: 50%;
  }

  .reward-store-list {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

/* === Quick Setup: DESKTOP fixed-height card + inner scroll (mobile unchanged) === */
@media (min-width: 821px) {
  /* csak amikor nyitva van */
  #dashQuickSetupCard.dash-quicksetup-card.is-open {
    max-height: calc(100dvh - 220px); /* finomhangolható */
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  /* felső részek ne scrollozzanak el */
  #dashQuickSetupCard.is-open .dash-card-head,
  #dashQuickSetupCard.is-open .dash-quicksetup-text,
  #dashQuickSetupCard.is-open .dash-quicksetup-actions {
    flex: 0 0 auto;
  }

  /* az expandable rész töltse ki a helyet */
  #dashQuickSetupCard.is-open #qsInlineWrap {
    flex: 1 1 auto;
    min-height: 0; /* IMPORTANT */
    overflow: hidden; /* a body fog scrollozni */
    display: flex;
    flex-direction: column;
  }

  /* stepper felül fix */
  #dashQuickSetupCard.is-open #qsSteps {
    flex: 0 0 auto;
  }

  /* itt scrollozzon a tartalom (Step1-5, benne a rewardok is) */
  #dashQuickSetupCard.is-open .qs-body {
    flex: 1 1 auto;
    min-height: 0; /* IMPORTANT */
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding-right: 6px; /* scrollbar ne takarja a kártyákat */
  }

  /* footer lent fix */
  #dashQuickSetupCard.is-open .qs-footer {
    flex: 0 0 auto;
  }
}

.reward-store-added {
  opacity: 0.65;
  cursor: default;
}
.reward-store-card.is-added {
  opacity: 0.95;
}

div#no-space-msg {
  margin-bottom: 15px;
}

button#no-space-accept-invite-btn {
  margin-bottom: 10px;
}

/* Shopping finish modal – footer buttons side-by-side on mobile */
@media (max-width: 520px) {
  #shopping-finish-modal .modal-footer {
    display: flex;
    flex-direction: row;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
  }

  #shopping-finish-modal .modal-footer .btn {
    flex: 1 1 0;
    width: auto; /* fontos: ne legyen 100% */
    min-width: 0;
  }

  .dash-recent-reward-img {
    width: 60px;
    height: 60px;
  }
}

#plMobileFiltersDoneBtn {
  background-color: #0ea5e9 !important;
  border-color: #0ea5e9 !important;
  color: #ffffff !important;
  width: 100%;
}

#plMobMembers {
  min-height: 160px;
  font-size: 16px;
  border-radius: 5px; /* iOS zoom fix */
}

#plMobMembers option {
  min-height: 36px;
  display: flex;
  align-items: center;
}

/* =========================
   BILLING LAYOUT
========================= */

.billing-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.billing-card2--full {
  grid-column: 1 / -1;
}

/* =========================
   SUBSCRIPTIONS
========================= */

.billing-sublist-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.billing-sublist-title {
  font-weight: 600;
  font-size: 15px;
}

.billing-sublist {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sub-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-radius: 14px;
  background: #f9fafb;
  border: 1px solid #eef1f4;
}

.sub-left {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sub-title {
  font-weight: 600;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sub-meta {
  font-size: 13px;
  color: #6b7280;
  display: flex;
  gap: 8px;
}

/* =========================
   STATUS PILLS
========================= */

.billing-pill {
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 999px;
  font-weight: 600;
}

.billing-pill--ok {
  background: #e8f8ef;
  color: #0f8a4c;
}

.billing-pill--warn {
  background: #fff4e5;
  color: #b45309;
}

.billing-pill--bad {
  background: #fdecec;
  color: #b91c1c;
}

.billing-pill--neutral {
  background: #eef1f4;
  color: #374151;
}

/* =========================
   HINT BOX
========================= */

.billing-hint {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fff7ed;
  color: #92400e;
  font-size: 13px;
  border: 1px solid #fde68a;
  margin-bottom: 15px;
}

/* =========================
   INVOICES
========================= */

.billing-invoices2 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* =========================
   ACCORDION (Billing profile)
========================= */

.billing-accordion {
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.billing-accordion-left {
  display: flex;
  gap: 12px;
  align-items: center;
}

.billing-accordion-title {
  font-weight: 600;
}

.billing-accordion-sub {
  font-size: 13px;
  color: #6b7280;
}

.billing-accordion-chevron {
  font-size: 18px;
  color: #6b7280;
}

.billing-accordion-panel {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed #e5e7eb;
}

/* =========================
   BILLING PROFILE FORM
========================= */

.billing-profile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
}

.billing-field--wide {
  grid-column: 1 / -1;
}

.profile-label {
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  margin-bottom: 4px;
  display: block;
}

.profile-input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  font-size: 14px;
}

.profile-input:disabled {
  color: #6b7280;
}

.billing-actions {
  display: flex;
  gap: 8px;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 900px) {
  .billing-grid2 {
    grid-template-columns: 1fr;
  }
}

/* Accordion header fix */
.billing-accordion {
  width: 100%;
  border: none;
  background: transparent;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0; /* a dash-card adja a paddingot */
}

.billing-accordion-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1; /* ✅ kitölti a teret */
  min-width: 0; /* ✅ ne törje szét */
}

.billing-accordion-left > div {
  min-width: 0; /* ✅ hosszú szöveg ne tolja ki */
}

.billing-accordion-title {
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
}

.billing-accordion-sub {
  font-size: 13px;
  color: #6b7280;
  line-height: 1.2;
}

.billing-accordion-chevron {
  flex-shrink: 0; /* ✅ ne nyomódjon össze */
  width: 32px;
  height: 32px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 999px;
  background: #f3f4f6;
  color: #6b7280;
  font-size: 16px;
}

.billing-lock-banner {
  position: sticky;
  top: 65px;
  z-index: 1;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: #fff3cd;
  border-bottom: 1px solid #ffe69c;
  color: #664d03;
}
.billing-lock-banner__left {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.billing-lock-banner__right {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* Billing profile nudge – warning style */
.dash-card--warning {
  background: linear-gradient(135deg, #fff8e1 0%, #fff3cd 100%);
  border: 1px solid #ffe8a1;
}

/* ===== Billing Space cards ===== */
.space-bill-card {
  border: 1px solid #eef1f3;
  border-radius: 14px;
  padding: 14px;
  background: #fff;
  margin-bottom: 12px;
}

.space-bill-top {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
}

.space-bill-left {
  flex: 1;
  min-width: 0;
}
.space-bill-right {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  min-width: 180px;
}

.space-bill-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 14px;
}

.space-bill-meta {
  margin-top: 6px;
  font-size: 12px;
  color: #6b7280;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.space-bill-meta .dot {
  opacity: 0.6;
}

.pill {
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  font-weight: 600;
}

.space-bill-accordion {
  width: 100%;
  margin-top: 12px;
  border: 1px solid #eef1f3;
  background: #fbfcfd;
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.space-bill-accordion .acc-left {
  display: flex;
  gap: 10px;
  align-items: center;
}

.space-bill-accordion .acc-title {
  font-weight: 700;
  font-size: 13px;
  text-align: left;
}
.space-bill-accordion .acc-sub {
  font-size: 12px;
  color: #6b7280;
}

.space-bill-panel {
  margin-top: 10px;
  border-top: 1px dashed #eef1f3;
  padding-top: 10px;
}

/* Dashboard – Ma történt / Bővebben gomb wrapper */
.dash-activity-toggle-wrap {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}

/* Login / forms – szép üzenet dobozok */
.bm-form-msg {
  margin: 10px 0;
  font-size: 13px;
  line-height: 1.35;
  border-radius: 12px;
  padding: 10px 12px;
  display: none; /* alapból rejtve, ha üres */
}

.bm-form-msg--error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
}

.bm-form-msg--success {
  background: #ecfdf5;
  border: 1px solid #bbf7d0;
  color: #166534;
}

/* DASH TASK MODAL – ugyanaz a pattern, mint a routineModalPlanner */
#dashTaskModal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.45);
  z-index: 9999;
}
#dashTaskModal.open {
  display: flex;
}

#dashTaskModalCard {
  width: min(760px, calc(100vw - 32px));
  max-height: min(82vh, 760px);
  overflow: hidden;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 20px 80px rgba(0, 0, 0, 0.22);
  transform: translateY(10px);
  opacity: 0;
  transition:
    transform 180ms ease,
    opacity 180ms ease;
}
#dashTaskModalCard.show {
  transform: translateY(0);
  opacity: 1;
}

.dash-task-name-btn {
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.dash-task-name-btn:hover {
  text-decoration: underline;
}

/* =========================
   DASH TASK MODAL (Dashboard)
   ========================= */

/* Overlay */
#dashTaskModal.modal {
  position: fixed;
  inset: 0;
  display: none; /* alapból rejtve */
  align-items: flex-end; /* mobilon alulról */
  justify-content: center;
  padding: 14px;
  background: rgba(0, 0, 0, 0.45);
  z-index: 9999;
}
#dashTaskModal.modal.open {
  display: flex;
}

/* Card */
#dashTaskModalCard.modal-card {
  width: min(720px, calc(100vw - 28px));
  max-height: min(82vh, 720px);
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 18px 70px rgba(0, 0, 0, 0.22);
  overflow: hidden;
  position: relative;

  /* anim */
  transform: translateY(14px);
  opacity: 0;
  transition:
    transform 180ms ease,
    opacity 180ms ease;
}
#dashTaskModalCard.modal-card.show {
  transform: translateY(0);
  opacity: 1;
}

/* Desktop: középre */
@media (min-width: 900px) {
  #dashTaskModal.modal {
    align-items: center;
    padding: 18px;
  }
}

/* Close X */
#dashTaskModalCloseBtn.modal-x {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  opacity: 0.9;
}
#dashTaskModalCloseBtn.modal-x:hover {
  background: rgba(0, 0, 0, 0.04);
}

/* Head */
#dashTaskModal .am-head {
  padding: 16px 16px 12px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
#dashTaskModal .am-title-wrap {
  padding-right: 44px; /* hely az X-nek */
}
#dashTaskModal .am-title {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.25;
}
#dashTaskModal .am-sub {
  margin-top: 8px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Status pill */
#dashTaskModal .am-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  background: rgba(0, 0, 0, 0.06);
}

/* Body */
#dashTaskModal .am-body {
  padding: 14px 16px 16px 16px;
  overflow: auto;
  max-height: calc(82vh - 132px); /* head + actions */
}

/* Sections */
#dashTaskModal .am-section {
  margin-top: 12px;
}
#dashTaskModal .am-hint {
  font-size: 12px;
  font-weight: 800;
  opacity: 0.7;
  margin-bottom: 8px;
}

/* Readonly box */
#dashTaskModal .am-readonly {
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #fff;
  border-radius: 14px;
  padding: 12px;
  font-size: 14px;
}

/* Danger box (reject reason) */
#dashTaskModal .am-readonly.am-danger {
  border: 1px solid #fecaca;
  background: #fef2f2;
}
#dashTaskModal .am-readonly.am-danger b {
  display: block;
  color: #b91c1c;
  margin-bottom: 6px;
}

/* Actions */
#dashTaskModal .am-actions {
  padding: 12px 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  background: #fff;
}

/* =========================
   DASH TASK – MOBILE FIX (Approvals)
   ========================= */
@media (max-width: 768px) {
  /* egész kártya */
  .dash-task {
    flex-direction: column;
    gap: 12px;
  }

  /* fő rész */
  .dash-task-main {
    width: 100%;
  }

  .dash-task-name {
    font-size: 16px;
    font-weight: 800;
    line-height: 1.3;
  }

  /* státusz pill sor */
  .dash-task-status-row {
    margin-top: 6px;
  }

  /* meta sor tördelése */
  .dash-task-meta-line {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.4;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .dash-task-meta-line .dot {
    margin: 0 2px;
  }

  /* aside lekerül alulra */
  .dash-task-aside {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
  }

  /* pontok felül középre */
  .dash-task-stats {
    display: flex;
    justify-content: flex-start;
  }

  .dash-task-points-pill {
    font-size: 13px;
    padding: 6px 10px;
  }

  /* approve / reject gombok */
  .dash-task-aside > div:last-child {
    display: flex !important;
    gap: 10px;
  }

  .btn-approve,
  .btn-reject {
    flex: 1;
    min-height: 42px;
    font-size: 14px;
    border-radius: 12px;
  }
}

.space-bill-top {
  display: flex;
  gap: 12px;
  max-width: 100%;
}

@media (max-width: 480px) {
  .space-bill-top {
    flex-direction: column;
    align-items: stretch;
  }

  .space-bill-right {
    width: 100%;
  }

  .space-bill-right button {
    width: 100%;
  }

  #app-root {
    padding-bottom: 70px !important;
  }
}

/* QUICKSETUP */
.qs-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid #eee;
  background: #fff;
}
.qs-modal-title {
  font-weight: 700;
}

/* ===== Quick Setup modal shell ===== */
.qs-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 9999;
  display: none;
  padding: 12px;
}

.qs-modal-overlay.is-open {
  display: flex;
}

.qs-modal {
  background: #fff;
  width: min(980px, 100%);
  margin: auto;
  border-radius: 18px;
  overflow: hidden;

  /* Desktop: “dialog” feeling */
  max-height: min(86vh, 900px);
  display: flex;
  flex-direction: column;
}

/* A kártyád ebben a shell-ben már ne “kártya” legyen */
.qs-modal .dash-card {
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
}

/* A belső tartalom scrollozzon, ne az egész oldal */
.qs-modal .qs-inline {
  max-height: none; /* modal kezeli */
}

.qs-modal .qs-body {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
}

/* Footer sticky a modal alján */
.qs-modal .qs-footer {
  position: sticky;
  bottom: 0;
  background: #fff;
  border-top: 1px solid #eee;
  padding: 12px;
}

/* Mobil: full-screen */
@media (max-width: 768px) {
  .qs-modal-overlay {
    padding: 0;
  }
  .qs-modal {
    width: 100%;
    height: 100%;
    max-height: none;
    border-radius: 0;
  }

  .qs-packs {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }
}

/* Body scroll lock */
body.qs-lock {
  overflow: hidden;
  touch-action: none;
}

.qs-inline {
  padding: 0 10px;
  overflow: auto;
}