/* ==========================================================================
   Layout — شل اپ، سایدبار، تاپ‌بار، صفحه، دراور
   ========================================================================== */

#app { height: 100vh; display: flex; flex-direction: column; }

/* ---------- Auth shell (لاگین / انتخاب سازمان) ---------- */
.auth-shell {
  height: 100vh;
  display: grid;
  place-items: center;
  background:
    radial-gradient(900px 500px at 80% -10%, var(--primary-soft), transparent 70%),
    radial-gradient(700px 400px at 10% 110%, var(--info-soft), transparent 70%),
    var(--bg);
  overflow: auto;
  padding: var(--s-8) var(--s-4);
}
.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lg);
  padding: var(--s-8);
}
.auth-card.wide { max-width: 560px; }
.auth-logo {
  width: 46px; height: 46px;
  border-radius: var(--r-md);
  background: var(--primary);
  color: #fff;
  display: grid; place-items: center;
  font-weight: 800; font-size: var(--fs-xl);
  margin-bottom: var(--s-5);
}

/* ---------- Main shell ---------- */
.shell { flex: 1; display: flex; min-height: 0; }

/* ---------- Sidebar ---------- */
.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--surface);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.sidebar-head {
  height: var(--topbar-h);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 0 var(--s-4);
  border-bottom: 1px solid var(--border);
}

.org-switch {
  display: flex; align-items: center; gap: var(--s-2);
  flex: 1; min-width: 0;
  padding: var(--s-1) var(--s-2);
  border-radius: var(--r-md);
  transition: background var(--t-fast);
}
.org-switch:hover { background: var(--surface-hover); }

.org-badge {
  width: 30px; height: 30px; flex-shrink: 0;
  border-radius: var(--r-sm);
  display: grid; place-items: center;
  color: #fff; font-weight: 800; font-size: var(--fs-sm);
}

.sidebar-nav { flex: 1; overflow-y: auto; padding: var(--s-3) var(--s-2) var(--s-6); }

.nav-group { margin-bottom: var(--s-4); }
.nav-group-title {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text-3);
  padding: 0 var(--s-3) var(--s-2);
  letter-spacing: .02em;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  padding: 7px var(--s-3);
  border-radius: var(--r-md);
  color: var(--text-2);
  font-size: var(--fs-md);
  font-weight: 500;
  transition: background var(--t-fast), color var(--t-fast);
  text-align: right;
  margin-bottom: 1px;
}
.nav-item:hover { background: var(--surface-hover); color: var(--text); }
.nav-item.active {
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 700;
}
.nav-item .ico { flex-shrink: 0; width: 17px; text-align: center; opacity: .9; }
.nav-item .label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-item .count {
  font-size: var(--fs-xs);
  font-weight: 700;
  background: var(--surface-3);
  color: var(--text-2);
  padding: 1px 6px;
  border-radius: var(--r-full);
  min-width: 20px; text-align: center;
}
.nav-item.active .count { background: var(--primary); color: #fff; }
.nav-item .count.alert { background: var(--danger); color: #fff; }

.sidebar-foot {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  padding: var(--s-2);
}

/* ---------- Topbar ---------- */
.topbar {
  height: var(--topbar-h);
  flex-shrink: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 0 var(--s-5);
}

.search-trigger {
  display: flex; align-items: center; gap: var(--s-2);
  width: 100%; max-width: 400px;
  padding: 6px var(--s-3);
  background: var(--surface-3);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  color: var(--text-3);
  font-size: var(--fs-sm);
  transition: all var(--t-fast);
}
.search-trigger:hover { background: var(--surface); border-color: var(--border-2); }

/* سوییچر نقش — قابلیت محوری پروتوتایپ */
.role-switch {
  display: flex; align-items: center; gap: var(--s-2);
  padding: 5px var(--s-3);
  border: 1px dashed var(--primary-border);
  background: var(--primary-soft);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  color: var(--primary);
  font-weight: 600;
  transition: all var(--t-fast);
}
.role-switch:hover { background: var(--surface); }

.icon-btn {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  color: var(--text-2);
  position: relative;
  transition: background var(--t-fast), color var(--t-fast);
}
.icon-btn:hover { background: var(--surface-hover); color: var(--text); }
.icon-btn .dot {
  position: absolute; top: 5px; left: 6px;
  min-width: 15px; height: 15px; padding: 0 3px;
  background: var(--danger); color: #fff;
  border-radius: var(--r-full);
  font-size: 9px; font-weight: 700;
  display: grid; place-items: center;
  border: 2px solid var(--surface);
}

/* ---------- Main + Page ---------- */
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.view { flex: 1; overflow-y: auto; overflow-x: hidden; }
.page { max-width: var(--content-max); margin: 0 auto; padding: var(--s-6) var(--s-6) var(--s-12); }
.page.flush { padding-bottom: var(--s-4); }

.page-head { margin-bottom: var(--s-5); }
.page-title { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.page-title h1 { font-size: var(--fs-2xl); }
.page-sub { color: var(--text-2); font-size: var(--fs-sm); margin-top: var(--s-1); }

.breadcrumb { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); color: var(--text-3); margin-bottom: var(--s-2); }
.breadcrumb a { color: var(--text-2); }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb .sep { opacity: .5; }

/* ---------- Grids ---------- */
.grid { display: grid; gap: var(--s-4); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.grid-main-side { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }

@media (max-width: 1280px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-main-side { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1000px) {
  .grid-3, .grid-2 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Drawer (پنل کشویی جزئیات) ---------- */
.scrim {
  position: fixed; inset: 0;
  background: var(--overlay);
  z-index: 90;
  opacity: 0;
  animation: fadeIn var(--t-med) forwards;
}
@keyframes fadeIn { to { opacity: 1; } }

.drawer {
  position: fixed;
  top: 0; bottom: 0; left: 0;
  width: min(var(--drawer-w), 94vw);
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: var(--sh-lg);
  z-index: 91;
  display: flex; flex-direction: column;
  transform: translateX(-100%);
  animation: drawerIn var(--t-med) forwards;
}
@keyframes drawerIn { to { transform: translateX(0); } }

.drawer-head {
  flex-shrink: 0;
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: flex-start; gap: var(--s-3);
}
.drawer-body { flex: 1; overflow-y: auto; padding: var(--s-5); }
.drawer-foot {
  flex-shrink: 0;
  padding: var(--s-3) var(--s-5);
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  display: flex; align-items: center; gap: var(--s-2);
}

/* ---------- Board layout ---------- */
.board-scroll {
  display: flex;
  gap: var(--s-3);
  overflow-x: auto;
  padding: 0 var(--s-6) var(--s-6);
  align-items: flex-start;
  min-height: 0;
}

/* ---------- Split layout (لیست + جزئیات) ---------- */
.split { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--s-4); align-items: start; }
@media (max-width: 1100px) { .split { grid-template-columns: minmax(0, 1fr); } }