@font-face{
  font-family: 'Vazirmatn';
  src: url('/fonts/Vazirmatn-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: 'Vazirmatn';
  src: url('/fonts/Vazirmatn-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* ------------------ پایه تایپوگرافی ------------------ */
:root{
  --font-body: 'Vazirmatn', system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans Arabic', Tahoma, Arial, sans-serif;

  /* رنگ‌ها */
  --bg:#0b0f12;
  --card:#11161a;
  --text:#e5e7eb;
  --muted:#94a3b8;
  --primary:#3b82f6;
  --danger:#ef4444;

  /* فاصله‌ها */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
}

:root.light{
  --bg:#f7f7f8;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
}

:root { color-scheme: dark; }
:root.light { color-scheme: light; }

select, input, textarea, button { color-scheme: inherit; }

/* گزینه: رنگ تیک چک‌باکس/رادیو با تم هماهنگ شود */
:root { accent-color: var(--primary); }

*{ box-sizing:border-box; }
html,body{
  margin:0; padding:0;
  font-family: var(--font-body);
  line-height:1.65;
  background: var(--bg);
  color: var(--text);
}

/* به‌ارث‌رسیدن فونت برای کنترل‌های فرم */
button, input, select, textarea{ font-family: var(--font-body) !important; }

/* Placeholder */
input::placeholder, textarea::placeholder{ font-family: var(--font-body); opacity:.75; }

/* آنتی‌الیاس */
body{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }

/* iOS: جلوگیری از زوم خودکار روی input */
@supports (-webkit-touch-callout:none){
  input, select, textarea{ font-size:15px; }
}

.muted{ color:var(--muted); }

/* ------------------ نوار بالا ------------------ */
.topbar{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3);
  padding:10px var(--space-4);
  background:var(--card);
  border-bottom:1px solid #00000033;
  /* position:sticky; top:0; z-index:10; */
}
.brand{ font-weight:700; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ghost{
  background:transparent; color:var(--text);
  border:1px solid #ffffff22; padding:5px 10px;
  border-radius:10px; cursor:pointer;
}
.ghost:hover{ border-color:#ffffff44; }

/* ------------------ ظرف صفحه ------------------ */
.container{
  width:min(100%, 1100px);
  margin: var(--space-6) auto;
  padding-inline: var(--space-4);
}

/* کارت‌ها */
.card{
  background:var(--card);
  border:1px solid #00000033;
  border-radius:16px;
  padding:var(--space-4);
  overflow:visible;
}

.pdp,
.datepicker-plot-area{
  z-index: 99999 !important;
}

/* شبکه اصلی: سایدبار + محتوا */
.grid{
  display:grid;
  grid-template-columns: clamp(220px, 24vw, 280px) 1fr;
  gap: var(--space-4);
}

/* سایدبار */
.sidebar ul{ list-style:none; padding:0; margin:0 0 var(--space-2) 0; }
.sidebar li{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--space-2);
  padding:8px 10px; border-radius:10px; cursor:pointer;
  min-width:0;
}
.sidebar li .name{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sidebar li.active, .sidebar li:hover{ background:#ffffff20; }
.sidebar li .del{ opacity:.8; }
.sidebar li .del:hover{ opacity:1; }

/* خطوط عمومی فرم‌ها */
.row{ display:flex; gap:var(--space-2); flex-wrap:wrap; }
input, select, button{
  padding:10px 12px;
  border-radius:10px;
  border:1px solid #a4a4a433;
  background:transparent;
  color:var(--text);
  min-height:42px;
}
button{ background:var(--primary); border:none; color:white; cursor:pointer; font-weight: 700;}
button.danger{ background:var(--danger); font-size: 11px; }

/* ابزارک بالای لیست تسک‌ها */
.toolbar{
  display:flex; flex-wrap:wrap;
  gap:var(--space-2); margin-bottom:var(--space-3);
  align-items:center;
  margin-bottom: 15px;
}

/* لیست تسک‌ها */
.tasks{
  list-style:none; padding:0; margin:var(--space-3) 0 0 0;
  display:flex; flex-direction:column; gap:var(--space-2);
}

/* تسک */
.task{
  display:flex; align-items:center; gap:10px;
  padding:10px; border:1px solid #00000033; border-radius:12px;
  border-inline-start:4px solid transparent; /* نوار رنگی کنار */
  transition: background .15s ease, opacity .15s ease, border-color .15s ease;
  min-width:0; /* برای جلوگیری از بیرون‌زدن */
}
.task input[type="checkbox"]{ transform:scale(1.2); flex:0 0 auto; }
.task .title{
  flex:1 1 auto; min-width:0;
  overflow-wrap:anywhere; word-break:break-word;
}
.task .title.done{ text-decoration:line-through; color:var(--muted); }

#newTaskForm {
    margin-bottom: 28px;
}

/* وضعیت انجام/انجام‌نشده */
.task.open{ background:transparent; }
.task.done{ opacity:.85; background:#ffffff14; }
.task.done .title{ text-decoration:line-through; color:var(--muted); }

/* اولویت‌ها */
.task.prio-high{ border-inline-start-color: var(--danger); }
.task.prio-med { border-inline-start-color: var(--primary); }
.task.prio-low { border-inline-start-color: #10B981; }

/* تسک‌های عقب‌افتاده (ولی انجام‌نشده) */
.task.overdue:not(.done) {
  background: rgba(239,68,68,.06);
  border-inline-start-color: #f59e0b; /* کهربایی/هشدار */
}
.chip.overdue {
  background: rgba(245,158,11,.15);
  border: 1px solid rgba(245,158,11,.5);
}

/* چیپ اولویت */
.chip{
  padding:2px 8px; border-radius:999px; font-size:12px;
  border:1px solid #ffffff22; white-space:nowrap; flex:0 0 auto;
}
.chip.prio-high{ background: rgba(239,68,68,.12);  border-color: rgba(239,68,68,.35); }
.chip.prio-med { background: rgba(59,130,246,.12); border-color: rgba(59,130,246,.35); }
.chip.prio-low { background: rgba(16,185,129,.12); border-color: rgba(16,185,129,.35); }

/* کمکی‌ها */
.hidden{ display:none; }
.spacer{ flex:1; }
.foot{ text-align:center; padding:24px; color:var(--muted); }
.foot a{ text-decoration:none; color:var(--muted); }

/* فرم ورود زیر هم */
#loginForm{ display:flex; flex-direction:column; gap:10px; }
#loginForm input, #loginForm button{ width:100%; display:block; font-size: 16px; }

/* فوکوس دیداری بهتر */
input:focus, select:focus, textarea:focus, button:focus{
  outline:2px solid color-mix(in srgb, var(--primary) 70%, transparent);
  outline-offset:2px;
}

/* جلوگیری از بیرون‌زدن عناصر داخل کارت و نوار ابزار */
.card, .toolbar, .tasks{ min-width:0; }

/* ظاهر خودِ جعبهٔ select */
select{
  background-color: var(--card);
  color: var(--text);
}

/* رنگ متن/پس‌زمینهٔ آیتم‌ها (در مرورگرهای قابل‌استایل) */
select option{
  background-color: var(--card);
  color: var(--text);
}

/* حالت لایت */
:root.light select{
  background-color: #fff;
  color: #0f172a;
}
:root.light select option{
  background-color: #fff;
  color: #0f172a;
}

/* آیتم انتخاب‌شده (جاهایی که پشتیبانی می‌شود) */
@supports selector(option:checked){
  select option:checked{
    background-color: #1f2937;
    color: #fff;
  }
  :root.light select option:checked{
    background-color: #e5e7eb;
    color: #111827;
  }
}


/* ------------------ ریسپانسیو ------------------ */

/* <= 1024px: کمی جمع‌وجورتر */
@media (max-width: 1024px){
  .container{ padding-inline: 12px; }
}

/* <= 860px: تک‌ستونه شدن، پر کردن عرض کامل فرم‌ها */
@media (max-width: 860px){
  .grid{ grid-template-columns: 1fr; }
  .row > *{ flex:1 1 100%; }          /* فیلدها و دکمه‌ها تمام عرض شوند */
  .toolbar > *{ flex:1 1 200px; }     /* فیلترها بشکنند و در دو ردیف جا شوند */
  .chip{ font-size:11px; }
}

/* <= 480px: فاصله‌ها کمتر و دکمه‌ها قابل لمس‌تر */
@media (max-width: 480px){
  .topbar{ gap: var(--space-2); }
  .container{ margin: var(--space-4) auto; padding-inline: var(--space-3); }
  .card{ padding: var(--space-3); border-radius:12px; }
  input, select, button{ min-height:44px; font-size: 0.85rem; }
}
/* فقط موبایل: سه‌ردیفی + نوار رنگی راست + چک‌باکس هم‌خط عنوان سمت راست */
@media (max-width: 640px){
  .task{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;

    /* چیدمان LTR تا کنترل چپ/راست ساده باشد */
    direction: ltr;

    /* نوار رنگی را به سمت راست منتقل کن */
    border-inline-start: 0;
    border-right: 4px solid transparent;
  }
  /* رنگ نوار سمت راست بر اساس اولویت */
  .task.prio-high{ border-right-color: var(--danger); }
  .task.prio-med { border-right-color: var(--primary); }
  .task.prio-low { border-right-color: #10B981; }

  /* ردیف ۱: چیپ + تاریخ بالا-چپ */
  .task .chip{
    order: 1;
    flex: 0 0 auto;
    margin-left: 8px; /* فاصله بین چیپ و تاریخ */
  }
  .task small.muted{
    order: 1;
    flex: 0 0 auto;
  }

  /* شکست خط بعد از ردیف ۱ */
  .task::before{
    content: '';
    order: 2;
    flex-basis: 100%;
  }

  /* ردیف ۲: عنوان تمام‌عرض + چک‌باکس در سمت راست همان خط */
  .task .title{
    order: 3;                 /* عنوان قبل از چک‌باکس */
    flex: 1 1 0%;
    min-width: 0;
    margin: 2px 0 6px;

    /* متن فارسی را درست نشان بده */
    direction: rtl;
    text-align: right;

    word-break: break-word;
    overflow-wrap: anywhere;
    font-weight: 600;
    line-height: 1.6;
  }
  .task input[type="checkbox"],
  .task .chk{
    order: 4;                 /* ← مهم: بعد از عنوان بیاید تا برود سمت راست */
    flex: 0 0 auto;
    transform: scale(1.1);
    margin-left: 8px;         /* کمی فاصله از عنوان */
    margin-top: 2px;
    align-self: start;
  }

  /* شکست خط قبل از ردیف ۳ (اکشن‌ها) */
  .task::after{
    content: '';
    order: 5;
    flex-basis: 100%;
  }

  /* ردیف ۳: اکشن‌ها پایین-چپ */
  .task .edit,
  .task .del,
  .task button.edit,
  .task button.del,
  .task button.tiny{
    order: 6;
    flex: 0 0 auto;
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 8px;
    /* در LTR پیش‌فرض سمت چپ قرار می‌گیرند */
  }

  /* spacer در موبایل لازم نیست */
  .task .spacer{ display: none; }
  
  #authArea span {
      display: none;
  }
}