/* =========================
   Base module & buttons
   ========================= */
.gg-module{background:#fff;border:1px solid #e5e7eb;border-radius:14px;overflow:hidden}
.gg-module-head{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:10px 12px;background:#fff;border-bottom:1px solid #f3f4f6}
.gg-head-actions{display:flex;align-items:center;gap:10px}
.gg-limits{font-size:12px;color:#6b7280}

.btn{background:#2563eb;color:#fff;border:none;border-radius:10px;padding:8px 12px;cursor:pointer}
.btn-light{background:#f3f4f6;color:#111827}
.btn[disabled]{opacity:.6;cursor:not-allowed}

/* =========================
   Generic card
   ========================= */
.gg-card{background:#fff;border-top:1px solid #f3f4f6}
.gg-card-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;gap:10px;border-bottom:1px solid #f0f0f0}
.gg-card-title{font-weight:700}
.gg-card-actions .btn{background:#f3f4f6;color:#111}
.gg-card-body{padding:12px}

/* =========================
   Filter tabs (under builder)
   ========================= */
.gg-tabs{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.gg-tab{padding:8px 12px;border:1px solid #d1d5db;background:#fff;border-radius:999px;cursor:pointer}
.gg-tab.active{background:#111827;color:#fff;border-color:#111827}

/* =========================
   Wizard
   ========================= */
.gg-wiz-step{display:none}
.gg-wiz-step.active{display:block}
.gg-wiz-title{font-weight:700;margin-bottom:8px}
.gg-subtitle{margin:8px 0 6px}
.gg-choice{display:flex;gap:8px;flex-wrap:wrap}
.gg-chip{padding:6px 10px;border:1px solid #d1d5db;border-radius:999px;background:#fff;cursor:pointer}
.gg-chip.active{background:#111827;color:#fff;border-color:#111827}

.gg-days{display:flex;gap:8px;margin-top:6px}
.gg-day{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:1px solid #d1d5db;border-radius:8px;cursor:pointer}
.gg-day.active{background:#111827;color:#fff;border-color:#111827}

.gg-labels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:8px}
.gg-labels input{padding:8px;border:1px solid #d1d5db;border-radius:10px}
.gg-wiz-actions{display:flex;align-items:center;gap:8px;margin-top:10px}
.gg-loading{font-size:12px;color:#6b7280}

/* =========================
   Goals list
   ========================= */
#gg-cards{display:flex;flex-direction:column;gap:14px}

.goal-card{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:10px 12px}
.goal-card.finalized{background:#f3f4f6;border-color:#e5e7eb;filter:grayscale(1)}
.goal-card.busy{position:relative}
.goal-card.busy::after{
  content:'در حال ذخیره…';position:absolute;inset:0;background:rgba(255,255,255,.65);
  display:flex;align-items:center;justify-content:center;border-radius:14px;font-size:13px;color:#111827
}

.goal-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.goal-title{font-weight:700}
.goal-meta{font-size:12px;color:#6b7280}
.gg-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;background:#fff7cc;border:1px solid #f3d266;font-size:12px;margin-inline-start:8px}

.gg-meter{display:flex;align-items:center;gap:8px;min-width:160px}
.gg-bar{position:relative;width:160px;height:8px;background:#eee;border-radius:999px;overflow:hidden}
.gg-fill{position:absolute;left:0;top:0;bottom:0;width:0%;background:#22c55e;transition:width .18s ease}
.gg-pct{font-weight:700;min-width:36px}

/* =========================
   7×4 grid table
   ========================= */
.goal-body{overflow-x:auto;-webkit-overflow-scrolling:touch}
.gg-table{min-width:560px;width:100%;border-collapse:separate;border-spacing:8px;margin-top:10px;table-layout:fixed}
.gg-table thead th{font-weight:700;font-size:12px;color:#374151;text-align:center}
.gg-table th:first-child{width:140px;text-align:center;white-space:nowrap}
.gg-slot-label{display:inline-block;padding:4px 8px;border:1px dashed #d1d5db;border-radius:999px;font-size:12px;color:#374151}

/* cells */
.gg-cell{
  width:40px;height:40px;border:2px solid #34d399;border-radius:10px;background:#fff;
  box-shadow:0 1px 0 rgba(0,0,0,.02);cursor:pointer;transition:transform .05s ease
}
.gg-cell:active{transform:scale(.96)}
.gg-cell.off{opacity:.25;border-style:dashed;cursor:not-allowed}
.gg-cell.done{background:#34d39922}
.gg-cell.saving{opacity:.6}

/* =========================
   Card footer & pager
   ========================= */
.goal-foot{display:flex;align-items:center;gap:12px;margin-top:10px;flex-wrap:wrap}
.goal-foot .gg-note{font-size:12px;color:#6b7280}
.goal-actions{margin-inline-start:auto;display:flex;gap:8px}

.gg-pager{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:10px}

/* =========================
   Site-level tabs (Send / Goals / Wishes)
   ========================= */
.gc-tabs{display:flex;gap:8px;border-bottom:1px solid #e5e7eb;margin-bottom:12px}
.gc-tabs .tab-btn{background:#f3f4f6;border:1px solid #e5e7eb;padding:8px 12px;border-radius:10px 10px 0 0}
.gc-tabs .tab-btn.active{background:#fff;border-bottom-color:#fff;font-weight:700}

.tab-panel{display:none}
.tab-panel.active{display:block}

/* =========================
   Mobile responsiveness
   ========================= */

/* همیشه صفحه عمودی اسکرول داشته باشد */
html, body{overflow-y:auto !important;height:auto !important}

/* کارت‌ها محتوا را قیچی نکنند */
@media (max-width:768px){
  .hg-layout{grid-template-columns:1fr}              /* ستون‌بندی اصلی تک‌ستونه شود */
  .gg-card{overflow:visible}
  .gg-card-body{padding:10px}
  #gg-cards{gap:10px}

  /* ویزارد: ورودی‌ها و چیپ‌ها جمع‌وجور */
  .gg-labels{display:grid;grid-template-columns:1fr;gap:8px}
  .gg-labels input{width:100%;min-width:0}
  .gg-choice{gap:6px}
  .gg-days{gap:6px}
  .gg-day{width:40px;height:40px;border-radius:10px}

  /* جدول فقط داخل کارت اسکرول افقی بخورد */
  .goal-body{-webkit-overflow-scrolling:touch}
  .gg-table{min-width:520px;border-spacing:4px}

  /* سلول‌ها کوچکتر */
  .gg-cell{width:28px;height:28px;touch-action:manipulation}

  /* لیبل‌های بازه کوتاه‌تر */
  .gg-slot-label{min-width:40px;font-size:12px;white-space:nowrap}

  /* هدر کارت ستونی شود */
  .goal-head{flex-direction:column;align-items:flex-start;gap:6px}
  .gg-meter{width:100%}
  .gg-bar{width:100%}
}

/* ریز بهینه‌سازی تایپوگرافی موبایل کوچک */
@media (max-width:480px){
  .gg-wiz-title{font-size:14px}
  .gg-chip{padding:6px 10px}
  .btn{padding:8px 10px;border-radius:10px}
  .gg-note{font-size:12px}
  .gg-badge{font-size:11px}
}
/* ===== نمای موبایل: تب روزها و شبکه‌ی 4 اسلات ===== */
.goal-body.mobile{overflow:visible}

.gg-day-tabs{
  display:flex; gap:6px; align-items:center;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  padding-bottom:6px; margin-bottom:8px; border-bottom:1px dashed #e5e7eb;
}
.gg-daytab{
  flex:0 0 auto;
  padding:6px 10px;
  border:1px solid #d1d5db;
  border-radius:999px;
  background:#fff; cursor:pointer;
}
.gg-daytab.active{background:#111827;color:#fff;border-color:#111827}

.gg-mobile-grid{display:flex; flex-direction:column; gap:10px}
.gg-slotrow{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:8px 10px; border:1px solid #e5e7eb; border-radius:10px; background:#fafafa;
}
.gg-slotrow .gg-slot-label{font-size:14px; color:#374151;}

/* دکمه سلول در موبایل کمی بزرگ‌تر و لمسی‌تر */
@media (max-width:768px){
  .gg-slotrow .gg-cell{
    width:38px; height:38px; border-radius:10px; border:1px solid #e5e7eb;
    background:#f3f4f6;
  }
  .gg-slotrow .gg-cell.done{ background:#22c55e; border-color:#16a34a; }
  .gg-slotrow .gg-cell.off{ background:#fafafa; border-style:dashed; opacity:.45; pointer-events:none; }
}
.gg-badge .gg-ico{ width:16px; height:16px; object-fit:contain; display:inline-block; vertical-align:-3px; margin-inline-end:4px; }

#gg-habits-box .gg-habit-item{display:flex;gap:8px;margin:6px 0}
  .gg-habit-input{flex:1;padding:8px;border:1px solid #e5e7eb;border-radius:8px}
  .gg-habit-del{padding:8px 10px;border:0;background:#fee2e2;border-radius:8px;cursor:pointer}
  .gg-suggest{display:flex;flex-wrap:wrap;gap:8px}
  .gg-suggest-item{border:1px solid #ddd;padding:6px 10px;border-radius:999px;background:#f8f8f8;cursor:pointer}
  .gg-suggest-empty{opacity:.7}
  
  
/* Badge: NEW */
.badge-new{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:2px 8px;
  margin-inline-start:8px;
  font-size:11px;
  font-weight:700;
  color:#065f46; /* سبز تیره */
  background:linear-gradient(180deg,#d1fae5,#a7f3d0); /* سبز روشن */
  border:1px solid #34d399;
  border-radius:999px;
  vertical-align:middle;
}
.badge-new::before{
  content:"";
  width:6px; height:6px;
  border-radius:50%;
  background:#10b981;
  box-shadow:0 0 0 0 rgba(16,185,129,.6);
  animation:pulseDot 1.8s infinite;
}
@keyframes pulseDot{
  0%{   box-shadow:0 0 0 0 rgba(16,185,129,.6); }
  70%{  box-shadow:0 0 0 10px rgba(16,185,129,0); }
  100%{ box-shadow:0 0 0 0 rgba(16,185,129,0); }
}