/* ============================================================
   Hamfekran — پوستهٔ تازه (شیک‌تر، کاربرپسندتر)
   آخرین فایل سبک؛ روی style.css سوار می‌شود و فقط ظاهر را عوض می‌کند.
   ============================================================ */

:root {
  --hf-ink: #0f172a;
  --hf-paper: #ffffff;
  --hf-bg-1: #eef2f9;
  --hf-bg-2: #e7edf7;
  --hf-line: rgba(20, 33, 58, .09);
  --hf-brand: #2563eb;
  --hf-brand-dark: #1d4ed8;
  --hf-mint: #0f766e;
  --hf-shadow-sm: 0 1px 2px rgba(20, 33, 58, .05);
  --hf-shadow: 0 1px 2px rgba(20, 33, 58, .05), 0 14px 34px -24px rgba(15, 23, 42, .55);
  --hf-shadow-lg: 0 24px 60px -28px rgba(15, 23, 42, .6);
  --hf-r: 16px;
}

body {
  background:
    radial-gradient(1100px 520px at 92% -10%, rgba(37, 99, 235, .10), transparent 60%),
    radial-gradient(900px 480px at 6% 0%, rgba(15, 118, 110, .08), transparent 60%),
    linear-gradient(180deg, var(--hf-bg-1), var(--hf-bg-2));
  background-attachment: fixed;
}

::selection { background: rgba(37, 99, 235, .16); }

* { scrollbar-width: thin; scrollbar-color: rgba(20, 33, 58, .22) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: rgba(20, 33, 58, .2);
  border: 3px solid transparent;
  border-radius: 999px;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(20, 33, 58, .34); background-clip: content-box; }

:focus-visible { outline: 2px solid var(--hf-brand); outline-offset: 2px; }

