@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800&display=swap');

:root{
  --blue: #2f6fed;
  --blue-dark: #1d4fc4;
  --blue-pale: #eaf1ff;
  --ink: #1c2536;
  --muted: #6b7688;
  --stroke: #e6eaf2;
  --bg: #f4f7fd;
  --panel: #ffffff;
  --radius: 16px;
  --shadow-sm: 0 2px 8px rgba(31,61,140,0.06);
  --shadow-md: 0 10px 30px rgba(31,61,140,0.10);
  --shadow-btn: 0 8px 18px rgba(47,111,237,0.32);
}
/* ---------- حالت تاریک ---------- */
:root[data-theme="dark"]{
  --ink:#e9edf6;
  --muted:#94a0b8;
  --stroke:#2a3348;
  --bg:#0e1420;
  --panel:#161d2d;
  --blue-pale:#1c2942;
  --shadow-sm:0 2px 10px rgba(0,0,0,0.35);
  --shadow-md:0 12px 32px rgba(0,0,0,0.45);
}
:root[data-theme="dark"] .field input,
:root[data-theme="dark"] .field select,
:root[data-theme="dark"] .field textarea{ background:#0f1524;color:var(--ink); }
:root[data-theme="dark"] .field input:focus,
:root[data-theme="dark"] .field select:focus,
:root[data-theme="dark"] .field textarea:focus{ background:#121a2c; }
:root[data-theme="dark"] .btn-ghost{ background:var(--panel); }
:root[data-theme="dark"] .app-header{ background:var(--panel); }
:root[data-theme="dark"] .cal-nav{ background:var(--panel); }
:root[data-theme="dark"] .upload-box{ background:#0f1524; }
:root[data-theme="dark"] .delete-btn{ background:#3a1f22;color:#ef8f8f; }
:root[data-theme="dark"] .delete-btn:hover{ background:#4a2529; }
:root[data-theme="dark"] .error-msg{ background:#3a1f22;color:#ef8f8f;border-color:#4a2529; }

.theme-toggle{
  width:38px;height:38px;border-radius:12px;border:1.5px solid var(--stroke);
  background:#fff;display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:16px;flex:none;box-shadow:var(--shadow-sm);
  transition:transform .15s ease, background .15s ease;
}
:root[data-theme="dark"] .theme-toggle{ background:var(--panel); }
.theme-toggle:hover{ transform:translateY(-1px); }

*{box-sizing:border-box;}
body{
  margin:0;
  font-family:'Vazirmatn', system-ui, sans-serif;
  background:var(--bg);
  color:var(--ink);
  direction:rtl;
  min-height:100vh;
}
a{text-decoration:none;color:inherit;}
img{max-width:100%;}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:none;border-radius:12px;padding:12px 22px;
  font-family:inherit;font-weight:700;font-size:15px;cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn-primary{
  background:linear-gradient(180deg, var(--blue), var(--blue-dark));
  color:#fff;
  box-shadow:var(--shadow-btn);
}
.btn-primary:hover{ transform:translateY(-2px); filter:brightness(1.05); }
.btn-primary:active{ transform:translateY(0); }
.btn-ghost{
  background:#fff;color:var(--blue);border:1.5px solid var(--blue-pale);
  box-shadow:var(--shadow-sm);
}
.btn-ghost:hover{ background:var(--blue-pale); }
.btn-block{ width:100%; }

.card{
  background:var(--panel);
  border-radius:var(--radius);
  box-shadow:var(--shadow-md);
  border:1px solid var(--stroke);
}

/* ---------- صفحه ورود ---------- */
.login-wrap{
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  background:radial-gradient(circle at 20% 15%, #eaf1ff 0%, var(--bg) 55%);
}
.login-card{
  width:100%;max-width:400px;
  padding:38px 32px;
  text-align:center;
}
.login-card .logo{
  width:56px;height:56px;border-radius:16px;
  background:linear-gradient(180deg, var(--blue), var(--blue-dark));
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 18px;box-shadow:var(--shadow-btn);
  font-size:26px;color:#fff;
}
.login-card h1{ font-size:20px;margin:0 0 4px; }
.login-card p.sub{ color:var(--muted);font-size:13.5px;margin:0 0 26px; }
.field{ text-align:right;margin-bottom:16px; }
.field label{ display:block;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:6px; }
.field input, .field select, .field textarea{
  width:100%;padding:13px 14px;border-radius:12px;
  border:1.5px solid var(--stroke);background:#fbfcfe;
  font-family:inherit;font-size:14.5px;color:var(--ink);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none;border-color:var(--blue);box-shadow:0 0 0 4px var(--blue-pale);background:#fff;
}
.field .unit-wrap{ position:relative; }
.field .unit-badge{
  position:absolute;inset-inline-start:6px;top:50%;transform:translateY(-50%);
  background:var(--blue-pale);color:var(--blue-dark);font-size:12.5px;font-weight:700;
  padding:6px 12px;border-radius:9px;pointer-events:none;
}
.field .unit-wrap input{ padding-inline-start:66px; }
.error-msg{
  background:#fdeeee;color:#c0392b;border:1px solid #f7cccc;
  border-radius:10px;padding:10px 14px;font-size:13.5px;margin-bottom:16px;text-align:right;
}

/* ---------- هدر اپ ---------- */
.app-header{
  background:#fff;border-bottom:1px solid var(--stroke);
  position:sticky;top:0;z-index:30;
}
.app-header-inner{
  max-width:1100px;margin:0 auto;padding:14px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
}
.profile-chip{
  display:flex;align-items:center;gap:10px;cursor:pointer;
}
.profile-chip img{
  width:42px;height:42px;border-radius:50%;object-fit:cover;
  border:2px solid var(--blue-pale);
}
.profile-chip .who .name{ font-weight:700;font-size:14.5px;line-height:1.3; }
.profile-chip .who .role{ font-size:12px;color:var(--muted); }

.app-tabs{ display:flex;gap:6px; }
.app-tabs a{
  padding:9px 16px;border-radius:10px;font-weight:700;font-size:14px;color:var(--muted);
  transition:background .15s ease,color .15s ease;
}
.app-tabs a:hover{ background:var(--blue-pale); color:var(--blue-dark); }
.app-tabs a.active{ background:var(--blue-pale); color:var(--blue-dark); }
.app-tabs a.logout-link{ color:#c0392b; }
.app-tabs a.logout-link:hover{ background:#fdecea; color:#a93226; }

.app-brand{ display:flex;align-items:center;gap:8px;font-weight:800;color:var(--blue-dark);font-size:16px; }
.app-brand .clock{ font-size:18px; }

.app-main{ max-width:1100px;margin:0 auto;padding:28px 20px 60px; }

/* موبایل: تب‌ها به پایین صفحه منتقل می‌شن */
@media (max-width:720px){
  .app-header-inner{ flex-wrap:wrap; }
  .app-tabs{
    position:fixed;bottom:0;inset-inline:0;background:#fff;
    border-top:1px solid var(--stroke);padding:8px 10px calc(8px + env(safe-area-inset-bottom));
    justify-content:space-around;box-shadow:0 -6px 18px rgba(31,61,140,0.06);z-index:40;
  }
  .app-tabs a{ flex:1;text-align:center;padding:8px 4px;font-size:12.5px; }
  .app-main{ padding-bottom:90px; }
}

/* ---------- تقویم ---------- */
.calendar-card{ max-width:420px;margin:0 auto;padding:22px; }
.cal-head{ display:flex;align-items:center;justify-content:space-between;margin-bottom:16px; }
.cal-head .title{ font-weight:800;font-size:17px; }
.cal-nav{
  width:34px;height:34px;border-radius:10px;border:1px solid var(--stroke);
  background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--muted);
}
.cal-nav:hover{ background:var(--blue-pale);color:var(--blue-dark); }
.cal-grid{ display:grid;grid-template-columns:repeat(7,1fr);gap:6px;text-align:center; }
.cal-grid .dow{ font-size:12.5px;color:var(--muted);font-weight:700;padding-bottom:6px; }
.cal-grid a.day, .cal-grid span.day-empty{
  display:flex;align-items:center;justify-content:center;
  aspect-ratio:1/1;border-radius:50%;font-size:14.5px;font-weight:600;color:var(--ink);
}
.cal-grid a.day{ transition:background .15s ease,color .15s ease; }
.cal-grid a.day:hover{ background:var(--blue-pale); }
.cal-grid a.day.today{ box-shadow:inset 0 0 0 2px var(--blue); }
.cal-grid a.day.selected{ background:var(--blue);color:#fff; }
.cal-hint{ text-align:center;color:var(--muted);font-size:13px;margin-top:20px; }

/* ---------- کارت روز / لیست فعالیت ---------- */
.section-title{ font-weight:800;font-size:17px;margin:26px 0 12px; }
.plus-tile{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:26px;margin-bottom:8px;cursor:pointer;
}
.plus-tile .plus-icon{
  width:58px;height:58px;border-radius:16px;background:var(--blue-pale);
  color:var(--blue-dark);display:flex;align-items:center;justify-content:center;font-size:28px;
}
.plus-tile .label{ font-weight:700;font-size:15px; }

.activity-item{
  display:flex;align-items:center;gap:14px;padding:16px 18px;margin-bottom:10px;
}
.activity-item .icon{
  width:38px;height:38px;flex:none;border-radius:10px;background:var(--blue-pale);
  color:var(--blue-dark);display:flex;align-items:center;justify-content:center;
}
.activity-item .info{ flex:1;min-width:0; }
.activity-item .proj{ font-weight:700;font-size:14.5px; }
.activity-item .desc{ font-size:12.5px;color:var(--muted);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.activity-item .hours{ font-weight:800;color:var(--blue-dark);font-size:14px;white-space:nowrap; }
.empty-note{ color:var(--muted);font-size:13.5px;text-align:center;padding:22px; }

/* ---------- فرم تایم‌شیت ---------- */
.form-card{ max-width:460px;margin:0 auto;padding:24px; }
.form-card h2{ font-size:17px;margin:0 0 20px; }
.hint-small{ font-size:12px;color:var(--muted);margin-top:10px; }

/* ---------- گرید کاربران (زیرمجموعه/مدیران) ---------- */
.people-grid{ display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:16px; }
.people-card{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:20px 12px;text-align:center;
}
.people-card img{ width:64px;height:64px;border-radius:50%;object-fit:cover;border:3px solid var(--blue-pale); }
.people-card .pname{ font-weight:700;font-size:13.5px; }
.people-card .prole{ font-size:11.5px;color:var(--muted); }

/* ---------- لیست تایم‌شیت (فقط مشاهده) ---------- */
.ts-row{
  display:flex;align-items:center;gap:14px;padding:14px 16px;border-bottom:1px solid var(--stroke);
}
.ts-row:last-child{ border-bottom:none; }
.ts-row .date{ font-weight:700;font-size:13.5px;width:110px;flex:none;color:var(--blue-dark); }
.ts-row .body{ flex:1;min-width:0; }
.ts-row .body .p{ font-weight:700;font-size:14px; }
.ts-row .body .d{ font-size:12.5px;color:var(--muted); }
.ts-row .h{ font-weight:800;color:var(--blue-dark);font-size:13.5px; }

.back-link{ display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:13.5px;margin-bottom:14px; }
.back-link:hover{ color:var(--blue-dark); }

/* ---------- جمع ساعت روز/جدول ---------- */
.day-total-card{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;margin-bottom:18px;
  background:linear-gradient(180deg, var(--blue), var(--blue-dark));
  color:#fff;
}
.day-total-card .label{ font-weight:700;font-size:14px;opacity:.92; }
.day-total-card .value{ font-weight:800;font-size:20px; }

/* ---------- دکمه حذف روی آیتم‌ها ---------- */
.activity-item{ position:relative; }
.activity-item .hours-wrap, .ts-row .h-wrap{
  display:flex;align-items:center;gap:10px;
}
.delete-form{ display:inline; }
.delete-btn{
  border:none;background:#fdeceb;color:#d64545;
  width:32px;height:32px;border-radius:9px;flex:none;
  display:flex;align-items:center;justify-content:center;
  font-size:15px;cursor:pointer;transition:background .15s ease, transform .15s ease;
}
.delete-btn:hover{ background:#f9d5d2; transform:translateY(-1px); }

/* ---------- کارت نمودار ---------- */
.chart-card{ padding:20px; margin-bottom:22px; }
.chart-card canvas{ max-width:100%; }
.chart-wrap{ position:relative; width:100%; height:260px; }

/* ---------- ردیف عنوان + دکمه (مثلاً عنوان گزارش + خروجی اکسل) ---------- */
.section-row{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;
  gap:10px;margin:26px 0 12px;
}
.section-row .section-title{ margin:0; }
.export-btn{ padding:10px 18px;font-size:13.5px;white-space:nowrap; }

/* ---------- کارت‌های آماری خلاصه ---------- */
.stat-cards{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,190px));
  justify-content:flex-start;
  gap:14px;margin-bottom:24px;
}
.stat-card{ padding:16px 18px; }
.stat-card .label{ font-size:12.5px;color:var(--muted);font-weight:600;margin-bottom:8px; }
.stat-card .value{ font-size:22px;font-weight:800;color:var(--blue-dark); }

/* ---------- کارت پایبندی به ثبت روزانه (داشبورد) ---------- */
.fill-card{ padding:20px 22px; }
.fill-head{ display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-bottom:12px; }
.fill-title{ font-weight:800;font-size:15.5px; }
.fill-count{ font-weight:800;font-size:15.5px;color:var(--blue-dark); }
.progress-bar{ height:12px;border-radius:8px;background:var(--blue-pale);overflow:hidden; }
.progress-fill{ height:100%;border-radius:8px;background:linear-gradient(90deg, var(--blue), var(--blue-dark));transition:width .3s ease; }
.fill-note{ margin-top:10px;font-size:13px;color:var(--muted); }

/* ---------- فیلتر گزارش (مدیر پروژه/مدیریت) ---------- */
.filter-card{ padding:16px 18px; margin-bottom:22px; max-width:340px; }
.filter-card .field select{ cursor:pointer; }

/* ---------- ریسپانسیو موبایل: نمودار، کارت‌های آماری و جدول گزارش‌ها ---------- */
@media (max-width:600px){
  .stat-cards{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .stat-card{ padding:14px 16px; }
  .stat-card .value{ font-size:19px; }
  .chart-wrap{ height:220px; }
  .chart-card{ padding:14px; }
  .section-row{ align-items:stretch; }
  .export-btn{ justify-content:center; width:100%; }
  .ts-row{ flex-wrap:wrap; row-gap:8px; padding:14px; }
  .ts-row .date{ width:auto;order:1; }
  .ts-row .h-wrap{ order:2;margin-inline-start:auto; }
  .ts-row .body{ order:3;flex-basis:100%; }
}

.toast{
  position:fixed;bottom:90px;left:50%;transform:translateX(-50%);
  background:var(--ink);color:#fff;padding:12px 20px;border-radius:12px;font-size:13.5px;
  box-shadow:var(--shadow-md);z-index:50;
}
@media (min-width:721px){ .toast{ bottom:24px; } }

.upload-box{
  border:2px dashed var(--stroke);border-radius:16px;padding:30px;text-align:center;
  background:#fbfcfe;
}
.upload-box img.preview{
  width:110px;height:110px;border-radius:50%;object-fit:cover;margin-bottom:14px;border:3px solid var(--blue-pale);
}