/* ---------- ۱. منوی کنار ---------- */
.sidebar {
  background:
    radial-gradient(420px 240px at 80% -6%, rgba(37, 99, 235, .32), transparent 65%),
    linear-gradient(180deg, #161f36 0%, #111a2e 55%, #0d1425 100%);
  border-inline-end: 1px solid rgba(255, 255, 255, .05);
  box-shadow: 22px 0 60px -50px rgba(8, 14, 28, .9);
}

.brand { padding-bottom: 6px; }
.brand-name { letter-spacing: .2px; }

.nav-label {
  color: #7f8dac;
  padding-inline-start: 10px;
  text-transform: none;
}

.nav-link {
  border-radius: 12px;
  color: #c3cddf;
  font-weight: 500;
}
.nav-link:hover { background: rgba(255, 255, 255, .06); color: #f2f6ff; transform: none; }
.nav-link.active {
  background: linear-gradient(135deg, #3273f6, #1f4fd6);
  color: #fff;
  box-shadow: 0 10px 24px -14px rgba(37, 99, 235, 1), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.nav-link.active::before { background: #9fd0ff; }

.sidebar-foot .user-chip {
  border-radius: 14px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .06);
  transition: background .18s ease;
}
.sidebar-foot .user-chip:hover { background: rgba(255, 255, 255, .09); }

/* ---------- ۲. نوار بالا ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255, 255, 255, .72);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--hf-line);
}
.topbar h1, .topbar-title { letter-spacing: -.2px; }
.topbar-sub { font-size: 13px; }

/* کلید صدای اعلان */
.sound-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid var(--hf-line);
  background: #fff;
  color: var(--hf-brand);
  cursor: pointer;
  transition: background .16s ease, color .16s ease, transform .12s ease;
}
.sound-toggle:hover { background: #f4f7fd; }
.sound-toggle:active { transform: translateY(1px); }
.sound-toggle.is-off { color: #94a3b8; }
.sound-toggle.is-floating {
  position: fixed;
  inset-block-start: 14px;
  inset-inline-start: 14px;
  z-index: 40;
  box-shadow: var(--hf-shadow);
}

/* ---------- ۳. کارت‌ها ---------- */
.card {
  background: rgba(255, 255, 255, .96);
  border: 1px solid var(--hf-line);
  border-radius: var(--hf-r);
  box-shadow: var(--hf-shadow);
}
.card:hover { box-shadow: var(--hf-shadow), 0 18px 40px -30px rgba(15, 23, 42, .7); }
.card-head h3 { letter-spacing: -.1px; }

.stat-card, .kpi-card { border-radius: var(--hf-r); }

/* ---------- ۴. دکمه‌ها ---------- */
.btn {
  border-radius: 12px;
  font-weight: 600;
  letter-spacing: -.1px;
}
.btn-primary {
  background: linear-gradient(135deg, #3273f6, #1d4ed8);
  box-shadow: 0 10px 22px -14px rgba(37, 99, 235, 1);
}
.btn-primary:hover { background: linear-gradient(135deg, #3d7dfa, #1a45c4); }
.btn-ghost {
  background: #fff;
  border-color: var(--hf-line);
  color: #334155;
}
.btn-ghost:hover { background: #f5f8fd; border-color: rgba(37, 99, 235, .28); color: var(--hf-brand-dark); }
.btn-sm { border-radius: 10px; }

/* ---------- ۵. فیلدها ---------- */
.input, input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], input[type="datetime-local"],
select, textarea {
  border-radius: 12px !important;
  border: 1px solid var(--hf-line) !important;
  background: #fff !important;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.input:focus, input:focus, select:focus, textarea:focus {
  border-color: rgba(37, 99, 235, .55) !important;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .12);
  outline: none;
}
.field label { font-weight: 600; color: #475569; }

.chip-select { border-radius: 999px; background: #fff; }
.chip-select:hover { border-color: rgba(37, 99, 235, .3); color: var(--hf-brand-dark); }

/* ---------- ۶. جدول‌ها ---------- */
table.simple { border-radius: 14px; overflow: hidden; }
table.simple thead th {
  background: #f4f7fc;
  color: #475569;
  font-size: 12px;
  letter-spacing: .02em;
}
table.simple tbody tr { transition: background .14s ease; }
table.simple tbody tr:hover { background: rgba(37, 99, 235, .04); }

/* ---------- ۷. پنجره‌ها و پیام‌ها ---------- */
.modal-overlay { background: rgba(13, 20, 37, .5); backdrop-filter: blur(4px); }
.modal-overlay.open .modal { animation: hfRise .24s cubic-bezier(.22, 1, .36, 1); }
.modal { border-radius: 18px; box-shadow: var(--hf-shadow-lg); }
@keyframes hfRise {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

.toast {
  border-radius: 14px;
  padding: 11px 18px;
  background: linear-gradient(150deg, #1b2540, #111a2e);
  box-shadow: 0 18px 40px -22px rgba(8, 14, 28, .95);
  font-weight: 500;
}

.empty-state { padding: 56px 20px; }
.empty-state h3 { font-size: 15.5px; }

/* ---------- ۸. تماس تصویری داخلی ---------- */
.call-stage {
  position: relative;
  background: radial-gradient(700px 340px at 50% -10%, #1b2745, #0b1223 70%);
  min-height: 420px;
  display: flex;
  flex-direction: column;
}

.call-grid {
  flex: 1 1 auto;
  display: grid;
  gap: 12px;
  padding: 14px;
  grid-template-columns: 1fr;
  align-content: center;
}
.call-grid[data-count="2"] { grid-template-columns: repeat(2, 1fr); }
.call-grid[data-count="3"], .call-grid[data-count="4"] { grid-template-columns: repeat(2, 1fr); }
.call-grid[data-count="5"], .call-grid[data-count="6"] { grid-template-columns: repeat(3, 1fr); }

.call-tile {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: #0e1626;
  border: 1px solid rgba(255, 255, 255, .07);
  box-shadow: 0 18px 40px -26px rgba(0, 0, 0, .9);
  aspect-ratio: 16 / 10;
  animation: hfRise .28s cubic-bezier(.22, 1, .36, 1);
}
.call-tile video { width: 100%; height: 100%; object-fit: cover; background: #0e1626; }
.call-tile-name {
  position: absolute;
  inset-block-end: 10px;
  inset-inline-start: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(8, 14, 28, .6);
  backdrop-filter: blur(6px);
  color: #eaf1ff;
  font-size: 11.5px;
  font-weight: 600;
}
.call-tile-mic {
  position: absolute;
  inset-block-end: 10px;
  inset-inline-end: 10px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: rgba(8, 14, 28, .6);
  color: #9fe8d6;
}
.call-tile-mic svg { width: 14px; height: 14px; }

.call-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(8, 14, 28, .55);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, .06);
}

.call-ctl {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  color: #e8eefb;
  cursor: pointer;
  transition: background .16s ease, transform .12s ease, color .16s ease;
}
.call-ctl:hover { background: rgba(255, 255, 255, .18); }
.call-ctl:active { transform: translateY(1px); }
.call-ctl.is-off { background: rgba(239, 68, 68, .22); color: #ffd9d4; }
.call-ctl.is-on { background: rgba(16, 185, 129, .26); color: #a7f3d0; }
.call-ctl.is-hang {
  background: linear-gradient(150deg, #f04438, #cf2618);
  color: #fff;
  box-shadow: 0 10px 22px -12px rgba(217, 45, 32, 1);
}
.call-ctl:focus-visible { outline: 2px solid #9fd0ff; outline-offset: 2px; }

.call-status {
  margin-inline-start: auto;
  font-size: 12px;
  font-weight: 600;
  color: #9db0d4;
}

@media (max-width: 700px) {
  .call-grid, .call-grid[data-count="2"], .call-grid[data-count="3"],
  .call-grid[data-count="4"], .call-grid[data-count="5"], .call-grid[data-count="6"] {
    grid-template-columns: 1fr;
  }
  .call-ctl { width: 40px; height: 40px; }
}

/* ---------- ۹. گفتگو ---------- */
.chat-wrap { border-radius: var(--hf-r); }
.chat-input-row textarea { border-radius: 14px !important; }
.chat-send, .chat-input-row .btn-primary { border-radius: 12px; }

/* ---------- ۱۰. نوار پایین موبایل ---------- */
.tabbar {
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--hf-line);
}

@media (prefers-reduced-motion: reduce) {
  .card, .btn, .nav-link, .call-ctl, .sound-toggle { transition: none; }
  .modal-overlay.open .modal, .call-tile { animation: none; }
}

/* ---------- ۱۱. تحویل پروژه (تیک انجام‌شدن) ---------- */
.done-card { border-radius: var(--hf-r); }
.done-card[data-state="pending"] { box-shadow: var(--hf-shadow), inset 3px 0 0 #b8902e; }
.done-card[data-state="approved"] { box-shadow: var(--hf-shadow), inset 3px 0 0 #3f7a55; }
.done-card[data-state="rejected"] { box-shadow: var(--hf-shadow), inset 3px 0 0 #b3372a; }

.done-main { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.done-text h3 { margin: 0 0 4px; font-size: 14px; }
.done-note { margin: 0; font-size: 12.5px; line-height: 1.8; color: var(--muted, #64748b); max-width: 60ch; }
.done-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.done-tick {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 12px;
  border: 1px solid rgba(37, 99, 235, .26);
  border-radius: 999px;
  background: linear-gradient(150deg, #f4f8ff, #eaf1ff);
  color: #1d4ed8;
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .14s ease, box-shadow .18s ease, background .18s ease;
}
.done-tick:hover { background: linear-gradient(150deg, #eef4ff, #dfe9ff); box-shadow: 0 10px 24px -16px rgba(37, 99, 235, 1); }
.done-tick:active { transform: translateY(1px); }
.done-tick:focus-visible { outline: 2px solid var(--brand, #2563eb); outline-offset: 2px; }
.done-tick[disabled] { opacity: .6; cursor: default; }

.done-box {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 9px;
  background: #fff;
  border: 1.5px solid rgba(37, 99, 235, .45);
  color: transparent;
  font-size: 15px;
  font-weight: 700;
  transition: background .18s ease, color .18s ease, transform .18s cubic-bezier(.22, 1, .36, 1);
}
.done-tick:hover .done-box { color: rgba(37, 99, 235, .45); }
.done-tick.is-sending .done-box { background: #2563eb; border-color: #2563eb; color: #fff; transform: scale(1.08); }

.done-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}
.done-chip.is-wait { background: var(--warning-bg, #f7ecd3); color: #6b5312; }
.done-chip.is-ok { background: var(--success-bg, #e7f1e9); color: var(--success, #3f7a55); }