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

@font-face {
  font-family: "IRANYekan";
  src: url("fonts/IRANYekanXVFaNumVF.DBKnep-K.woff2") format("woff2");
  font-weight: 100 900;
}

body {
  font-family: "IRANYekan", sans-serif;
}

html {
  scroll-behavior: smooth;
}

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.gradient-bg {
  /* unified sky-blue identity gradient (reference: sidebar active pill) */
  background: linear-gradient(
    135deg,
    var(--primary-bright) 0%,
    var(--primary) 100%
  );
}
::selection {
  background: #bae6fd;
  color: var(--primary-ink);
}

::-moz-selection {
  background: #bae6fd;
  color: var(--primary-ink);
}
:root {
  /* Royal-blue identity — reference palette (2026-10-08 redesign) */
  --primary: var(--primary); /* primary royal blue */
  --primary-strong: var(--primary-bright); /* interactive blue */
  --navy-950: var(--primary-ink); /* deep navy */
  --navy-800: var(--primary-deep); /* sidebar navy */
  --navy-700: var(--primary-deep); /* gradient endpoint */
  --secondary: #438fea; /* secondary blue */
  --accent: #438fea; /* accent (was teal) */
  --surface-pale: #eaf4ff; /* pale blue background */
  --surface-lightest: #f5f9ff; /* lightest page surface */
  --border-blue: #d8e8fa; /* subtle blue border */
  --text-main: var(--primary-ink); /* main text */
  --text-sub: #6481a6; /* secondary text */
  --icon-muted-bg: #e4f0ff; /* muted icon background */
  --focus-blue: var(--primary); /* focus indicator */
  --muted: #e6edf0;
  --chat-sent: linear-gradient(135deg, var(--primary-bright) 0%, #438fea 100%);
  --chat-recv: #ffffff;
}

.card-hover {
  transition:
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.3s ease;
}

.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.1);
}

button,
.nav-link,
a {
  transition:
    color 0.25s ease,
    background-color 0.25s ease,
    box-shadow 0.25s ease,
    opacity 0.25s ease;
}

.animate-fade-in {
  animation: fadeIn 0.6s ease both;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

.notification-badge {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

/* استایل‌های چت - طراحی شبیه پیام‌رسان واقعی */
.chat-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #e5ddd5;
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='a' patternUnits='userSpaceOnUse' width='100' height='100' patternTransform='scale(0.5) rotate(0)'%3E%3Crect x='0' y='0' width='100%25' height='100%25' fill='hsla(0,0%25,100%25,0)'/%3E%3Cpath d='M-50.129 12.582L-37.716 0 0 37.716l12.414 12.582L50.129 12.582 37.716 0 0 37.716-12.414 50.298-50.129 12.582zm100.258 0L87.844 0 50.129 37.716l12.414 12.582L150.387 12.582 137.973 0 100.258 37.716l12.414 12.582L150.387 12.582z' stroke-width='0.5' stroke='hsla(0,0%25,0%25,0.05)' fill='none'/%3E%3C/pattern%3E%3C/defs%3E%3Crect fill='url(%23a)' width='100%25' height='100%25'/%3E%3C/svg%3E");
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  scroll-behavior: smooth;
}

.chat-messages::-webkit-scrollbar {
  width: 6px;
}

.chat-messages::-webkit-scrollbar-track {
  background: transparent;
}

.chat-messages::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

.message {
  margin-bottom: 0.5rem;
  display: flex;
  align-items: flex-end;
  animation: messageSlideIn 0.3s ease-out;
}

@keyframes messageSlideIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.message.sent {
  justify-content: flex-end;
  flex-direction: row-reverse;
}

.message.received {
  justify-content: flex-start;
}

.message-wrapper {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  max-width: 70%;
}

.message.sent .message-wrapper {
  flex-direction: row-reverse;
}

.message-avatar {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.message-content-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.message.sent .message-content-wrapper {
  align-items: flex-end;
}

.message.received .message-content-wrapper {
  align-items: flex-start;
}

.message-content {
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  word-wrap: break-word;
  position: relative;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.message.sent .message-content {
  background: linear-gradient(135deg, #dcf8c6 0%, #b8e994 100%);
  color: #1f2937;
  border-bottom-right-radius: 0.125rem;
}

.message.received .message-content {
  background: white;
  color: #1f2937;
  border-bottom-left-radius: 0.125rem;
}

.message-time-status {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.65rem;
  color: #6b7280;
  margin-top: 0.125rem;
  direction: ltr;
}

.message.sent .message-time-status {
  justify-content: flex-end;
}

.message-status {
  display: inline-flex;
  align-items: center;
}

.message-status.single-tick {
  color: #6b7280;
}

.message-status.double-tick {
  color: #6b7280;
}

.message-status.double-tick.read {
  color: #4fc3f7;
}

.message-author {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 0.125rem;
}

.message-media {
  max-width: 300px;
  border-radius: 0.5rem;
  margin-top: 0.25rem;
  cursor: pointer;
  transition: transform 0.2s;
}

.message-media:hover {
  transform: scale(1.02);
}

.audio-player {
  width: 100%;
  margin-top: 0.25rem;
}

.chat-header {
  background: linear-gradient(90deg, var(--muted), #ffffff);
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* presence avatars */
#presenceAvatars img {
  margin-right: -8px;
  box-shadow: 0 0 0 2px white;
}
#chatHeaderPresence {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
#presenceCount {
  font-size: 0.75rem;
  color: #6b7280;
}

/* online badge */
.online-badge {
  font-weight: 600;
}

.chat-header-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.chat-header-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

/* پروفایل کاربر در چت (مستقل از Tailwind) */
.user-profile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 60;
  animation: modalFadeIn 0.2s ease-out;
}

.user-profile-card {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
  width: 100%;
  max-width: 28rem;
  overflow: hidden;
}

.user-profile-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #e5e7eb;
}

.user-profile-card-header h3 {
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0;
  color: #111827;
}

.user-profile-card-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: #6b7280;
  padding: 0 0.25rem;
}

.user-profile-card-close:hover {
  color: #111827;
}

.user-profile-card-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: center;
}

.user-profile-card-avatar {
  width: 96px;
  height: 96px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  margin: 0 auto;
  border: 2px solid #bae6fd;
  object-fit: cover;
  display: block;
  background: var(--primary);
}

.user-profile-card-name {
  font-size: 1.25rem;
  font-weight: 700;
  color: #111827;
  margin: 0;
}

.user-profile-card-username {
  font-size: 0.875rem;
  color: #6b7280;
  margin: 0.25rem 0 0;
}

.user-profile-field {
  text-align: right;
  background: #f9fafb;
  border-radius: 8px;
  padding: 0.75rem;
}

.user-profile-field .label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 0.25rem;
}

.user-profile-field .value {
  font-size: 0.875rem;
  color: #4b5563;
  word-break: break-word;
}

.user-profile-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  border-top: 1px solid #e5e7eb;
  padding-top: 1rem;
  margin-top: 0.25rem;
}

.user-profile-action {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  border: 1px solid #bae6fd;
  border-radius: 8px;
  background: var(--primary-soft);
  color: var(--primary-deep);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
}

.user-profile-action:hover {
  background: var(--primary-tint);
}

.user-profile-action-warn {
  background: #fff7ed;
  border-color: #fdba74;
  color: #c2410c;
}

.user-profile-action-warn:hover {
  background: #ffedd5;
}

.user-profile-action-danger {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #b91c1c;
}

.user-profile-action-danger:hover {
  background: #fee2e2;
}

/* ==================== نشان‌ها / دستاوردها ==================== */

.badges-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.75rem;
  width: 100%;
}

.badge-card {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 0.75rem;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  text-align: right;
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease;
}

.badge-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.badge-card-icon {
  font-size: 1.6rem;
  line-height: 1;
  flex-shrink: 0;
}

.badge-card-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.badge-card-title {
  font-weight: 700;
  font-size: 0.9rem;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.badge-card-sub {
  font-size: 0.72rem;
  color: #4b5563;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.badge-card-desc {
  font-size: 0.7rem;
  color: #6b7280;
  line-height: 1.5;
  margin-top: 0.15rem;
  padding-top: 0.25rem;
  border-top: 1px dashed #e5e7eb;
  overflow-wrap: anywhere;
}

.badge-cat-club .badge-card-sub {
  color: var(--primary-deep);
  font-weight: 600;
}

.badge-card-type {
  font-size: 0.62rem;
  color: #9ca3af;
  font-weight: 600;
}

.badge-cat-academic {
  border-right: 4px solid #f59e0b;
}
.badge-cat-club {
  border-right: 4px solid var(--primary);
}
.badge-cat-council {
  border-right: 4px solid #0ea5e9;
}
.badge-cat-manual {
  border-right: 4px solid #10b981;
}
.badge-cat-custom {
  border-right: 4px solid #ec4899;
}

.badge-icon-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap: 0.4rem;
  max-height: 180px;
  overflow-y: auto;
  padding: 0.5rem;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #f9fafb;
}

.badge-icon-option {
  font-size: 1.4rem;
  line-height: 1;
  padding: 0.4rem;
  border: 2px solid transparent;
  border-radius: 8px;
  background: #ffffff;
  cursor: pointer;
  transition:
    border-color 0.12s,
    transform 0.12s;
}

.badge-icon-option:hover {
  transform: scale(1.12);
  border-color: #bae6fd;
}

.badge-icon-option.selected {
  border-color: var(--primary);
  background: var(--primary-tint);
}

.badges-empty {
  text-align: center;
  color: #9ca3af;
  font-size: 0.85rem;
  padding: 0.5rem 0;
  width: 100%;
}

.important-person-chip {
  display: inline-block;
  margin-top: 0.4rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--primary-tint);
  color: var(--primary-deep);
  font-size: 0.72rem;
  font-weight: 700;
  border: 1px solid #bae6fd;
}

.pinned-message-banner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: #fef3c7;
  border-bottom: 1px solid #fde68a;
  font-size: 0.8125rem;
  color: #92400e;
  flex-shrink: 0;
}

.pinned-message-banner .pinned-message-author {
  font-weight: 700;
}

.pinned-message-banner .pinned-message-content {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.chat-header-details h4 {
  font-weight: 600;
  font-size: 1rem;
  margin: 0;
}

.chat-header-details p {
  font-size: 0.75rem;
  color: #6b7280;
  margin: 0;
}

.online-indicator {
  width: 10px;
  height: 10px;
  background: #4caf50;
  border-radius: 50%;
  border: 2px solid white;
  position: absolute;
  bottom: 0;
  right: 0;
}

.chat-input-area {
  background: #f0f0f0;
  padding: 0.75rem;
  border-top: 1px solid #d1d5db;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.chat-input-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  background: white;
  border-radius: 1.5rem;
  padding: 0.5rem 1rem;
  gap: 0.5rem;
}

.chat-input {
  flex: 1;
  border: none;
  outline: none;
  padding: 0.5rem;
  font-size: 0.9rem;
  background: transparent;
  resize: none;
  max-height: 100px;
  overflow-y: auto;
}

.chat-input:focus {
  outline: none;
}

.chat-input-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.chat-input-btn {
  background: none;
  border: none;
  color: var(--primary);
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 50%;
  transition: background-color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-input-btn:hover {
  background: #f3f4f6;
}

.chat-input-btn.send {
  background: var(--primary);
  color: white;
}

.chat-input-btn.send:hover {
  background: #5568d3;
}

/* نشانگر «در حال تایپ» — تعریف واحد با ظاهر هم‌سان تم بنفش سایت */
.typing-indicator {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  color: #6b7280;
  font-style: italic;
  animation: typingFadeIn 0.25s ease-out;
}

.typing-indicator #typingUser {
  font-weight: 600;
  color: var(--primary-deep);
}

.typing-dots {
  display: flex;
  gap: 0.25rem;
}

.typing-dot {
  width: 6px;
  height: 6px;
  background: var(--primary);
  border-radius: 50%;
  animation: typing 1.4s infinite;
}

.typing-dot:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typing {
  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.7;
  }
  30% {
    transform: translateY(-10px);
    opacity: 1;
  }
}

@keyframes typingFadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.message-options {
  position: absolute;
  top: 0;
  left: -40px;
  background: white;
  border-radius: 0.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  display: none;
  flex-direction: column;
  z-index: 10;
}

.message:hover .message-options {
  display: flex;
}

.message-option-btn {
  padding: 0.5rem 1rem;
  border: none;
  background: white;
  cursor: pointer;
  text-align: right;
  font-size: 0.875rem;
  transition: background-color 0.2s;
}

.message-option-btn:hover {
  background: #f3f4f6;
}

.message-option-btn:first-child {
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}

.message-option-btn:last-child {
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}

.reply-message {
  border-right: 3px solid var(--primary);
  padding-right: 0.5rem;
  margin-bottom: 0.25rem;
  background: rgba(40, 127, 232, 0.1);
  border-radius: 0.25rem;
  padding: 0.25rem 0.5rem;
}

.reply-message-author {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--primary);
}

.reply-message-content {
  font-size: 0.75rem;
  color: #6b7280;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}

.message-date-divider {
  text-align: center;
  margin: 1rem 0;
  position: relative;
}

.message-date-divider::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: #d1d5db;
}

.message-date-divider span {
  background: #e5ddd5;
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  font-size: 0.75rem;
  color: #6b7280;
  position: relative;
  z-index: 1;
}

.media-preview {
  max-width: 200px;
  max-height: 200px;
  border-radius: 0.5rem;
  margin-bottom: 0.5rem;
}

/* استایل‌های پروفایل */
.profile-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem;
}

.profile-image {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--primary);
  margin-bottom: 1rem;
}

.profile-info {
  text-align: center;
  margin-top: 1rem;
}

/* استایل‌های کانال */
.channel-list {
  max-height: 400px;
  overflow-y: auto;
}

.channel-item {
  padding: 1rem;
  border-bottom: 1px solid #e5e7eb;
  cursor: pointer;
  transition: background-color 0.2s;
}

.channel-item:hover {
  background-color: #f3f4f6;
}

.channel-item.active {
  background-color: var(--primary-tint);
  border-right: 4px solid var(--primary);
}

/* استایل‌های پی‌وی */
.conversation-list {
  max-height: 500px;
  overflow-y: auto;
}

.conversation-item {
  padding: 1rem;
  border-bottom: 1px solid #e5e7eb;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: background-color 0.2s;
}

.conversation-item:hover {
  background-color: #f3f4f6;
}

.conversation-item.active {
  background-color: var(--primary-tint);
}

.conversation-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
}

.unread-badge {
  background-color: #ef4444;
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  margin-right: auto;
}

/* استایل‌های مدیا آپلود */
.media-upload-area {
  border: 2px dashed #d1d5db;
  border-radius: 0.5rem;
  padding: 2rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s;
}

.media-upload-area:hover {
  border-color: var(--primary);
}

.media-upload-area.dragover {
  border-color: var(--primary);
  background-color: #f3f4f6;
}

.file-preview {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  background-color: #f3f4f6;
  border-radius: 0.5rem;
  margin-top: 0.5rem;
}

.file-preview button {
  background: none;
  border: none;
  color: #ef4444;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
}

/* ==================== انیمیشن‌های چت بهبود یافته ==================== */

@keyframes messageSlideIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes typingAnimation {
  0%,
  60%,
  100% {
    opacity: 0.7;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(-10px);
  }
}

/* (نشانگر تایپ در بلوک بالایی یکپارچه شده است) */

/* استایل پیام بهبود یافته */
.message-bubble {
  animation: messageSlideIn 0.3s ease-out;
  transition: all 0.2s ease;
}

.message-bubble:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* بج وضعیت آنلاین */
.online-indicator {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 12px;
  height: 12px;
  background-color: #10b981;
  border: 2px solid white;
  border-radius: 50%;
  animation: pulse 2s infinite;
}

.offline-indicator {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 12px;
  height: 12px;
  background-color: #9ca3af;
  border: 2px solid white;
  border-radius: 50%;
}

/* استایل پاسخ */
.reply-message-preview {
  border-left: 4px solid var(--primary);
  background-color: var(--primary-tint);
  padding: 8px 12px;
  border-radius: 4px;
  margin-bottom: 8px;
}

.reply-message-preview .author {
  font-weight: bold;
  color: var(--primary);
  font-size: 0.75rem;
}

.reply-message-preview .content {
  color: #6b7280;
  font-size: 0.875rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* استایل فایل */
.file-message {
  background-color: var(--primary-soft);
  padding: 12px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: background-color 0.2s;
}

.file-message:hover {
  background-color: var(--primary-tint);
}

.file-message a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
}

.file-message a:hover {
  text-decoration: underline;
}

/* کارت فایل پیوست در چت */
.file-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  max-width: 320px;
  text-decoration: none;
  transition:
    border-color 0.15s,
    box-shadow 0.15s,
    transform 0.15s;
}

.file-card:hover {
  border-color: var(--file-accent, var(--primary));
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

.file-card-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #ffffff;
  background: var(--file-accent, var(--primary));
}

.file-card-body {
  flex: 1;
  min-width: 0;
}

.file-card-name {
  font-size: 13px;
  font-weight: 600;
  color: #1f2937;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
  direction: ltr;
  text-align: left;
}

.file-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.file-card-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 2px 7px;
  border-radius: 999px;
  color: #ffffff;
  background: var(--file-accent, var(--primary));
}

.file-card-size {
  font-size: 11px;
  color: #9ca3af;
}

.file-card-download {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  background: #f3f4f6;
  transition:
    background 0.15s,
    color 0.15s;
}

.file-card-download:hover {
  background: var(--file-accent, var(--primary));
  color: #ffffff;
}

/* استایل تاریخ پیام */
.message-date-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 16px 0;
}

.message-date-divider .line {
  flex: 1;
  height: 1px;
  background-color: #e5e7eb;
}

.message-date-divider .date {
  font-size: 0.75rem;
  color: #9ca3af;
  padding: 0 12px;
}

/* بهتری کنترل ورودی */
#messageInput {
  resize: none;
  transition: border-color 0.2s;
}

#messageInput:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(40, 127, 232, 0.1);
}

/* استایل پیام فایل آپلود */
.message-input-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.media-preview-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 0;
}

.media-preview-item {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid #e5e7eb;
}

.media-preview-item img,
.media-preview-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-preview-remove {
  position: absolute;
  top: 2px;
  left: 2px;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  border: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.media-preview-remove:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* استایل‌های ریسپانسیو */
@media (max-width: 768px) {
  .chat-container {
    height: 400px;
  }

  .message-content {
    max-width: 85%;
  }

  .profile-image {
    width: 100px;
    height: 100px;
  }

  .message-bubble {
    max-width: 90%;
  }
}

/* ========================================
   فوتر حرفه‌ای - مدرسه شهید اژه ای دوره اول خمینی شهر
   ======================================== */

.school-footer {
  position: relative;
  background: #ffffff;
  overflow: hidden;
}

.school-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.97) 0%,
    rgba(255, 255, 255, 1) 100%
  );
  z-index: 0;
}

.footer-overlay {
  position: relative;
  z-index: 1;
}

/* --- ستون‌های فوتر --- */
.footer-col {
  text-align: right;
}

.footer-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid;
  border-image: linear-gradient(90deg, var(--primary), #0ea5e9) 1;
}

/* --- لوگو --- */
.footer-logo-wrapper {
  width: 80px;
  height: 80px;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 1rem;
  background: rgba(14, 165, 233, 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 2px solid rgba(14, 165, 233, 0.15);
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.footer-subtitle {
  font-size: 0.85rem;
  color: #64748b;
  margin-bottom: 0.75rem;
}

.footer-description {
  font-size: 0.82rem;
  color: #64748b;
  line-height: 1.8;
}

/* --- لینک‌های سریع --- */
.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 0.6rem;
}

.footer-links a {
  color: #475569;
  text-decoration: none;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.3s ease;
  padding: 0.3rem 0;
}

.footer-links a:hover {
  color: var(--primary);
  transform: translateX(-4px);
}

.footer-link-icon {
  font-size: 0.65rem;
  color: var(--primary);
  transition: color 0.3s ease;
}

.footer-links a:hover .footer-link-icon {
  color: #0ea5e9;
}

/* --- تماس با ما --- */
.footer-contact {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-contact li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.footer-contact-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(14, 165, 233, 0.1);
  color: var(--primary);
  font-size: 0.85rem;
  flex-shrink: 0;
  transition: all 0.3s ease;
  cursor: pointer;
  text-decoration: none;
}

.footer-map-link:hover {
  background: rgba(14, 165, 233, 0.2);
  color: var(--primary-bright);
}

.footer-contact li:hover .footer-contact-icon {
  background: rgba(14, 165, 233, 0.2);
  color: var(--primary-bright);
}

.footer-contact-text {
  color: #475569;
  text-decoration: none;
  font-size: 0.88rem;
  direction: ltr;
  unicode-bidi: plaintext;
}

.footer-contact-text:hover {
  color: var(--primary);
}

/* --- شبکه‌های اجتماعی --- */
.footer-social {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.social-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.25rem;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 500;
  color: #ffffff;
  text-decoration: none;
  transition: all 0.3s ease;
  border: none;
}

.social-btn i {
  font-size: 1rem;
}

eitaa-icon {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 24px;

  height: 24px;

  border-radius: 6px;

  background: rgba(255, 255, 255, 0.25);

  font-family: "Arial", sans-serif;

  font-size: 1rem;

  font-weight: 700;

  font-style: italic;

  line-height: 1;
}

.eitaa-logo-img {
  width: 22px;

  height: 22px;

  object-fit: contain;

  border-radius: 6px;

  background: #ffffff;

  padding: 2px;

  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.eitaa-icon-fallback {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 24px;

  height: 24px;

  border-radius: 6px;

  background: rgba(255, 255, 255, 0.25);

  font-family: "Arial", sans-serif;

  font-size: 1rem;

  font-weight: 700;

  font-style: italic;

  line-height: 1;
}

.social-eitaa {
  background: #f97316;

  color: #ffffff;
}

.social-eitaa:hover {
  background: #ea580c;

  transform: translateY(-2px);

  box-shadow: 0 8px 20px rgba(249, 115, 22, 0.3);
}

.social-aparat {
  background: #ed185a;
  color: #ffffff;
}

.social-aparat:hover {
  background: #be1047;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(237, 28, 90, 0.3);
}

/* --- نوار پایانی --- */
.footer-bottom {
  text-align: center;
}

.footer-divider {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(14, 165, 233, 0.3) 50%,
    transparent 100%
  );
  margin-bottom: 1.25rem;
}

.footer-copyright {
  font-size: 0.78rem;
  color: #94a3b8;
  margin: 0;
}

/* --- ریسپانسیو فوتر --- */
@media (max-width: 768px) {
  .school-footer {
    text-align: center;
  }

  .footer-col {
    text-align: center;
    margin-bottom: 1.5rem;
  }

  .footer-logo-wrapper {
    margin: 0 auto 1rem auto;
  }

  .footer-links a:hover {
    transform: translateX(0);
  }

  .footer-contact li {
    justify-content: center;
  }

  .footer-social {
    justify-content: center;
  }

  .footer-title {
    text-align: center;
  }
}

/* ========================================
   مودال سفارشی (confirm / alert / toast)
   ======================================== */

/* --- اورلی مودال --- */
.custom-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

@keyframes customModalFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes customModalFadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* --- باکس مودال --- */
.custom-modal-box {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  max-width: 420px;
  width: 100%;
  animation: customModalSlideIn 0.25s ease-out;
  overflow: hidden;
}

@keyframes customModalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes customModalSlideOut {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
}

/* --- هدر مودال --- */
.custom-modal-header {
  background: linear-gradient(135deg, var(--primary), var(--primary));
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.custom-modal-header.alert-header {
  background: linear-gradient(135deg, var(--primary), var(--primary));
}

.custom-modal-header.confirm-header {
  background: linear-gradient(135deg, #f59e0b, #f97316);
}

.custom-modal-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.2rem;
}

.alert-header .custom-modal-icon {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

.confirm-header .custom-modal-icon {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

.custom-modal-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
}

/* --- بدنه مودال --- */
.custom-modal-body {
  padding: 1.5rem;
}

.custom-modal-message {
  font-size: 0.95rem;
  color: #374151;
  line-height: 1.7;
  margin: 0;
}

/* --- فوتر مودال --- */
.custom-modal-footer {
  padding: 1rem 1.5rem 1.25rem;
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
}

/* --- دکمه بنفش اصلی --- */
.custom-modal-btn {
  padding: 0.6rem 1.75rem;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: "Vazirmatn", sans-serif;
}

.custom-modal-btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary));
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.35);
}

.custom-modal-btn-primary:hover {
  background: linear-gradient(135deg, var(--primary), var(--primary));
  box-shadow: 0 6px 18px rgba(14, 165, 233, 0.45);
  transform: translateY(-1px);
}

.custom-modal-btn-primary:active {
  transform: translateY(0);
}

.custom-modal-btn-danger {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.35);
}

.custom-modal-btn-danger:hover {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  box-shadow: 0 6px 18px rgba(239, 68, 68, 0.45);
  transform: translateY(-1px);
}

.custom-modal-btn-secondary {
  background: #f3f4f6;
  color: #4b5563;
}

.custom-modal-btn-secondary:hover {
  background: #e5e7eb;
  color: #374151;
}

/* --- تست نوتیفیکیشن (Toast) --- */
.custom-toast-container {
  position: fixed;
  top: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  pointer-events: none;
}

.custom-toast {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  padding: 0.85rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  pointer-events: auto;
  animation: toastSlideIn 0.3s ease-out;
  max-width: 380px;
  border-right: 4px solid var(--primary);
}

.custom-toast.toast-success {
  border-right-color: #10b981;
}

.custom-toast.toast-error {
  border-right-color: #ef4444;
}

.custom-toast.toast-info {
  border-right-color: var(--primary);
}

.custom-toast-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
}

.custom-toast-icon.success {
  color: #10b981;
}
.custom-toast-icon.error {
  color: #ef4444;
}
.custom-toast-icon.info {
  color: var(--primary);
}

.custom-toast-text {
  font-size: 0.9rem;
  color: #374151;
  line-height: 1.5;
  font-family: "Vazirmatn", sans-serif;
}

@keyframes toastSlideIn {
  from {
    opacity: 0;
    transform: translateY(-15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes toastSlideOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-15px);
  }
}

/* --- ریسپانسیو مودال --- */
@media (max-width: 480px) {
  .custom-modal-box {
    max-width: 95%;
  }
  .custom-modal-footer {
    flex-direction: column-reverse;
  }
  .custom-modal-btn {
    width: 100%;
    text-align: center;
  }
}

/* ========================================
   صفحه بارگذاری (Splash Screen)
   ======================================== */
.loading-overlay {
  position: fixed;
  inset: 0;
  background: #ffffff;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  /* The splash is purely decorative. It must NEVER intercept clicks on the
       page beneath it (e.g. the header "Login" button), otherwise the first
       tap is swallowed and the user perceives they must click twice. */
  pointer-events: none;
  transition:
    opacity 0.65s ease-out,
    transform 0.65s ease-out,
    filter 0.65s ease-out;
}

.loading-overlay.loading-hidden {
  opacity: 0;
  transform: scale(1.06);
  filter: blur(6px);
  pointer-events: none;
}

.loading-content {
  text-align: center;
  animation: loadingFloat 3s ease-in-out infinite;
}

.loading-logo {
  width: 168px;
  height: 168px;
  object-fit: contain;
  animation: loadingPulse 1.5s ease-in-out infinite;
  filter: drop-shadow(0 8px 22px rgba(2, 132, 199, 0.16));
  mix-blend-mode: multiply;
}

.loading-spinner {
  width: 46px;
  height: 46px;
  border: 4px solid var(--primary-tint);
  border-top-color: var(--primary);
  border-radius: 50%;
  margin: 26px auto 0;
  animation: spin 0.8s linear infinite;
}

.loading-text {
  margin-top: 18px;
  color: #6b7280;
  font-size: 1.02rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  animation: loadingTextFade 1.6s ease-in-out infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes loadingPulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.92;
  }
}

@keyframes loadingFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

@keyframes loadingTextFade {
  0%,
  100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}

/* ========================================
   تالار افتخارات - Carousel
   ======================================== */
.honors-carousel-container {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.honors-carousel-track-wrapper {
  overflow: hidden;
  flex: 1;
  border-radius: 12px;
  padding: 0.5rem 0;
}

.honors-carousel-track {
  display: flex;
  gap: 1.5rem;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.honors-slide {
  flex: 0 0 auto;
  min-width: 0;
  box-sizing: border-box;
}

.honor-card {
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  height: 100%;
}

.honor-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

.honor-card-image {
  width: 100%;
  height: 200px;
  overflow: hidden;
  background: #f3f4f6;
}

.honor-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.honor-card:hover .honor-card-image img {
  transform: scale(1.08);
}

.honor-card-body {
  padding: 1rem 1.25rem 1.25rem;
}

.honor-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 0.5rem;
  line-height: 1.4;
}

.honor-card-meta {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.honor-rank {
  font-size: 0.8rem;
  color: #f59e0b;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
}

.honor-year {
  font-size: 0.8rem;
  color: #64748b;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
}

.honor-field-badge {
  display: inline-block;
  padding: 0.2rem 0.75rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
}

/* Navigation buttons */
.honors-nav-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #e5e7eb;
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  z-index: 2;
}

.honors-nav-btn:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(2, 132, 199, 0.3);
}

.honors-nav-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}

/* Dots */
.honors-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

.honor-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #d1d5db;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
}

.honor-dot.active {
  background: var(--primary);
  width: 28px;
  border-radius: 5px;
}

.honor-dot:hover {
  background: var(--primary-bright);
}

/* Responsive honors */
@media (max-width: 992px) {
  .honors-slide {
    flex: 0 0 calc(50% - 0.75rem);
  }
  .honor-card-image {
    height: 170px;
  }
}

@media (max-width: 600px) {
  .honors-slide {
    flex: 0 0 100%;
  }
  .honor-card-image {
    height: 200px;
  }
  .honors-nav-btn {
    width: 36px;
    height: 36px;
  }
}

@media (max-width: 768px) {
  .loading-logo {
    width: 120px;
    height: 120px;
  }
}

/* انیمیشن شمارنده آمار صفحه اصلی */
.stat-number {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px;
  transition:
    transform 0.3s ease,
    text-shadow 0.3s ease;
}
.stat-number.counting {
  text-shadow: 0 0 18px currentColor;
}
@keyframes statPop {
  0% {
    transform: scale(0.85);
    opacity: 0.4;
  }
  60% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.card-hover.animate-in .stat-number {
  animation: statPop 0.6s ease-out both;
}

/* =========================================================
   انیمیشن‌ها و افکت‌های پیشرفته (Effects Pack)
   ========================================================= */

html {
  scroll-behavior: smooth;
  font-size: 17px;
  overflow-x: hidden;
}

/* --- نمایش تدریجی هنگام اسکرول (فقط opacity برای جلوگیری از خطای گرافیکی) --- */
.reveal {
  opacity: 0;
  transition: opacity 0.8s ease;
}
.reveal.in-view {
  opacity: 1;
}

/* تاخیرهای پلکانی برای چیدمان کارت‌ها */
.reveal.d1 {
  transition-delay: 0.08s;
}
.reveal.d2 {
  transition-delay: 0.16s;
}
.reveal.d3 {
  transition-delay: 0.24s;
}
.reveal.d4 {
  transition-delay: 0.32s;
}
.reveal.d5 {
  transition-delay: 0.4s;
}
.reveal.d6 {
  transition-delay: 0.48s;
}

/* --- نوار ناوبری با آندرلاین متحرک --- */
.nav-link {
  position: relative;
}
.nav-link::after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  bottom: -6px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-link:hover::after,
.nav-link.active::after {
  transform: scaleX(1);
}
.nav-link.active {
  color: var(--primary) !important;
  text-shadow: 0 0 18px rgba(2, 132, 199, 0.35);
}

/* --- حفظ یک‌خطی هدر و ناو — جلوگیری از شکستن و اسکرول افقی --- */
header .flex {
  flex-wrap: nowrap !important;
  min-width: 0;
}
header h1 {
  white-space: nowrap;
  min-width: 0;
}
header .flex > div {
  min-width: 0;
}
#mainNavList {
  flex-wrap: nowrap !important;
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  min-width: 0;
}
#mainNavList::-webkit-scrollbar {
  display: none;
}
#mainNavList li {
  flex-shrink: 0;
  white-space: nowrap;
}
#userDashboard .flex:not(.flex-wrap) {
  /* فقط ردیف‌هایی که صریحاً wrap را انتخاب نکرده‌اند یک‌خطی می‌مانند؛
       ظرف‌های دارای کلاس flex-wrap (مثل نوار تب‌های تنظیمات) آزادند تا
       به‌جای سرریز از کانتینر، کنترل‌شده بشکنند */
  flex-wrap: nowrap !important;
  min-width: 0;
}
#userDashboard .flex > div {
  min-width: 0;
}

/* --- بنر خوش‌آمدگویی (رنگ و ظاهر اصلی حفظ شد) --- */
.welcome-banner {
  position: relative;
  overflow: hidden;
}

/* درخشش عددهای آمار هنگام شمارش */
.stat-number.counting {
  text-shadow: 0 0 22px rgba(14, 165, 233, 0.55);
}

/* --- بزرگنمایی تصویر کارت‌ها هنگام هاور --- */
.card-hover img {
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.card-hover:hover img {
  transform: scale(1.08);
}

/* --- درخشش (Shine) روی دکمه‌ها --- */
.shine {
  position: relative;
  overflow: hidden;
}
.shine::before {
  content: "";
  position: absolute;
  top: 0;
  left: -130%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.45),
    transparent
  );
  transform: skewX(-20deg);
  transition: left 0.65s ease;
  pointer-events: none;
}
.shine:hover::before {
  left: 130%;
}

/* فشار ظریف روی همه دکمه‌ها */
button:active {
  transform: scale(0.96);
}

/* تکان خفیف روی آیکون شبکه‌های اجتماعی */
.social-btn:hover i {
  animation: wiggle 0.5s ease;
}
@keyframes wiggle {
  0%,
  100% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(-12deg);
  }
  75% {
    transform: rotate(12deg);
  }
}

/* لیفت قوی‌تر و سایه رنگی روی کارت‌ها */
.card-hover:hover {
  box-shadow: 0 14px 30px rgba(2, 132, 199, 0.14);
}

/* --- دکمه بازگشت به بالا --- */
#backToTop {
  position: fixed;
  bottom: 24px;
  left: 24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), #0ea5e9);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px rgba(2, 132, 199, 0.4);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(0.8);
  transition:
    opacity 0.3s ease,
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0.3s;
  z-index: 45;
}
#backToTop.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
#backToTop:hover {
  transform: translateY(-3px) scale(1.06);
}

/* --- ریپل (موج) روی دکمه‌ها --- */
.ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: rgba(255, 255, 255, 0.5);
  animation: rippleAnim 0.6s ease-out;
  pointer-events: none;
}
@keyframes rippleAnim {
  to {
    transform: scale(2.6);
    opacity: 0;
  }
}

/* --- ورود پر جنب‌وجوش مودال‌ها --- */
#loginModal > div,
.custom-modal > div,
.managed-form-modal > div {
  animation: modalZoom 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes modalZoom {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes modalFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* =========================================================
   حذف کامل انیمیشن و افکت‌ها فقط از پنل‌های داشبورد
   (مدیریت / معلم / دانش‌آموز) — بقیه صفحه‌ها دست‌نخورده
   ========================================================= */
#userDashboard *,
#dashboard *,
#userDashboard *::before,
#dashboard *::before,
#userDashboard *::after,
#dashboard *::after {
  animation: none !important;
  transition: none !important;
  transform: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
}
#userDashboard button,
#dashboard button {
  transform: none !important;
}
#userDashboard .ripple,
#dashboard .ripple {
  display: none !important;
}

/* =========================================================
   افکت‌ها و انیمیشن‌های اختصاصی صفحه اصلی (فقط #home)
   افکت‌ها و انیمیشن‌های قبلی دست‌نخورده باقی ماندند.
   ========================================================= */

/* ۱) بنر خوش‌آمدگویی: شیفت ملایم گرادیان */
#home .bg-gradient-to-r {
  background-size: 220% 220%;
  animation: homeGradientShift 9s ease infinite;
}
@keyframes homeGradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* ۲) درخشش ملایم عنوان بنر */
#home .bg-gradient-to-r h2 {
  animation: homeHeadingGlow 4.5s ease-in-out infinite;
}
@keyframes homeHeadingGlow {
  0%,
  100% {
    text-shadow: 0 0 0 rgba(255, 255, 255, 0);
  }
  50% {
    text-shadow: 0 0 18px rgba(255, 255, 255, 0.55);
  }
}

/* ۳) نفس کشیدن ملایم آیکون‌های کارت‌های آمار */
#home .card-hover i {
  animation: homeIconBreath 3.4s ease-in-out infinite;
}
@keyframes homeIconBreath {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.72;
  }
}

/* ۴) هاور آیتم‌های آخرین اخبار */
#home #homeNews > div {
  border-right: 3px solid transparent;
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}
#home #homeNews > div:hover {
  background-color: var(--primary-soft);
  border-right-color: var(--primary);
  box-shadow: -4px 0 14px rgba(14, 165, 233, 0.1);
}

/* احترام به تنظیمات کاهش حرکت کاربر */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ========================================
   Mobile Menu Toggle - Hidden on Desktop
   ======================================== */
.mobile-menu-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--primary);
  cursor: pointer;
  padding: 0.5rem;
  line-height: 1;
  align-items: center;
  justify-content: center;
}

/* ========================================
   Comprehensive Mobile Improvements
   Only affects viewports 768px and below
   ======================================== */
@media (max-width: 768px) {
  html,
  body {
    overflow-x: hidden;
    width: 100%;
  }

  header .container {
    padding-top: 0.6rem !important;
    padding-bottom: 0.6rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  header .fa-graduation-cap {
    font-size: 1.5rem !important;
  }

  header h1 {
    font-size: 1rem !important;
    white-space: nowrap;
  }

  header .fa-graduation-cap {
    flex-shrink: 0;
  }

  #currentDate {
    font-size: 0.7rem;
  }

  header button[onclick*="showLoginModal"] {
    padding: 0.35rem 0.7rem !important;
    font-size: 0.75rem;
    white-space: nowrap;
  }

  nav .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    min-height: 48px;
  }

  /* در موبایل، لیست ناوبری به‌صورت Drawer کشویی رندر می‌شود؛
       تمام استایل‌های آن در بخش «Drawer ناوبری موبایل» (پایین‌تر) تعریف شده است
       تا فقط یک منبع حقیقت برای رفتار منو وجود داشته باشد. */
  .mobile-menu-toggle {
    display: flex;
  }

  main {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  #home .bg-gradient-to-r {
    padding: 1.25rem !important;
    border-radius: 0.75rem !important;
  }

  #home .bg-gradient-to-r h2 {
    font-size: 1.25rem !important;
    margin-bottom: 0.5rem !important;
    text-shadow: none !important;
    animation: none !important;
  }

  #home .bg-gradient-to-r p {
    font-size: 0.85rem !important;
  }

  #home > .grid:first-of-type {
    gap: 0.75rem;
  }

  #home > .grid:first-of-type > div {
    padding: 0.75rem !important;
  }

  .stat-number {
    font-size: 1.25rem !important;
  }

  #home > .grid:first-of-type i {
    font-size: 1.5rem !important;
  }

  #home > .grid:first-of-type .text-gray-500 {
    font-size: 0.75rem !important;
  }

  #home .bg-white.rounded-lg.shadow.p-6,
  #homeNews {
    padding: 0.75rem !important;
  }

  #home .bg-white.rounded-lg.shadow.p-6 h3 {
    font-size: 1rem !important;
  }

  section > h2 {
    font-size: 1.15rem !important;
    margin-bottom: 0.75rem !important;
  }

  section > h2 i {
    font-size: 1rem !important;
  }

  #honors section > h2,
  #facilities section > h2,
  #clubs section > h2,
  #news section > h2,
  #downloads section > h2 {
    font-size: 1.15rem !important;
    margin-bottom: 0.75rem !important;
  }

  section {
    margin-bottom: 1.5rem;
  }

  #downloads .border-b .flex {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    gap: 0.25rem;
    padding-bottom: 0.25rem;
  }

  #downloads .tab-btn {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.8rem;
    white-space: nowrap;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .download-item {
    padding: 0.75rem !important;
  }

  .download-item h3 {
    font-size: 0.95rem !important;
  }

  .school-footer .py-12 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  .school-footer .gap-8 {
    gap: 1rem !important;
  }

  .footer-title {
    font-size: 0.95rem !important;
    margin-bottom: 0.75rem !important;
    padding-bottom: 0.5rem !important;
  }

  .footer-description {
    font-size: 0.78rem !important;
  }

  div[id$="Modal"] {
    padding: 0.75rem !important;
  }

  #loginModal .grid-cols-3 {
    gap: 0.4rem;
  }

  #loginModal .user-type-btn {
    padding: 0.4rem 0.25rem !important;
  }

  #loginModal .user-type-btn i {
    font-size: 1.1rem !important;
    margin-bottom: 0.25rem !important;
  }

  #loginModal .user-type-btn p {
    font-size: 0.7rem !important;
  }

  #loginModal .p-6 {
    padding: 1rem !important;
  }

  #loginModal .rounded-t-lg.p-6 {
    padding: 1rem !important;
  }

  #loginModal h3 {
    font-size: 1.15rem !important;
  }

  input,
  select,
  textarea {
    font-size: 16px !important;
  }

  button,
  .btn,
  [class*="btn"],
  .tab-btn,
  .user-type-btn,
  .nav-link {
    min-height: 44px;
  }

  .chat-input-btn,
  .honors-nav-btn,
  .media-preview-remove,
  #backToTop {
    min-height: auto;
  }

  img {
    max-width: 100% !important;
    height: auto !important;
  }

  .card-hover img,
  .rounded-lg img {
    max-width: 100% !important;
  }

  .honor-card-body {
    padding: 0.75rem !important;
  }

  .honor-card-title {
    font-size: 0.9rem !important;
  }

  .bg-gradient-to-r.text-white.p-4 {
    padding: 0.75rem !important;
  }

  .bg-gradient-to-r.text-white.p-4 h3 {
    font-size: 1rem !important;
  }

  .bg-gradient-to-r.text-white.p-4 i {
    font-size: 1.5rem !important;
  }

  .download-item .bg-\\w + -100 {
    padding: 0.5rem !important;
  }

  .clubsGrid .p-4 .text-gray-600,
  .p-4 .text-gray-600.mb-4 {
    font-size: 0.85rem !important;
  }

  /* Tall modals: keep content inside the viewport and scrollable on short screens */
  #loginModal > div,
  #registrationModal > div,
  #addNewsModal > div,
  #addPostModal > div {
    max-height: 90vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Modal headers stay visible while the body scrolls */
  #loginModal > div > .rounded-t-lg,
  #registrationModal > div > .rounded-t-lg,
  #addNewsModal > div > .rounded-t-lg,
  #addPostModal > div > .rounded-t-lg {
    position: sticky;
    top: 0;
    z-index: 2;
  }
}

/* Very small screens: free up header space to avoid cramped/overflowing layout */
@media (max-width: 480px) {
  #currentDate {
    display: none;
  }
}

@media (max-width: 380px) {
  header h1 {
    font-size: 0.9rem !important;
  }
}

/* ===== ماژول حسابداری ===== */

/* انتخابگر جستجومحور */
.searchable-select {
  position: relative;
}
.searchable-select .ss-options {
  list-style: none;
  margin: 0;
  padding: 4px;
  max-height: 200px;
  overflow: auto;
}
.searchable-select .ss-options li {
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
}
.searchable-select .ss-options li:hover {
  background: #fff7ed;
  color: #c2410c;
}

/* شبکه آیکون‌های اهداف */
.goal-icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
  gap: 6px;
  max-height: 200px;
  overflow: auto;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 8px;
}
.goal-icon-btn {
  width: 46px;
  height: 46px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  color: #6b7280;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.15s;
}
.goal-icon-btn:hover {
  border-color: #fdba74;
  color: #ea580c;
}
.goal-icon-btn.selected {
  background: #f97316;
  border-color: #f97316;
  color: #fff;
}

/* دکمه حسابداری نارنجی در نوار ابزار */
#accountingNavBtn {
  font-family: inherit;
}

/* ===== المپیادها ===== */
.olympiad-card {
  display: flex;
  flex-direction: column;
}
.olympiad-card-banner {
  height: 6px;
  width: 100%;
}
.olympiad-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}
.olympiad-participate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 10px;
  text-decoration: none;
  transition:
    opacity 0.2s,
    transform 0.2s;
}
.olympiad-participate:hover {
  opacity: 0.9;
  transform: translateY(-1px);
  color: #fff;
}
.olympiad-icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
  gap: 6px;
  max-height: 176px;
  overflow: auto;
}
.olympiad-icon-option {
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  border-radius: 8px;
  height: 42px;
  font-size: 18px;
  color: #374151;
  cursor: pointer;
  transition: all 0.15s;
}
.olympiad-icon-option:hover {
  background: #f3f4f6;
  border-color: #7dd3fc;
}
.olympiad-icon-option.selected {
  background: var(--primary-tint);
  border-color: var(--primary);
  color: var(--primary);
}
.olympiad-color-option {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px #e5e7eb;
  cursor: pointer;
  transition: transform 0.15s;
}
.olympiad-color-option:hover {
  transform: scale(1.1);
}
.olympiad-color-option.selected {
  box-shadow: 0 0 0 2px var(--primary);
  transform: scale(1.1);
}

/* گالری تصاویر */
.gallery-item .gallery-img {
  transition: transform 0.35s ease;
}
.gallery-item:hover .gallery-img {
  transform: scale(1.05);
}
.image-input-component [data-img-preview] img {
  max-width: 100%;
}

/* ==================== پنل مدیریت انجمن (ادغام‌شده از club-panel.html) ==================== */
.club-panel-container {
  --primary-color: var(--primary-bright);
  --secondary-color: #438fea;
  --success-color: #22c55e;
  --warning-color: #f59e0b;
  --danger-color: #ef4444;
  --info-color: var(--primary);
  --dark-color: #1f2937;
  --light-color: #f3f4f6;
  --white: #ffffff;
  --border-color: #e5e7eb;
  --text-color: #374151;
  --text-light: #6b7280;
  display: block;
  min-height: 100vh;
  font-family: "IRANYekan", "Vazirmatn", "Tahoma", sans-serif;
  color: var(--text-color);
  background-color: #f1f5f9;
}

.club-panel-container *,
.club-panel-container *::before,
.club-panel-container *::after {
  box-sizing: border-box;
}

.club-panel-container .btn,
.club-panel-container .form-input,
.club-panel-container .form-select,
.club-panel-container .form-textarea,
.club-panel-container .tab,
.club-panel-container .color-option,
.club-panel-container .modal-close {
  font-family: inherit;
}

/* Topbar */
.club-panel-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: linear-gradient(
    90deg,
    var(--primary-color) 0%,
    var(--secondary-color) 100%
  );
  color: white;
  padding: 16px 24px;
}

.club-topbar-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.club-topbar-titles {
  display: flex;
  flex-direction: column;
}

.club-logo {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--primary-color);
  box-shadow: 0 4px 15px rgb(5, 5, 5);
  flex-shrink: 0;
}

.club-name {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
}

.club-role {
  font-size: 0.8rem;
  opacity: 0.85;
}

.club-selector-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.15);
  padding: 8px 14px;
  border-radius: 10px;
}

.club-selector-label {
  font-size: 0.85rem;
  opacity: 0.95;
}

.club-selector {
  background: white;
  color: var(--dark-color);
  border: none;
  border-radius: 8px;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 0.9rem;
  min-width: 160px;
  cursor: pointer;
}

/* Sub navigation */
.club-subnav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  background: white;
  padding: 8px 16px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 0;
  z-index: 90;
}

.club-subnav-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  color: var(--text-color);
  text-decoration: none;
  background: none;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.92rem;
  transition: all 0.25s;
  margin: 0;
}

.club-subnav-item:hover {
  background: rgba(14, 165, 233, 0.1);
  color: var(--primary-color);
}

.club-subnav-item.active {
  background: var(--primary-color);
  color: white;
}

.club-subnav-item i {
  font-size: 1rem;
}

.nav-badge {
  margin-right: auto;
  background: var(--danger-color);
  color: white;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.75rem;
  line-height: 1.4;
}

/* Main Content */
.club-main {
  padding: 0;
}

.club-header {
  background: white;
  padding: 20px 32px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 50;
}

.header-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--dark-color);
}

.header-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.club-panel-container .btn {
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.3s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 0;
}

.club-panel-container .btn-primary {
  background: var(--primary-color);
  color: white;
}

.club-panel-container .btn-primary:hover {
  background: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
}

.club-panel-container .btn-success {
  background: var(--success-color);
  color: white;
}

.club-panel-container .btn-success:hover {
  background: #16a34a;
}

.club-panel-container .btn-danger {
  background: var(--danger-color);
  color: white;
}

.club-panel-container .btn-danger:hover {
  background: #dc2626;
}

.club-panel-container .btn-secondary {
  background: var(--light-color);
  color: var(--text-color);
}

.club-panel-container .btn-secondary:hover {
  background: #e5e7eb;
}

.club-panel-container .btn-outline {
  background: transparent;
  border: 2px solid var(--primary-color);
  color: var(--primary-color);
}

.club-panel-container .btn-outline:hover {
  background: var(--primary-color);
  color: white;
}

/* Content Area */
.club-content {
  padding: 32px;
}

.section-card {
  background: white;
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--light-color);
}

.section-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--dark-color);
  display: flex;
  align-items: center;
  gap: 12px;
}

.section-title i {
  color: var(--primary-color);
}

/* Forms */
.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: var(--text-color);
  font-size: 0.9rem;
}

.form-hint {
  display: block;
  margin-top: 6px;
  font-size: 0.75rem;
  color: var(--text-light, #9ca3af);
}

.form-hint i {
  margin-left: 4px;
  color: var(--primary);
}

.club-panel-container .form-input,
.club-panel-container .form-select,
.club-panel-container .form-textarea {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid var(--border-color);
  border-radius: 10px;
  font-size: 0.95rem;
  transition: all 0.3s;
  background: white;
  font-family: inherit;
  min-height: 0;
}

.club-panel-container .form-input:focus,
.club-panel-container .form-select:focus,
.club-panel-container .form-textarea:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.1);
}

.form-textarea {
  min-height: 120px;
  resize: vertical;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.form-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
}

.form-checkbox input {
  width: 18px;
  height: 18px;
  accent-color: var(--primary-color);
}

/* ---------- فرم‌های مدیریت انجمن: polished states (scoped, IranYekan inherits) ---------- */
.club-panel-container .form-group {
  margin-bottom: 18px;
}

.club-panel-container .form-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-weight: 600;
  color: var(--dark-color);
  font-size: 0.9rem;
}

.club-panel-container .form-label i {
  color: var(--primary-color);
  font-size: 0.85rem;
  width: 18px;
  text-align: center;
}

.club-panel-container .required-star {
  color: var(--danger-color);
  font-weight: 700;
  margin-right: 2px;
}

.club-panel-container .optional-tag {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-light);
  background: var(--light-color);
  border-radius: 20px;
  padding: 1px 10px;
}

.club-panel-container .form-input::placeholder,
.club-panel-container .form-textarea::placeholder {
  color: #a8b1c2;
}

.club-panel-container .form-input:hover:not(:disabled):not(:focus),
.club-panel-container .form-select:hover:not(:disabled):not(:focus),
.club-panel-container .form-textarea:hover:not(:disabled):not(:focus) {
  border-color: #c3cade;
}

.club-panel-container .form-input:disabled,
.club-panel-container .form-select:disabled,
.club-panel-container .form-textarea:disabled {
  background: #f1f4f9;
  color: #9aa4b5;
  cursor: not-allowed;
  border-color: var(--border-color);
  border-style: dashed;
}

.club-panel-container .form-input.is-invalid,
.club-panel-container .form-select.is-invalid,
.club-panel-container .form-textarea.is-invalid {
  border-color: var(--danger-color);
  background: #fff8f8;
}

.club-panel-container .form-input.is-invalid:focus,
.club-panel-container .form-select.is-invalid:focus,
.club-panel-container .form-textarea.is-invalid:focus {
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.12);
}

.club-panel-container .form-hint {
  font-size: 0.78rem;
  line-height: 1.7;
}

.club-panel-container .form-error {
  display: none;
  margin-top: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--danger-color);
}

.club-panel-container .form-error.show {
  display: flex;
  align-items: center;
  gap: 5px;
  animation: clubFormErrorIn 0.2s ease;
}

@keyframes clubFormErrorIn {
  from {
    opacity: 0;
    transform: translateY(-3px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.club-panel-container .form-row {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px 20px;
}

/* گروه‌بندی بخش‌های فرم — سلسله‌مراتب بصری داخل مودال */
.club-panel-container .form-section {
  border: 1px solid #edf0f7;
  border-radius: 14px;
  padding: 18px 18px 6px;
  margin-bottom: 18px;
  background: #fbfcfe;
}

.club-panel-container .form-section > :last-child {
  margin-bottom: 12px;
}

.club-panel-container .form-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--primary-color);
  margin: -4px 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px dashed #e2e8f0;
}

.club-panel-container .form-section-title i {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(14, 165, 233, 0.1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
}

/* کلید دوعضابی رایگان / پولی */
.club-panel-container .seg-control {
  display: inline-flex;
  background: #eef1f7;
  border: 1.5px solid var(--border-color);
  border-radius: 12px;
  padding: 4px;
  gap: 4px;
  width: 100%;
}

.club-panel-container .seg-btn {
  flex: 1;
  border: none;
  background: transparent;
  padding: 10px 12px;
  border-radius: 9px;
  font-size: 0.9rem;
  font-weight: 700;
  font-family: inherit;
  color: var(--text-light);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition: all 0.25s ease;
}

.club-panel-container .seg-btn:hover {
  color: var(--text-color);
  background: rgba(255, 255, 255, 0.6);
}

.club-panel-container .seg-btn.seg-selected {
  background: white;
  color: var(--dark-color);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
}

.club-panel-container .seg-btn.seg-selected.seg-free {
  color: #15803d;
}

.club-panel-container .seg-btn.seg-selected.seg-paid {
  color: #b45309;
}

.club-panel-container .seg-btn i {
  font-size: 0.85rem;
}

.club-panel-container .seg-btn:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

/* فیلد قیمت با پسوند «تومان» (RTL: ورودی سمت راست، پسوند سمت چپ) */
.club-panel-container .input-affix-wrap {
  display: flex;
  align-items: stretch;
}

.club-panel-container .input-affix-wrap .form-input {
  border-left: none;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.club-panel-container .input-affix-wrap .form-input:disabled {
  border-style: dashed;
}

.club-panel-container .input-suffix {
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  background: #eef1f7;
  border: 1.5px solid var(--border-color);
  border-right: none;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-light);
  white-space: nowrap;
}

/* پیام جایگزین فیلد غیرفعال قیمت (دوره رایگان) */
.club-panel-container .price-disabled-note {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 11px 14px;
  border: 1.5px dashed var(--border-color);
  border-radius: 10px;
  background: #f6f8fb;
  color: var(--text-light);
  font-size: 0.88rem;
}

.club-panel-container .price-disabled-note i {
  color: var(--success-color);
}

/* نمایش خوانای مبلغ + انیمیشن ظاهر شدن فیلدهای شهریه */
.club-panel-container .price-formatted {
  opacity: 0;
  transition: opacity 0.2s ease;
  color: var(--primary-color);
  font-weight: 600;
}

@keyframes clubFieldReveal {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.club-panel-container .input-affix-wrap.is-reveal {
  animation: clubFieldReveal 0.24s ease;
}

.club-panel-container #itemPaymentInfoGroup.is-reveal {
  animation: clubFieldReveal 0.24s ease;
}

/* حذف اسپینرهای ورودی عددی (ظاهر یکدست با پسوند تومان) */
.club-panel-container .form-input[type="number"]::-webkit-outer-spin-button,
.club-panel-container .form-input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.club-panel-container .form-input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* فلش سفارشی و یکدست برای لیست‌ها (چپ‌چین در RTL) */
.club-panel-container .form-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7280' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 14px center;
  padding-left: 34px;
  cursor: pointer;
}

/* Cards */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}

.club-panel-container .card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  border: 2px solid var(--border-color);
  transition: all 0.3s;
  cursor: pointer;
  box-shadow: none;
  margin: 0;
}

.club-panel-container .card:hover {
  border-color: var(--primary-color);
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.club-panel-container .card-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--dark-color);
}

.card-badge {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
}

.badge-active {
  background: #dcfce7;
  color: #166534;
}

.badge-inactive {
  background: #fee2e2;
  color: #991b1b;
}

.badge-urgent {
  background: #fef3c7;
  color: #92400e;
}

.card-body {
  color: var(--text-light);
  font-size: 0.9rem;
  line-height: 1.6;
}

.card-footer {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-meta {
  font-size: 0.8rem;
  color: var(--text-light);
  display: flex;
  gap: 16px;
}

.card-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.card-actions {
  display: flex;
  gap: 8px;
}

.btn-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}

.btn-icon-edit {
  background: var(--primary-tint);
  color: var(--primary-color);
}

.btn-icon-edit:hover {
  background: var(--primary-color);
  color: white;
}

.btn-icon-delete {
  background: #fee2e2;
  color: var(--danger-color);
}

.btn-icon-delete:hover {
  background: var(--danger-color);
  color: white;
}

/* Modal */
.club-panel-container .modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.club-panel-container .modal-overlay.active {
  display: flex;
}

.club-panel-container .modal {
  background: white;
  border-radius: 16px;
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-title {
  font-size: 1.25rem;
  font-weight: 700;
}

.modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--text-light);
  transition: color 0.3s;
}

.modal-close:hover {
  color: var(--danger-color);
}

.modal-body {
  padding: 24px;
}

.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* Stats */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}

.stat-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s;
}

.stat-card:hover {
  transform: translateY(-4px);
}

.stat-icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: white;
}

.stat-icon-blue {
  background: linear-gradient(135deg, var(--primary), var(--primary-deep));
}
.stat-icon-green {
  background: linear-gradient(135deg, #22c55e, #16a34a);
}
.stat-icon-purple {
  background: linear-gradient(135deg, var(--primary), var(--primary-deep));
}
.stat-icon-orange {
  background: linear-gradient(135deg, #f59e0b, #d97706);
}
.stat-icon-teal {
  background: linear-gradient(135deg, #14b8a6, #0d9488);
}
.stat-icon-pink {
  background: linear-gradient(135deg, #ec4899, #db2777);
}

.club-panel-container .image-upload-row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 8px;
}

.club-panel-container .image-upload-row .form-input[type="file"] {
  flex: 1;
  padding: 6px 10px;
}

.club-panel-container .image-preview {
  margin-top: 10px;
}

.club-panel-container .image-preview img {
  max-width: 160px;
  max-height: 160px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  object-fit: cover;
}

/* Communication methods list */
.communication-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  margin-bottom: 10px;
  background: #fff;
}

.communication-item .communication-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--light-color);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.communication-item .communication-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.communication-item .communication-icon i {
  font-size: 1.2rem;
  color: var(--text-light);
}

.communication-item .communication-info {
  flex: 1;
  min-width: 0;
}

.communication-item .communication-title {
  font-weight: 600;
  color: var(--dark-color);
  font-size: 0.95rem;
}

.communication-item .communication-info a {
  color: var(--primary-color);
  font-size: 0.85rem;
  text-decoration: none;
  word-break: break-all;
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.communication-item .communication-info a:hover {
  text-decoration: underline;
}

.stat-content h3 {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--dark-color);
  margin: 0;
}

.stat-content p {
  color: var(--text-light);
  font-size: 0.9rem;
  margin: 0;
}

/* Table */
.table-container {
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th,
.data-table td {
  padding: 14px 16px;
  text-align: right;
  border-bottom: 1px solid var(--border-color);
}

.data-table th {
  background: var(--light-color);
  font-weight: 600;
  color: var(--text-color);
  font-size: 0.85rem;
  text-transform: uppercase;
}

.data-table tr:hover {
  background: #f9fafb;
}

.status-badge {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 500;
}

.status-pending {
  background: #fef3c7;
  color: #92400e;
}
.status-approved {
  background: #dcfce7;
  color: #166534;
}
.status-rejected {
  background: #fee2e2;
  color: #991b1b;
}

/* Empty State */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-light);
}

.empty-state i {
  font-size: 4rem;
  margin-bottom: 20px;
  opacity: 0.3;
}

.empty-state h3 {
  font-size: 1.25rem;
  margin-bottom: 8px;
  color: var(--text-color);
}

/* Color Picker */
.color-options {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.color-option {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  border: 3px solid transparent;
  transition: all 0.3s;
  padding: 0;
}

.color-option:hover,
.color-option.selected {
  transform: scale(1.1);
  border-color: var(--dark-color);
}

/* Tabs */
.club-panel-container .tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  border-bottom: 2px solid var(--border-color);
  padding-bottom: 8px;
  overflow-x: auto;
}

.club-panel-container .tab {
  padding: 12px 24px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-light);
  border-radius: 8px 8px 0 0;
  transition: all 0.3s;
  white-space: nowrap;
  min-height: 0;
}

.club-panel-container .tab:hover {
  color: var(--primary-color);
  background: var(--light-color);
}

.club-panel-container .tab.active {
  color: var(--primary-color);
  background: var(--light-color);
  position: relative;
}

.club-panel-container .tab.active::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--primary-color);
}

/* Loading */
.club-panel-container .loading {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 60px;
}

.club-panel-container .spinner {
  width: 50px;
  height: 50px;
  border: 4px solid var(--border-color);
  border-top-color: var(--primary-color);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Toast */
.club-panel-container .toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--dark-color);
  color: white;
  padding: 16px 24px;
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
  z-index: 2000;
  display: none;
  align-items: center;
  gap: 12px;
  animation: toastSlideUp 0.3s ease;
}

.club-panel-container .toast.show {
  display: flex;
}

.club-panel-container .toast-success {
  background: var(--success-color);
}
.club-panel-container .toast-error {
  background: var(--danger-color);
}
.club-panel-container .toast-warning {
  background: var(--warning-color);
}

@keyframes toastSlideUp {
  from {
    opacity: 0;
    transform: translate(-50%, 20px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

/* Club view content sections */
.club-view-content {
  display: none;
}
.club-view-content.active {
  display: block;
}

/* Jalali date picker */
.jalali-datepicker {
  position: absolute;
  z-index: 10000;
  width: 300px;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  padding: 10px;
  font-family: inherit;
  direction: rtl;
}

.jalali-datepicker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  margin-bottom: 8px;
}

.jalali-datepicker-nav {
  width: 30px;
  height: 30px;
  border: none;
  background: var(--light-color);
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  color: var(--text-color);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.jalali-datepicker-nav:hover {
  background: var(--primary-color);
  color: #fff;
}

.jalali-datepicker-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--dark-color);
  text-align: center;
  flex: 1;
}

.jalali-datepicker-grid {
  display: block;
}

.jalali-datepicker-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.jalali-datepicker-weekdays {
  margin-bottom: 4px;
}

.jalali-datepicker-weekday {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-light);
  padding: 4px 0;
}

.jalali-datepicker-cell {
  text-align: center;
  padding: 7px 0;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--text-color);
}

.jalali-datepicker-cell:hover {
  background: var(--light-color);
}

.jalali-datepicker-cell.is-today {
  font-weight: 700;
  color: var(--primary-color);
}

.jalali-datepicker-cell.is-selected {
  background: var(--primary-color);
  color: #fff;
  font-weight: 700;
}

.jalali-datepicker-cell.is-disabled {
  opacity: 0.3;
  cursor: not-allowed;
  text-decoration: line-through;
  pointer-events: none;
}

.jalali-datepicker-footer button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.jalali-datepicker-cell.jalali-datepicker-empty {
  cursor: default;
}

.jalali-datepicker-footer {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-color);
}

.jalali-datepicker-footer button {
  border: none;
  background: var(--light-color);
  color: var(--text-color);
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.8rem;
  font-family: inherit;
}

.jalali-datepicker-footer button:hover {
  background: var(--primary-color);
  color: #fff;
}

.jalali-datepicker-footer .jalali-datepicker-clear {
  color: var(--danger-color, #dc2626);
}

.jalali-datepicker-footer .jalali-datepicker-clear:hover {
  background: var(--danger-color, #dc2626);
  color: #fff;
}

/* Responsive */
@media (max-width: 1024px) {
  .club-subnav {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .club-subnav-item {
    flex-shrink: 0;
  }
  .club-panel-topbar {
    padding: 12px 16px;
  }
}

/* ============================================================
   UX Polish Layer — انیمیشن‌ها، بازخورد لمسی و بهینه‌سازی‌های رندر
   (GPU-friendly: فقط opacity/transform، بدون شکستن استایل‌های موجود)
   ============================================================ */

:root {
  --ux-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ux-fast: 150ms;
  --ux-normal: 220ms;
}

/* اسکرول نرم در کل برنامه (با احترام به تنظیمات کاهش حرکت) */
html {
  scroll-behavior: smooth;
}

/* اسکرول‌بار سبک و یکدست در تمام پنل‌ها */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.5) transparent;
}
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.45);
  border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 116, 139, 0.65);
}

/* حلقه فوکوس یکدست برای دسترس‌پذیری و حس واکنش سریع */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  transition: outline-color var(--ux-fast) var(--ux-ease);
}

/* بازخورد فشرده‌شدن دکمه‌ها — فقط المان‌های تعاملی اصلی */
button:not(:disabled),
[role="button"]:not([aria-disabled="true"]),
.btn,
.nav-item,
.tab,
.club-subnav-item {
  transition:
    transform calc(var(--ux-fast)) var(--ux-ease),
    box-shadow var(--ux-normal) var(--ux-ease),
    background-color var(--ux-fast) var(--ux-ease),
    color var(--ux-fast) var(--ux-ease),
    opacity var(--ux-fast) var(--ux-ease);
  will-change: auto;
}
button:not(:disabled):active,
.btn:not(:disabled):active,
.nav-item:active,
.tab:active,
.club-subnav-item:active {
  transform: scale(0.97);
}

/* حالت «در حال انجام» دکمه‌ها */
.btn-busy {
  opacity: 0.75 !important;
  cursor: progress !important;
  pointer-events: none !important;
}

/* نوار پیشرفت ناوبری بالای صفحه */
#navProgressBar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 2147483000;
  pointer-events: none;
  background: transparent;
  overflow: hidden;
  opacity: 1;
  transition: opacity 250ms var(--ux-ease);
}
#navProgressBar .nav-progress-inner {
  height: 100%;
  width: 38%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primary), var(--primary), #ec4899);
  animation: navProgressSlide 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes navProgressSlide {
  from {
    transform: translateX(-120%);
  }
  to {
    transform: translateX(320%);
  }
}

/* اسکلتون لودر برای لیست‌ها و کارت‌ها */
.skeleton {
  position: relative;
  overflow: hidden;
  background: #eef1f6;
  border-radius: 10px;
  min-height: 14px;
  user-select: none;
  pointer-events: none;
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: skeletonShimmer 1.4s infinite;
}
@keyframes skeletonShimmer {
  to {
    transform: translateX(100%);
  }
}
.skeleton-card {
  padding: 18px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.skeleton-line {
  height: 13px;
  margin-bottom: 10px;
}
.skeleton-title {
  height: 20px;
  width: 45%;
  margin-bottom: 14px;
}

/* ورود نرم عناصر لیست/کارت بدون فشار به CPU */
.fade-in-up {
  animation: uxFadeInUp var(--ux-normal) var(--ux-ease) both;
}
@keyframes uxFadeInUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* جلوگیری از پرش چیدمان هنگام بارگذاری تصاویر محتوایی */
img[loading="lazy"] {
  background: #f1f5f9;
}

/* بهبود لمس در موبایل */
@media (hover: none) and (pointer: coarse) {
  button:not(:disabled):active,
  .btn:not(:disabled):active,
  .nav-item:active,
  .club-subnav-item:active {
    transform: scale(0.98);
    filter: brightness(0.96);
  }
}

/* کاهش حرکت برای کاربرانی که آن را ترجیح می‌دهند */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  #navProgressBar .nav-progress-inner {
    animation-duration: 2s;
  }
  .skeleton::after {
    animation: none;
  }
  .fade-in-up {
    animation: none;
  }
}

/* ==================== ماشین حساب (Calculator) ==================== */
.calc-btn {
  height: 3rem;
  border-radius: 0.75rem;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1;
  transition:
    background-color 0.15s ease,
    transform 0.1s ease,
    box-shadow 0.15s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.calc-btn:focus-visible {
  outline: 2px solid #f97316;
  outline-offset: 2px;
}
@media (max-width: 380px) {
  .calc-btn {
    height: 2.6rem;
    font-size: 1rem;
  }
}

/* ==================== حضور و غیاب ==================== */
.att-btn {
  min-width: 72px;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1.5px solid #d1d5db;
  background: #ffffff;
  color: #4b5563;
  font-size: 0.85rem;
  font-weight: 600;
  transition: all var(--ux-normal, 220ms) var(--ux-ease, ease);
  cursor: pointer;
}
.att-btn:hover {
  transform: translateY(-1px);
}
.att-btn.present:hover {
  border-color: #22c55e;
}
.att-btn.absent:hover {
  border-color: #ef4444;
}
.att-btn.late:hover {
  border-color: #f59e0b;
}
.att-btn-active-present {
  background: #22c55e !important;
  border-color: #16a34a !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.35);
}
.att-btn-active-absent {
  background: #ef4444 !important;
  border-color: #dc2626 !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.35);
}
.att-btn-active-late {
  background: #f59e0b !important;
  border-color: #d97706 !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.35);
}
.att-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* --- گردش‌کار یکپارچهٔ حضور و غیاب: مراحل، وضعیت کلاس، چیپ تاریخ --- */
.att-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 4px;
  margin-left: 6px;
  border-radius: 9999px;
  background: var(--primary-tint);
  color: var(--primary-deep);
  font-size: 11px;
  font-weight: 700;
}

.att-seg {
  display: inline-flex;
  gap: 4px;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 4px;
  max-width: 100%;
}

.att-seg-btn {
  flex: 1;
  min-width: 140px;
  padding: 9px 18px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: #6b7280;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--ux-normal, 220ms) var(--ux-ease, ease);
}

.att-seg-btn:hover {
  background: #e5e7eb;
}

.att-seg-btn.active.att-seg-held {
  background: #16a34a;
  color: #fff;
  box-shadow: 0 2px 8px rgba(22, 163, 74, 0.35);
}

.att-seg-btn.active.att-seg-notheld {
  background: #d97706;
  color: #fff;
  box-shadow: 0 2px 8px rgba(217, 119, 6, 0.35);
}

.att-datechip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1.5px solid #d1d5db;
  background: #fff;
  color: #374151;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--ux-normal, 220ms) var(--ux-ease, ease);
}

.att-datechip:hover {
  border-color: var(--primary-bright);
  background: var(--primary-soft);
  transform: translateY(-1px);
}

.att-datechip-active {
  border-color: var(--primary) !important;
  background: var(--primary) !important;
  color: #fff !important;
  box-shadow: 0 2px 10px rgba(2, 132, 199, 0.35);
}

.att-datechip-active .att-datechip-today {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}

.att-datechip-today {
  font-size: 10px;
  background: var(--primary-tint);
  color: var(--primary-deep);
  padding: 2px 7px;
  border-radius: 9999px;
}

/* ==================== تاریخچه جلسات — کارت‌های جلسه ==================== */

.att-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}

.att-grid-placeholder {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px 0;
}

.att-card {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e9e5f4;
  border-radius: 16px;
  padding: 16px 16px 12px 16px;
  cursor: pointer;
  text-align: right;
  box-shadow:
    0 1px 3px rgba(76, 29, 149, 0.06),
    0 8px 24px -18px rgba(76, 29, 149, 0.25);
  transition:
    transform var(--ux-normal, 220ms) var(--ux-ease, ease),
    box-shadow var(--ux-normal, 220ms) var(--ux-ease, ease),
    border-color var(--ux-normal, 220ms) var(--ux-ease, ease);
  outline: none;
}

.att-card::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--primary-bright), var(--primary));
  opacity: 0.85;
}

.att-card.att-card-held::before {
  background: linear-gradient(180deg, #34d399, #059669);
}
.att-card.att-card-notheld::before {
  background: linear-gradient(180deg, #fbbf24, #d97706);
}
.att-card.att-card-locked::before {
  background: linear-gradient(180deg, #cbd5e1, #94a3b8);
}

.att-card:hover:not(.att-card-locked) {
  transform: translateY(-3px);
  border-color: #bae6fd;
  box-shadow:
    0 4px 10px rgba(76, 29, 149, 0.08),
    0 18px 40px -20px rgba(76, 29, 149, 0.35);
}

.att-card:focus-visible {
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.35);
}

.att-card-locked {
  cursor: default;
  opacity: 0.78;
}
.att-card-locked:hover {
  transform: none;
}

.att-card-highlight {
  animation: attCardPulse 1.2s ease-in-out 2;
}
@keyframes attCardPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(2, 132, 199, 0);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(2, 132, 199, 0.3);
  }
}

.att-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.att-card-title {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-weight: 800;
  color: #1f2937;
  font-size: 0.95rem;
}

.att-card-class {
  color: var(--primary-deep);
}
.att-card-subject {
  color: #374151;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.att-card-sep {
  color: #7dd3fc;
  font-size: 0.8rem;
}

.att-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 9999px;
}
.att-badge-sm {
  font-size: 10px;
  padding: 2px 8px;
}
.att-badge-held {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}
.att-badge-notheld {
  background: #fffbeb;
  color: #b45309;
  border: 1px solid #fde68a;
}
.att-badge-present {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}
.att-badge-absent {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}
.att-badge-late {
  background: #fffbeb;
  color: #b45309;
  border: 1px solid #fde68a;
}

/* ==================== حضور و غیاب کل مدرسه (ادمین) ==================== */

.adm-att-table tbody td {
  vertical-align: middle;
}

@media (max-width: 640px) {
  .adm-att-table {
    min-width: 720px !important;
  }
}

.att-card-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 10px;
}

.att-date-pill {
  display: inline-flex;
  align-items: center;
  background: var(--primary-soft);
  color: var(--primary-ink);
  border-radius: 9999px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 700;
}

.att-days-line {
  display: inline-flex;
  align-items: center;
  color: #6b7280;
  font-size: 12px;
}

.att-card-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 12px;
}

.att-stat {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid #eee7fb;
  background: #faf9fe;
  border-radius: 10px;
  padding: 7px 4px;
  cursor: pointer;
  font-size: 12px;
  color: #4b5563;
  transition: all var(--ux-fast, 160ms) ease;
}
.att-stat strong {
  font-size: 15px;
  font-weight: 800;
}
.att-stat span {
  color: #6b7280;
}
.att-stat i {
  font-size: 11px;
}
.att-stat:hover {
  transform: translateY(-1px);
}
.att-stat-present {
  color: #047857;
}
.att-stat-present:hover {
  border-color: #6ee7b7;
  background: #ecfdf5;
}
.att-stat-absent {
  color: #b91c1c;
}
.att-stat-absent:hover {
  border-color: #fca5a5;
  background: #fef2f2;
}
.att-stat-late {
  color: #b45309;
}
.att-stat-late:hover {
  border-color: #fcd34d;
  background: #fffbeb;
}

.att-names-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--ux-normal, 240ms) var(--ux-ease, ease);
}
.att-names-panel.open {
  max-height: 320px;
  overflow-y: auto;
}
.att-names-inner {
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.att-name-group-title {
  font-size: 11.5px;
  font-weight: 700;
  margin-bottom: 4px;
}
.att-tone-present {
  color: #047857;
}
.att-tone-absent {
  color: #b91c1c;
}
.att-tone-late {
  color: #b45309;
}

.att-name-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.att-name-pill {
  background: #f3f0fb;
  color: #4c1d95;
  border: 1px solid #e5ddf9;
  border-radius: 9999px;
  padding: 2px 9px;
  font-size: 11px;
}

.att-notheld-note {
  margin-top: 12px;
  background: #fffbeb;
  border: 1px dashed #fde68a;
  border-radius: 10px;
  padding: 8px 12px;
  color: #92400e;
}

.att-card-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--primary-tint);
}

.att-edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 9px;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--ux-fast, 160ms) ease;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.25);
}
.att-edit-btn:hover {
  background: var(--primary-deep);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.35);
}

.att-icon-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  border: 1px solid #ece8f7;
  background: #fff;
  color: #6b7280;
  cursor: pointer;
  transition: all var(--ux-fast, 160ms) ease;
}
.att-icon-btn:hover {
  background: var(--primary-soft);
  color: var(--primary-deep);
  border-color: #bae6fd;
}

.att-lock-note {
  display: inline-flex;
  align-items: center;
  color: #94a3b8;
  font-size: 11.5px;
  font-weight: 600;
}

/* ==================== مودال ویرایش جلسه ==================== */

.att-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(30, 20, 60, 0.45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  transition: opacity 180ms ease;
}
.att-modal-overlay.open {
  opacity: 1;
}

.att-modal {
  background: #fff;
  border-radius: 20px;
  width: 100%;
  max-width: 640px;
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 25px 80px -20px rgba(30, 20, 60, 0.5);
  transform: translateY(14px) scale(0.985);
  transition: transform 180ms ease;
}
.att-modal-overlay.open .att-modal {
  transform: translateY(0) scale(1);
}

.att-modal-head {
  background: linear-gradient(
    135deg,
    var(--primary-deep),
    var(--primary) 55%,
    var(--primary)
  );
  color: #fff;
  padding: 18px 22px;
}

.att-modal-close {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  cursor: pointer;
  transition: background var(--ux-fast, 160ms) ease;
  flex-shrink: 0;
}
.att-modal-close:hover {
  background: rgba(255, 255, 255, 0.3);
}

.att-modal-body {
  padding: 18px 22px;
  overflow-y: auto;
  flex: 1;
}

.att-modal-foot {
  padding: 14px 22px;
  border-top: 1px solid #f0ecfa;
  background: #fcfbfe;
}

.att-seg-compact .att-seg-btn {
  min-width: 110px;
  padding: 7px 14px;
  font-size: 0.82rem;
}

.att-seg.att-seg-locked {
  opacity: 0.55;
  pointer-events: none;
}

@media (max-width: 640px) {
  .att-cards-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .att-modal-overlay {
    padding: 10px;
  }
  .att-modal {
    max-height: calc(100vh - 20px);
    border-radius: 16px;
  }
  .att-modal-body,
  .att-modal-foot {
    padding-left: 14px;
    padding-right: 14px;
  }
  .att-modal-head {
    padding: 14px;
  }
  .att-card-stats {
    gap: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .att-card,
  .att-modal,
  .att-modal-overlay,
  .att-names-panel,
  .att-stat,
  .att-edit-btn {
    transition: none !important;
    animation: none !important;
  }
}

/* ==================== جلسات انجمن — همان دستگاه طراحی حضور و غیاب ====================
   کلاس‌های مشترک index.html و club-panel.html (بدون وابستگی به Tailwind) */
.cm-wrap {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.cm-card {
  background: #fff;
  border: 1px solid #f3f4f6;
  border-radius: 12px;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.1),
    0 1px 2px rgba(0, 0, 0, 0.06);
}
.cm-card-head {
  padding: 24px;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.cm-card-body {
  padding: 24px;
}
.cm-h2 {
  margin: 0;
  font-size: 20px;
  line-height: 1.4;
  font-weight: 800;
  color: #111827;
}
.cm-sub {
  font-size: 14px;
  color: #6b7280;
  margin: 4px 0 0;
}
.cm-sub strong {
  color: #374151;
}
.cm-icon {
  margin-left: 8px;
  color: var(--primary);
}
.cm-field-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #6b7280;
  margin-bottom: 8px;
}
.cm-field-sub {
  font-weight: 400;
  color: #9ca3af;
  font-size: 11px;
}
.cm-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  color: #111827;
  background: #fff;
  outline: none;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}
.cm-input:focus {
  border-color: var(--primary-bright);
  box-shadow: 0 0 0 3px rgba(233, 213, 255, 0.65);
}
.cm-input:disabled {
  background: #f9fafb;
  color: #9ca3af;
}
textarea.cm-input {
  resize: none;
}
.cm-input-search {
  max-width: 260px;
}
.cm-actions-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
}
.cm-spacer {
  flex: 1;
}
.cm-marked {
  font-size: 14px;
  color: #4b5563;
}
.cm-hint {
  font-size: 12px;
  color: #9ca3af;
}
.cm-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition:
    background 0.15s ease,
    box-shadow 0.15s ease;
}
.cm-btn-primary:hover {
  background: var(--primary-deep);
  box-shadow: 0 4px 10px rgba(126, 34, 206, 0.25);
}
.cm-btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.cm-btn-primary-sm {
  padding: 8px 16px;
  font-weight: 600;
}
.cm-btn-ghost {
  display: inline-flex;
  align-items: center;
  background: #f3f4f6;
  color: #374151;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease;
}
.cm-btn-ghost:hover {
  background: #e5e7eb;
}
.cm-btn-export {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #059669;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition:
    background 0.15s ease,
    box-shadow 0.15s ease;
}
.cm-btn-export:hover {
  background: #047857;
  box-shadow: 0 4px 10px rgba(4, 120, 87, 0.2);
}
.cm-btn-mark {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #dcfce7;
  color: #166534;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease;
}
.cm-btn-mark:hover {
  background: #bbf7d0;
}
.cm-btn-mark-red {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #fee2e2;
  color: #991b1b;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease;
}
.cm-btn-mark-red:hover {
  background: #fecaca;
}
.cm-btn-edit {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--primary-soft);
  color: var(--primary-deep);
  border: 1px solid #bae6fd;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease;
}
.cm-btn-edit:hover {
  background: var(--primary-tint);
}
.cm-icon-btn-danger {
  color: #6b7280;
}
.cm-icon-btn-danger:hover {
  background: #fef2f2 !important;
  color: #b91c1c !important;
  border-color: #fecaca !important;
}
.cm-note-info {
  background: #fffbeb;
  border: 1px dashed #fde68a;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12.5px;
  color: #b45309;
  margin: 0;
}
.cm-error-box {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  color: #dc2626;
  font-size: 14px;
}
.cm-empty {
  text-align: center;
  color: #9ca3af;
  padding: 48px 0;
}
.cm-empty > i {
  font-size: 30px;
  display: block;
  margin-bottom: 12px;
}
.cm-empty p {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
}
.cm-empty-sub {
  font-size: 12px;
  color: #9ca3af;
  margin-top: 4px;
  font-weight: 400 !important;
}
.cm-loading {
  text-align: center;
  color: #6b7280;
  font-size: 14px;
  padding: 24px 0;
  margin: 0;
}

/* --- تاریخ جلسه انجمن — ردیف‌های برنامه زمانی --- */
.cm-sched-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cm-sched-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  background: #faf9fe;
  border: 1px solid #eee7fb;
  border-radius: 12px;
  padding: 10px 14px;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}
.cm-sched-row:hover {
  border-color: #bae6fd;
  box-shadow: 0 2px 8px rgba(76, 29, 149, 0.08);
}
.cm-sched-main {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  min-width: 0;
}
.cm-sched-time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: #1f2937;
  font-size: 14px;
}
.cm-sched-time i {
  color: var(--primary);
  font-size: 12px;
}
.cm-sched-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.cm-sched-form {
  margin-top: 14px;
  background: var(--primary-soft);
  border: 1px solid #bae6fd;
  border-radius: 12px;
  padding: 16px;
}
.cm-sched-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  align-items: end;
}
.cm-sched-form-btns {
  display: flex;
  gap: 6px;
}
.cm-hint-sm {
  font-size: 11.5px;
  color: #6b7280;
  margin: 10px 0 0;
}

/* --- جلسهٔ امروز — فرم و ردیف‌های حضور و غیاب --- */
.cm-form-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.cm-att-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}
.cm-att-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 12px 16px;
  transition: box-shadow 0.15s ease;
}
.cm-att-row:hover {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
.cm-att-row.alt {
  background: #f9fafb;
}
.cm-att-id {
  min-width: 140px;
}
.cm-att-name {
  font-weight: 600;
  font-size: 14px;
  color: #111827;
}
.cm-att-sub {
  font-size: 12px;
  color: #6b7280;
  margin-top: 2px;
}
.cm-att-btns {
  display: flex;
  gap: 8px;
}

/* --- جلسهٔ امروز — حالت «ثبت‌شده» --- */
.cm-done-box {
  background: linear-gradient(to left, #ecfdf5, #ffffff);
  border: 1px solid #a7f3d0;
  border-radius: 12px;
  padding: 18px 20px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.cm-done-box.no-ran {
  background: linear-gradient(to left, #fffbeb, #ffffff);
  border-color: #fde68a;
}
.cm-done-ic {
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  background: #d1fae5;
  color: #059669;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cm-done-box.no-ran .cm-done-ic {
  background: #fef3c7;
  color: #d97706;
}
.cm-done-t {
  font-size: 14px;
  font-weight: 800;
  color: #1f2937;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.cm-done-s {
  font-size: 12px;
  color: #6b7280;
  margin: 4px 0 0;
  line-height: 1.9;
}
.cm-done-btns {
  margin-top: 12px;
}

/* --- تاریخچه جلسات انجمن — کارت‌ها --- */
.cm-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}
.cm-hcard {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e9e5f4;
  border-radius: 16px;
  padding: 16px 16px 16px;
  text-align: right;
  box-shadow:
    0 1px 3px rgba(76, 29, 149, 0.06),
    0 8px 24px -18px rgba(76, 29, 149, 0.25);
}
.cm-hcard::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #34d399, #059669);
  opacity: 0.85;
}
.cm-hcard.is-notheld::before {
  background: linear-gradient(180deg, #fbbf24, #d97706);
}
.cm-hcard-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.cm-hcard-title {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-weight: 800;
  color: #1f2937;
  font-size: 0.95rem;
}
.cm-hcard-sep {
  color: #7dd3fc;
  font-size: 0.8rem;
}
.cm-hcard-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 10px;
}
.cm-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 12px;
}
.cm-stats .att-stat {
  cursor: default;
}
.cm-stats .att-stat:hover {
  transform: none;
}
.cm-hcard-names {
  margin-top: 10px;
}
.cm-desc-box {
  margin-top: 12px;
  background: var(--primary-soft);
  border: 1px solid var(--primary-tint);
  border-radius: 10px;
  padding: 8px 12px;
  color: var(--primary-ink);
  font-size: 12px;
  line-height: 1.9;
}
.cm-desc-box p {
  margin: 0;
}

/* --- آمار جلسات --- */
.cm-stat-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.cm-stat-tile {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
  text-align: center;
}
.cm-stat-tile b {
  display: block;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.3;
  color: #1f2937;
}
.cm-stat-tile span {
  display: block;
  font-size: 12px;
  color: #6b7280;
  margin-top: 4px;
}
.cm-note-line {
  font-size: 12px;
  color: #6b7280;
  margin: 0 0 14px;
}
.cm-table-wrap {
  overflow-x: auto;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}
.cm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 560px;
}
.cm-table thead tr {
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}
.cm-table th {
  text-align: right;
  padding: 8px 12px;
  font-weight: 700;
  color: #374151;
  font-size: 13px;
  white-space: nowrap;
}
.cm-table td {
  padding: 8px 12px;
  border-bottom: 1px solid #f3f4f6;
  color: #111827;
}
.cm-table tbody tr:last-child td {
  border-bottom: none;
}
.cm-table tbody tr:hover {
  background: #f9fafb;
}
.cm-table .c {
  text-align: center;
}
.cm-table .empty-td {
  color: #6b7280;
}
.cm-t-green {
  color: #15803d;
  font-weight: 700;
}
.cm-t-red {
  color: #b91c1c;
  font-weight: 700;
}
.cm-t-purple {
  color: var(--primary-deep);
}
.cm-t-gray {
  color: #9ca3af;
}

@media (max-width: 640px) {
  .cm-cards {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .cm-card-head {
    padding: 16px;
  }
  .cm-card-body {
    padding: 16px;
  }
  .cm-input-search {
    max-width: none;
    width: 100%;
  }
  .cm-table {
    min-width: 520px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cm-card,
  .cm-sched-row,
  .cm-att-row,
  .cm-btn-primary,
  .cm-btn-export,
  .cm-btn-edit {
    transition: none !important;
  }
}

/* ============================================================
   ============================================================
   سیستم ریسپانسیو یکپارچه — نسخه ۲ (Mobile-First)
   ------------------------------------------------------------
   معماری:
   - توکن‌های طراحی و گاردهای سراسری ضد سرریز افقی
   - منوی کشویی (Drawer) برای ناوبری سایت عمومی
   - هدر داشبورد + منوی اکشن کاربر + تب‌های اسکرول‌شونده
   - سیستم جدول ریسپانسیو (.table-scroll / data-label)
   - مودال‌ها به‌صورت Sheet در موبایل
   - چت تک‌پنلی در موبایل
   Breakpoints: ≤400px | ≤640px | ≤768px | ≤1024px
   ============================================================
   ============================================================ */

:root {
  --rsp-sidebar-w: 320px;
  --rsp-dashbar-h: 64px;
  --rsp-safe-top: env(safe-area-inset-top, 0px);
  --rsp-safe-bottom: env(safe-area-inset-bottom, 0px);
  --rsp-shadow-drawer: -12px 0 40px rgba(15, 23, 42, 0.18);
  --rsp-z-drawer: 70;
  --rsp-z-overlay: 65;
}

/* ============================================================
   ۱) گاردهای سراسری — جلوگیری از سرریز افقی در ریشه مشکل
   ============================================================ */

/* متن فارسی/انگلیسی طولانی هرگز چیدمان را نشکند */
.dashboard-card,
#dashboardContent p,
#dashboardContent h1,
#dashboardContent h2,
#dashboardContent h3,
#dashboardContent h4,
#dashboardContent td,
#dashboardContent th,
#dashboardContent li,
#dashboardContent span {
  overflow-wrap: break-word;
  word-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* رسانه‌ها هیچ‌وقت از والد خود بیرون نمی‌زنند */
#dashboardContent img,
#dashboardContent video,
#dashboardContent iframe,
#dashboardContent table,
#dashboardContent pre {
  max-width: 100%;
}

/* فرزندان flex بدون min-width:0 عامل کلاسیک سرریز هستند */
#dashboardContent .flex > * {
  min-width: 0;
}
/* ...به‌جز آیتم‌هایی که خودشان عرض ثابت مجاز دارند */
#dashboardContent .flex > .flex-shrink-0,
#dashboardContent .flex > [class*="shrink-0"] {
  min-width: auto;
}

/* دکمهٔ بستن (X) drawer فقط در نمای موبایل نمایش داده می‌شود؛ در دسکتاپ که
   لیست ناوبری به‌صورت ردیفی نمایش می‌شود، کاملاً مخفی است. */
.mobile-drawer-close-item {
  display: none !important;
}

/* ============================================================
   ۲) سایت عمومی — Drawer ناوبری موبایل (RTL: از راست)
   ------------------------------------------------------------
   تنها منبع حقیقت برای منوی موبایل. باز/بسته شدن فقط با کلاس
   body.nav-drawer-open کنترل می‌شود؛ هیچ قانون دیگری نمایش
   لیست ناوبری را تغییر نمی‌دهد (بدون تعارض specificity).
   ============================================================ */

@media (max-width: 768px) {
  /* زیرلایه تیره پشت drawer — بدون backdrop-filter (منشأ لایه‌های
       منجمد/تار روی موبایل) و با pointer-events فقط در حالت باز */
  #navDrawerOverlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    z-index: var(--rsp-z-overlay);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity 0.25s ease,
      visibility 0.25s;
  }
  body.nav-drawer-open #navDrawerOverlay {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  nav .container {
    position: static;
  }

  /* خودِ Drawer: fixed، بالاتر از زیرلایه، همیشه از نظر display فعال */
  nav .container > ul {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    /* ارتفاع صریح: حتی اگر مرورگری به هر دلیل containing-blockی برای
           fixed بسازد، drawer هم‌قد viewport می‌ماند و هرگز فرو نمی‌ریزد */
    height: 100dvh !important;
    right: 0 !important;
    left: auto !important;
    width: min(var(--rsp-sidebar-w), 86vw);
    max-height: none !important;
    background: #ffffff !important;
    box-shadow: var(--rsp-shadow-drawer) !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: calc(var(--rsp-safe-top) + 12px) 8px
      calc(var(--rsp-safe-bottom) + 16px) !important;
    flex-direction: column !important;
    gap: 2px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    /* بالاتر از زیرلایه (65) مستقل از stacking-context ناو */
    z-index: calc(var(--rsp-z-overlay) + 1) !important;
    transform: translateX(105%);
    visibility: hidden;
    pointer-events: none;
    transition:
      transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1),
      visibility 0.28s;
  }

  body.nav-drawer-open nav .container > ul {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
  }

  /* ناو (کانتکست stacking والدِ drawer) باید هنگام باز بودن بالای
       زیرلایه قرار گیرد تا drawer و دکمه همبرگر هرگز زیر آن نروند */
  body.nav-drawer-open nav.sticky {
    z-index: calc(var(--rsp-z-overlay) + 1);
  }

  /* سربرگ داخل drawer */
  nav .container > ul::before {
    content: "منوی اصلی";
    display: block;
    font-size: 1rem;
    font-weight: 800;
    color: #1e293b;
    padding: 6px 14px 12px;
    border-bottom: 1px solid #eef2f7;
    margin-bottom: 8px;
  }

  /* دکمهٔ بستن (X) داخل drawer — فقط در حالت موبایل نمایش داده می‌شود و
       همیشه در دسترس است تا کاربر بتواند منو را به‌راحتی ببندد (نه فقط با
       تپ روی زیرلایه یا دکمهٔ همبرگر). */
  .mobile-drawer-close-item {
    display: block !important;
    order: -1;
  }
  .mobile-drawer-close {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    margin-bottom: 6px;
    border: none;
    border-radius: 12px;
    background: #f1f5f9;
    color: var(--primary);
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease;
  }
  .mobile-drawer-close:hover {
    background: #e2e8f0;
  }
  .mobile-drawer-close i {
    font-size: 1.1rem;
  }

  nav .container > ul a.nav-link {
    border-bottom: none !important;
    margin: 0 !important;
  }

  nav .container > ul a.nav-link {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 13px 14px !important;
    min-height: 48px;
    font-size: 0.95rem;
    border-radius: 12px;
    color: #334155;
  }

  nav .container > ul a.nav-link::after {
    content: none !important;
  }

  nav .container > ul a.nav-link:hover,
  nav .container > ul a.nav-link.active {
    background: var(--primary-soft);
    color: var(--primary) !important;
    text-shadow: none !important;
  }

  nav .container > ul a.nav-link.active {
    font-weight: 700;
    box-shadow: inset 3px 0 0 var(--primary);
  }

  /* دکمه همبرگر با هدف لمسی مناسب؛ هنگام باز بودن drawer باید بالای
       زیرلایه قابل لمس بماند تا بتوان با همان دکمه منو را بست */
  .mobile-menu-toggle {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    position: relative;
    /* چون ul در حالت باز fixed می‌شود و از جریان flex خارج، دکمه به
           لبه راست می‌چسبد و زیر drawer می‌رود؛ با این z-index همیشه
           بالای drawer (66) باقی می‌ماند و قابل لمس است */
    z-index: calc(var(--rsp-z-overlay) + 2);
    background: rgba(255, 255, 255, 0.9);
  }
  .mobile-menu-toggle:hover {
    background: #f1f5f9;
  }

  /* هنگام باز بودن drawer، دکمهٔ همبرگر نباید روی منو باقی بماند؛
       بستن تنها با دکمهٔ «بستن»، تپ روی زیرلایه یا Escape انجام می‌شود */
  body.nav-drawer-open .mobile-menu-toggle {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

/* دسکتاپ/تبلت بزرگ: مطمئن می‌شویم drawer و زیرلایه هرگز ظاهر نشوند */
@media (min-width: 769px) {
  #navDrawerOverlay {
    display: none !important;
  }
  body.nav-drawer-open {
    overflow: visible;
  }
}

/* ============================================================
   ۳) هدر داشبورد (#userDashboard) — موبایل‌محور
   ============================================================ */

/* نوار کاربر: چسبان، امن برای نوچ */
#userDashboard > .bg-white.shadow-lg {
  position: sticky;
  top: 0;
  z-index: 40;
  padding-top: var(--rsp-safe-top);
}

/* هدر داشبورد: تراز و مرکز کاملاً صحیح */
#userDashboard .container.px-4 > .flex {
  align-items: end;
  justify-content: space-between;
  transform: none;
}

/* جلوگیری از هرگونه جابه‌جایی/ترجیح هنگام اسکرول در حالت sticky */
#userDashboard > .bg-white.shadow-lg,
#userDashboard > .bg-white.shadow-lg > .container {
  transform: none !important;
  will-change: auto;
}

#userDashboard .container.px-4 {
  padding-left: clamp(0.75rem, 3vw, 1.5rem);
  padding-right: clamp(0.75rem, 3vw, 1.5rem);
}

/* نام بلند کاربر هرگز دکمه‌ها را نمی‌راند */
#userDisplayName,
#userRole {
  max-width: 46vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 400px) {
  #userDisplayName,
  #userRole {
    max-width: 38vw;
  }
}

/* --- منوی اکشن کاربر (.user-more) ------------------------------------------
   معماری دو‑حالته (ایزوله):
   • دسکتاپ (پیش‌فرض): .user-more به‌صورت display:contents عمل می‌کند تا
     دکمه‌های اصلی (پروفایل/چت/حسابداری/خروج) دقیقاً مثل نسخهٔ اصلی در
     جریان فلکس هدر باقی بمانند. چون display:contents عناصرِ فرزند را به
     جریان والد می‌راند، فرزندانِ ساختاری (.user-menu-section-title ،
     .user-menu-divider ، .user-menu-special ، #userMenuRoleOptions) باید
     روی دسکتاپ کاملاً خنثی/مخفی باشند، وگرنه به‌صورت بلوک‌های بی‌استایل
     در هدر نشت می‌کنند (ریشهٔ «هدر خراب»). استایل‌های تزیینیِ این
     فرزندان فقط داخل @media (max-width:900px) اعمال می‌شوند — در اینجا
     فقط پایهٔ خنثی می‌دهیم وگرنه تداخل specificity نداریم.
   • موبایل (≤900px): .user-more به پنل کشویی تبدیل می‌شود (پایین‌تر در
     همین فایل، داخل @media).
   مهم: فقط display/font/visibility را اینجا تنظیم می‌کنیم تا با قوانین
   موبایل تداخل نکند. */
.user-more {
  display: contents;
}

/* پایهٔ دسکتاپ برای فرزندان .user-more --------------------------------
   فقط عناصرِ کاملاً ساختاری (عنوان بخش‌ها، جداکننده، ظرف گزینه‌های نقش)
   روی دسکتاپ مخفی می‌شوند؛ دکمه‌های اصلی (پروفایل/چت/حسابداری/خروج)
   باید دقیقاً مثل نسخهٔ اصلی در جریان فلکس هدر باقی بمانند. */
/* عنوان بخش‌ها و جداکننده فقط در منوی کشوییِ موبایل معنی دارند */
.user-more .user-menu-section-title,
.user-more .user-menu-divider {
  display: none;
}
/* منوی همبرگری قدیمی حذف شده است — کنش‌های حساب در موبایل داخل
   کشوی سایدبار (.dash-drawer-actions، پایین‌تر در همین فایل) هستند. */
/* روی دسکتاپ، ظرف دکمه‌های ویژه خودش از جریان حذف می‌شود تا دکمه‌ها
   مستقیماً در فلکس هدر بنشینند (همان چیدمانِ نسخهٔ اصلی). */
.user-more .user-menu-special {
  display: contents;
}
/* دکمه‌های اکشن روی دسکتاپ: ظاهر دکمه‌ای تمیز و هم‌تراز با نسخهٔ اصلی */
.user-more .um-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  color: #ffffff;
  transition: background-color 0.18s ease;
}
.user-more .um-item i {
  margin-left: 6px;
}
.user-more .um-profile {
  background: var(--primary);
}
.user-more .um-profile:hover {
  background: var(--primary);
}
.user-more .um-chat {
  background: #22c55e;
}
.user-more .um-chat:hover {
  background: #16a34a;
}
.user-more .um-accounting {
  background: #f97316;
}
.user-more .um-accounting:hover {
  background: #ea580c;
}
.user-more .um-logout {
  background: #ef4444;
}
.user-more .um-logout:hover {
  background: #dc2626;
}
/* هر آیتمی که با منطق نقش/دسترسی hidden شده، روی دسکتاپ هم مخفی بماند
   (بدون این کار، قانون display:inline-flex بالا بر کلاس .hidden غلبه می‌کرد) */
.user-more .um-item.hidden,
.user-more .hidden {
  display: none !important;
}
.user-menu-empty {
  display: none;
}

/* موبایل: دکمه‌های حساب داخل کشوی سایدبار هستند — خود هدر فقط
   آواتار/نام/زنگ/همبرگر سایدبار را نشان می‌دهد (یک همبرگر، نه دو تا) */
@media (max-width: 900px) {
  .user-more {
    display: none !important;
  }
}

/* پانوشت کشوی سایدبار (فقط ≤900px): پروفایل / چت‌ها / حسابداری / خروج */
.dash-drawer-actions {
  display: none;
}
@media (max-width: 900px) {
  #dashboardTabs .dash-drawer-actions {
    display: block;
    margin-top: 14px;
    padding: 12px 6px 4px;
    border-top: 1px solid var(--border-soft);
  }
  #dashboardTabs .dash-drawer-action {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: start;
    padding: 11px 14px;
    margin-bottom: 4px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.92rem;
    border: none;
    cursor: pointer;
    color: #374151;
    background: transparent;
    transition:
      background-color 0.16s ease,
      color 0.16s ease;
  }
  #dashboardTabs .dash-drawer-action i {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 0.95rem;
    background: var(--surface-2);
    color: #475569;
    flex-shrink: 0;
  }
  #dashboardTabs .dash-drawer-action:hover {
    background: var(--primary-soft);
    color: var(--primary-ink);
  }
  #dashboardTabs .dash-drawer-action:hover i {
    background: var(--primary-tint);
    color: var(--primary);
  }
  #dashboardTabs .dash-drawer-action--profile {
    color: var(--primary-deep);
  }
  #dashboardTabs .dash-drawer-action--profile i {
    background: var(--primary-soft);
    color: var(--primary);
  }
  #dashboardTabs .dash-drawer-action--chat {
    color: var(--chat-deep);
  }
  #dashboardTabs .dash-drawer-action--chat i {
    background: var(--chat-surface);
    color: var(--chat-primary);
  }
  #dashboardTabs .dash-drawer-action--accounting {
    color: #c2410c;
  }
  #dashboardTabs .dash-drawer-action--accounting i {
    background: #fff7ed;
    color: #ea580c;
  }
  #dashboardTabs .dash-drawer-action--logout {
    color: #dc2626;
  }
  #dashboardTabs .dash-drawer-action--logout i {
    background: #fef2f2;
    color: #dc2626;
  }
  #dashboardTabs .dash-drawer-action--logout:hover {
    background: #fef2f2;
    color: #b91c1c;
  }
}

/* --- مرکز اعلان‌ها (Notification Center) --- */
#notificationsDropdown {
  width: 24rem;
  animation: notifIn 0.18s ease-out;
}
@keyframes notifIn {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
#notificationFilters {
  scrollbar-width: none;
}
#notificationFilters::-webkit-scrollbar {
  display: none;
}
.notif-filter-chip {
  white-space: nowrap;
  padding: 4px 10px;
  border-radius: 9999px;
  border: 1px solid transparent;
  color: #4b5563;
  background: transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.notif-filter-chip:hover {
  background: var(--primary-tint);
  color: var(--primary-deep);
}
.notif-filter-chip.active {
  background: var(--primary);
  color: #fff;
  font-weight: 600;
}
.notif-item {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  transition: background 0.15s ease;
  position: relative;
}
.notif-item:hover {
  background: var(--primary-soft);
}
.notif-item.unread {
  background: var(--primary-soft);
}
.notif-item.unread:hover {
  background: var(--primary-tint);
}
.notif-item.prio-urgent {
  border-right: 3px solid #dc2626;
}
.notif-item.prio-important {
  border-right: 3px solid #f59e0b;
}
.notif-item.prio-normal {
  border-right: 3px solid transparent;
}
.notif-item.prio-low {
  border-right: 3px solid transparent;
  opacity: 0.82;
}
.notif-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 14px;
}
.notif-icon.cat-system {
  background: var(--primary-tint);
  color: var(--primary-deep);
}
.notif-icon.cat-academic {
  background: #dcfce7;
  color: #15803d;
}
.notif-icon.cat-classes {
  background: #e0f2fe;
  color: #0369a1;
}
.notif-icon.cat-teachers {
  background: #fef3c7;
  color: #b45309;
}
.notif-icon.cat-council {
  background: #fce7f3;
  color: #be185d;
}
.notif-icon.cat-clubs {
  background: var(--primary-tint);
  color: var(--primary-deep);
}
.notif-icon.cat-accounting {
  background: #ffedd5;
  color: #c2410c;
}
.notif-icon.cat-reports {
  background: #fee2e2;
  color: #b91c1c;
}
.notif-priority-badge {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 9999px;
  flex-shrink: 0;
}
.notif-priority-badge.prio-urgent {
  background: #fee2e2;
  color: #b91c1c;
  font-weight: 700;
}
.notif-priority-badge.prio-important {
  background: #fef3c7;
  color: #b45309;
  font-weight: 600;
}
.notif-unread-dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: var(--primary);
  flex-shrink: 0;
  margin-top: 6px;
}
.notif-delete-btn {
  opacity: 0;
  transition: opacity 0.15s ease;
  background: transparent;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
}
.notif-item:hover .notif-delete-btn,
.notif-item:focus-within .notif-delete-btn {
  opacity: 1;
}
.notif-delete-btn:hover {
  color: #dc2626;
  background: #fee2e2;
}
.notif-empty {
  padding: 32px 16px;
  text-align: center;
  color: #9ca3af;
}
.notif-empty i {
  font-size: 28px;
  margin-bottom: 8px;
  display: block;
  opacity: 0.5;
}
/* موبایل: شیت تمام‌عرض زیر نوار */
@media (max-width: 640px) {
  #notificationsDropdown {
    position: fixed;
    top: calc(var(--rsp-dashbar-h) + var(--rsp-safe-top) + 6px);
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: none !important;
    max-height: min(74vh, 560px);
    z-index: 56;
    border-radius: 18px;
    box-shadow: 0 24px 60px -12px rgba(15, 23, 42, 0.28);
  }
  .notif-item {
    padding-left: 10px;
    padding-right: 10px;
  }
  .notif-icon {
    width: 32px;
    height: 32px;
  }
}

/* --- نوار تب‌های داشبورد: نمایش کامل همه تب‌ها در یک خط ---
   در 100% زوم مرورگر روی دسکتاپ تمام تب‌ها باید بدون نیاز به اسکرول
   یا دکمه‌های فلش قابل مشاهده باشند. تب‌ها در یک خط باقی می‌مانند
   و در صورت نیاز اسکرول افقی اعمال می‌شود. */
.dash-tabbar {
  position: sticky;
  top: calc(var(--rsp-dashbar-h) + var(--rsp-safe-top));
  z-index: 30;
  background: #f3f4f6;
  box-shadow: 0 1px 0 #e5e7eb;
}

.dash-tabbar .container {
  max-width: 100%;
}

/* ظرف تب‌ها: یک خط بدون wrap — اسکرول افقی در صورت نیاز */
.dash-tabs-wrap {
  display: flex;
  align-items: center;
  min-height: 52px;
  overflow: hidden;
  min-width: 0;
  width: 100%;
}

/* دکمه‌های اسکرول چپ/راست کاملاً حذف شده‌اند — در هر حالت مخفی هستند */
.dash-tabs-scroll {
  display: none !important;
}

/* =========================================
   Dashboard Tabs - Default
   همه پنل‌ها به جز مدیر
   ========================================= */

#dashboardTabs {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  gap: 4px;
  padding: 6px 4px;
  flex: 1 1 0;
  align-items: start;
  min-width: 0;
  margin-right: 67px;
}

#dashboardTabs::-webkit-scrollbar {
  display: none;
}

#dashboardTabs button {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 8px 10px !important;
  font-size: 0.88rem;
  letter-spacing: 0;
  line-height: 1.3;
  border-radius: 8px;
}

/* =========================================
   فقط پنل مدیر
   عرض بیشتر + فشرده‌سازی کمتر
   ========================================= */

#userDashboard.role-admin #dashboardTabs {
  margin-right: 0;

  /* عرض بیشتر برای هدر مدیر */
  width: 100%;
  max-width: 100%;

  gap: 3px;
  padding: 4px 3px;

  align-items: center;
  justify-content: center;

  /* همه آیتم‌ها در یک لاین */
  flex-wrap: nowrap;
  overflow: hidden;

  box-sizing: border-box;
}

#userDashboard.role-admin #dashboardTabs button {
  flex: 0 1 auto;
  white-space: nowrap;

  /* فونت همان مقدار قبلی */
  font-size: 0.9rem;

  /* کمی فضای بیشتر نسبت به نسخه قبلی */
  padding: 5px 7px !important;

  line-height: 1.05;
  letter-spacing: -0.1px;
  border-radius: 6px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;

  min-width: 0;
}

/* لوگو + متن همیشه در یک خط */
#userDashboard.role-admin #dashboardTabs button,
#userDashboard.role-admin #dashboardTabs button span,
#userDashboard.role-admin #dashboardTabs button i {
  white-space: nowrap;
}

/* =========================================
   جلوگیری از شکستن هیچ آیتمی
   ========================================= */

#userDashboard.role-admin #dashboardTabs button * {
  white-space: nowrap;
}

/* =========================================
   صفحات کوچک
   ========================================= */

@media (max-width: 1100px) {
  #userDashboard.role-admin #dashboardTabs {
    gap: 2px;
    padding: 3px 2px;
  }

  #userDashboard.role-admin #dashboardTabs button {
    font-size: 0.9rem;
    padding: 4px 6px !important;
    gap: 2px;
  }
}

/* =========================================
   موبایل
   ========================================= */

@media (max-width: 768px) {
  #userDashboard.role-admin #dashboardTabs {
    gap: 1px;
    padding: 2px 1px;
  }

  #userDashboard.role-admin #dashboardTabs button {
    font-size: 0.9rem;
    padding: 4px 5px !important;
    gap: 2px;
  }
}

@media (max-width: 768px) {
  :root {
    --rsp-dashbar-h: 58px;
  }
  #dashboardTabs {
    gap: 2px;
    padding: 4px 2px;
  }
  #dashboardTabs button {
    padding: 10px 12px !important;
    font-size: 0.85rem;
    min-height: 44px;
    border-bottom-width: 3px;
  }
  #dashboardTabs button i {
    margin-left: 6px;
  }
}

/* نوار محتوای داشبورد: فاصله پاسخ‌گو */
#dashboardContent {
  padding-top: clamp(1rem, 3vw, 2rem);
  padding-bottom: clamp(1.25rem, 4vw, 2.5rem);
  max-width: 1280px;
  margin-inline: auto;
}

/* ============================================================
   ۴) سیستم جدول ریسپانسیو
   ============================================================ */

.table-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  padding-bottom: 6px;
  margin-bottom: -6px;
}

/* راهنمای لبه: سایه‌های ورودی/خروجی اسکرول (فقط وقتی جا دارد) */
@supports (scrollbar-gutter: stable) {
  .table-scroll {
    scrollbar-gutter: stable;
  }
}

.table-scroll > table {
  border-collapse: collapse;
}

/* سلول‌ها فشرده اما خوانا؛ متن بلند می‌شکند */
.table-scroll th,
.table-scroll td {
  white-space: normal;
}

/* حالت کارتی جدول‌های پرستونه در موبایل */
@media (max-width: 640px) {
  table.rsp-cards thead {
    display: none;
  }
  table.rsp-cards,
  table.rsp-cards tbody,
  table.rsp-cards tr,
  table.rsp-cards td {
    display: block;
    width: 100%;
  }
  table.rsp-cards tbody tr {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 10px 12px;
    margin-bottom: 10px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  }
  table.rsp-cards td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 2px;
    border: none;
    text-align: left;
  }
  table.rsp-cards td::before {
    content: attr(data-label);
    flex-shrink: 0;
    font-weight: 700;
    font-size: 0.78rem;
    color: #64748b;
    white-space: nowrap;
  }
  table.rsp-cards td.rsp-actions-cell {
    flex-direction: row-reverse;
    justify-content: flex-end;
    padding-top: 10px;
    margin-top: 6px;
    border-top: 1px dashed #e5e7eb;
  }
  table.rsp-cards td.rsp-actions-cell::before {
    content: "اقدام";
  }
}

/* ============================================================
   ۵) مودال‌ها — تبدیل به Sheet در موبایل
   ============================================================ */

@media (max-width: 640px) {
  /* مودال‌های Tailwind داخل index.html + مودال‌های تولیدی JS */
  #loginModal > div,
  #registrationModal > div,
  #profileModal > div,
  #addNewsModal > div,
  #clubPostsModal > div,
  #addPostModal > div,
  #managedFormModal > div {
    max-width: 100vw !important;
    width: 100vw;
    max-height: 100dvh;
    height: auto;
    border-radius: 20px 20px 0 0;
    margin-top: auto;
    align-self: flex-end;
  }

  /* O�U^O�U,UO�?OU�O: U.O-O�U^O O"U� U_OUOUOU+ U.UO�?OU+O3O"O_ (Bottom Sheet) */
  #loginModal,
  #registrationModal,
  #profileModal,
  #addNewsModal,
  #clubPostsModal,
  #addPostModal,
  #managedFormModal {
    padding: 0 !important;
    align-items: stretch;
  }

  /* U�O_O� U.U^O_OU,�?OU�O U+O3O"OU+ O"U.OU+O_ */
  #loginModal > div > div:first-child,
  #registrationModal > div > div:first-child,
  #profileModal > div > .gradient-bg,
  #addNewsModal > div > div:first-child,
  #addPostModal > div > div:first-child,
  #managedFormModal > div > div:first-child {
    position: sticky;
    top: 0;
    z-index: 5;
    border-radius: 20px 20px 0 0;
  }

  /* دستگیره‌ی sheet */
  #loginModal > div::before,
  #registrationModal > div::before,
  #profileModal > div::before,
  #addNewsModal > div::before,
  #addPostModal > div::before,
  #managedFormModal > div::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 44px;
    height: 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.85);
    z-index: 6;
    pointer-events: none;
  }

  /* بدنه‌های اسکرول‌شونده */
  #profileModal > div > .p-6.overflow-y-auto,
  #managedFormModal form,
  #clubPostsModal .p-6 {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: calc(1.25rem + var(--rsp-safe-bottom)) !important;
  }

  /* مودال سفارشی alert/confirm/prompt */
  .custom-modal-box {
    max-width: calc(100vw - 16px);
    align-self: flex-end;
    border-radius: 20px 20px 0 0;
    margin-top: auto;
    margin-bottom: 0;
    padding-bottom: var(--rsp-safe-bottom);
  }
  .custom-modal-overlay {
    padding: 0;
    align-items: stretch;
  }
}

/* مودال فرم مدیریت‌شده: ستونی با فوتر چسبان در همه اندازه‌ها */
#managedFormModal > div {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#managedFormModal form {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#managedFormModal form > div:last-child {
  position: sticky;
  bottom: calc(-1rem - 2px); /* جبران padding فورم */
  background: #ffffff;
  margin: 0 -1rem;
  padding: 10px 1rem calc(10px + var(--rsp-safe-bottom));
  border-top: 1px solid #e5e7eb;
  z-index: 4;
}

/* مودال گزارش کارنامه (max-w-5xl) و مودال‌های بزرگ دیگر در موبایل */
@media (max-width: 640px) {
  #reportCardModal > div,
  #chatReportsModal > div,
  #channelManagerModal > div {
    max-width: 100vw !important;
    width: 100vw;
    max-height: 100dvh;
    height: 100dvh;
    border-radius: 0;
  }
  #reportCardModal,
  #chatReportsModal,
  #channelManagerModal {
    padding: 0 !important;
  }
}

/* ============================================================
   ۶) چت — حالت تک‌پنلی موبایل
   ============================================================ */

@media (max-width: 768px) {
  #chatModal {
    padding: 0 !important;
  }
  #chatModal > div {
    max-width: 100vw !important;
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }

  #chatModal .w-64 {
    width: 100% !important;
    border-left: none;
  }

  /* پنل گفتگو روی لیست سوار می‌شود */
  #chatModal .flex-1.flex.flex-col.bg-white {
    position: absolute;
    inset: 0;
    top: 0;
    z-index: 10;
    transform: translateX(105%);
    visibility: hidden;
    background: #ffffff;
    box-shadow: var(--rsp-shadow-drawer);
    transition:
      transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1),
      visibility 0.28s;
  }
  #chatModal.chat-view-open .flex-1.flex.flex-col.bg-white {
    transform: translateX(0);
    visibility: visible;
  }

  /* دکمه بازگشت (فقط موبایل) */
  .chat-back-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-right: -4px;
    border: none;
    background: transparent;
    color: #4b5563;
    border-radius: 10px;
    flex-shrink: 0;
    cursor: pointer;
  }
  .chat-back-btn:hover {
    background: #f3f4f6;
  }
  .chat-back-btn i {
    font-size: 1.05rem;
  }

  /* هدر چت فشرده‌تر */
  .chat-header {
    padding: 0.6rem 0.75rem;
    gap: 0.5rem;
  }
  #chatHeaderPresence {
    display: none;
  }
  .chat-header-details h4 {
    max-width: 38vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* حباب پیام‌ها از عرض بیشتری استفاده کنند */
  #chatMainContent .flex.gap-2 {
    max-width: 86% !important;
  }
  #chatMainContent {
    padding: 0.75rem;
  }

  /* نوار ورودی امن برای نوچ و کیبورد */
  #chatInputArea {
    padding-bottom: calc(0.6rem + var(--rsp-safe-bottom));
  }

  /* FAB گزارش‌ها بالا بیاید تا با نوار ورودی تداخل نکند */
  #chatReportsBtn {
    bottom: 84px !important;
    left: 12px;
    right: auto;
  }
}

@media (min-width: 769px) {
  .chat-back-btn {
    display: none !important;
  }
}

/* ایموجی‌پیکر و منوی زمینه: هرگز از صفحه بیرون نزنند */
#chatEmojiPicker,
.message-context-menu {
  max-width: calc(100vw - 16px) !important;
}

/* ============================================================
   ۷) فرم‌ها، دکمه‌ها و فیلترها
   ============================================================ */

/* هدف لمسی استاندارد برای دستگاه‌های لمسی */
@media (hover: none) and (pointer: coarse) {
  #dashboardContent button,
  #dashboardContent select,
  #dashboardContent a.btn,
  .user-more > button,
  .user-more .um-item {
    min-height: 44px;
  }
  #dashboardContent input[type="checkbox"],
  #dashboardContent input[type="radio"] {
    min-width: 20px;
    min-height: 20px;
  }
}

/* دکمه‌های اکشن جدول‌ها در موبایل جمع نمی‌شوند */
@media (max-width: 640px) {
  #dashboardContent td .flex,
  #dashboardContent td .flex.items-center {
    flex-wrap: wrap;
    gap: 6px;
  }
}

/* ردیف‌های دکمه‌ای پایین کارت‌ها: در موبایل تمام‌عرض و پشته */
@media (max-width: 640px) {
  #dashboardContent .card-hover .grid.grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }
  #dashboardContent .card-hover .grid.grid-cols-3 > button {
    padding: 10px 4px;
    font-size: 0.8rem;
  }
}

/* فیلترها/فرم‌های چندستونه: در موبایل تک‌ستونه با کنترل تمام‌عرض */
@media (max-width: 640px) {
  #dashboardContent select,
  #dashboardContent input:not([type="checkbox"]):not([type="radio"]),
  #dashboardContent textarea {
    min-height: 44px;
  }
}

/* ============================================================
   ۸) تنظیمات (۱۰ زیرتب) — wrap کنترل‌شده؛ بدون سرریز افقی
   ------------------------------------------------------------
   چیدمان ردیف/فاصله با کلاس‌های خودِ مارک‌آپ (flex flex-wrap
   gap-x-2 gap-y-1 items-stretch) انجام می‌شود؛ اینجا فقط رفتار
   دکمه‌ها تثبیت می‌شود تا هیچ آیتمی کوچک/بریده نشود.
   ============================================================ */
.settings-tabbar button {
  flex: 0 0 auto;
  white-space: nowrap;
  display: flex;
  align-items: center;
  min-height: 40px;
  transition:
    color 0.15s ease,
    border-color 0.15s ease;
}
@media (max-width: 640px) {
  .settings-tabbar button {
    padding: 10px 12px !important;
    font-size: 0.85rem;
    min-height: 44px;
  }
}

/* ============================================================
   ۹) پنل انجمن ادغام‌شده (club-panel-container) در موبایل
   ============================================================ */
@media (max-width: 640px) {
  .club-panel-container .club-content {
    padding: 16px 12px;
  }
  .club-panel-container .section-card {
    padding: 16px 12px;
    border-radius: 14px;
  }
  .club-panel-container .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px;
  }
  .club-panel-container .stat-card {
    padding: 14px;
    gap: 10px;
  }
  .club-panel-container .stat-icon {
    width: 44px;
    height: 44px;
    font-size: 1.15rem;
  }
  .club-panel-container .stat-content h3 {
    font-size: 1.35rem;
  }
  .club-panel-container .modal-overlay {
    padding: 0;
    align-items: stretch;
  }
  .club-panel-container .modal {
    max-width: 100vw;
    border-radius: 20px 20px 0 0;
    max-height: 96dvh;
    align-self: flex-end;
    margin-bottom: 0;
  }
  .club-panel-container .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .club-panel-container .btn {
    padding: 10px 14px;
  }
  .club-panel-container .card-grid {
    grid-template-columns: 1fr;
  }
  .club-panel-container .form-section {
    padding: 14px 12px 4px;
    border-radius: 12px;
  }
  .club-panel-container .seg-btn {
    padding: 10px 8px;
    font-size: 0.85rem;
  }
  .club-panel-container .input-suffix {
    padding: 0 12px;
  }
  .club-panel-container .modal-footer {
    flex-direction: column-reverse;
  }
  .club-panel-container .modal-footer .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ============================================================
   ۱۰) جزئیات ریز کیفیت
   ============================================================ */

/* اعداد بزرگ در کارت‌های آمار: شکستن خط ممنوع ولی کوک شدن tabular */
#dashboardContent .text-2xl,
#dashboardContent .text-3xl {
  font-variant-numeric: tabular-nums;
}

/* عنوان بخش‌های داشبورد */
#dashboardContent h2,
#dashboardContent h3 {
  line-height: 1.5;
}

/* اسکرول‌بار جدول‌های لمسی نامرئی‌تر */
.table-scroll::-webkit-scrollbar {
  height: 6px;
}

/* حالت خیلی باریک (≤360px): تراکم بیشتر بدون شکستگی */
@media (max-width: 360px) {
  #dashboardTabs {
    --fade: 18px;
  }
  #dashboardTabs button {
    padding: 11px 10px !important;
    font-size: 0.84rem;
  }
}

/* ============================================================
   ۱۱) تقویم جلالی — پاسخ‌گو و لمس‌پسند
   ============================================================ */
@media (max-width: 640px) {
  .jalali-datepicker {
    width: min(300px, calc(100vw - 12px)) !important;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.25);
  }
  /* خانه‌های تاریخ با هدف لمسی راحت‌تر */
  .jalali-datepicker-cell {
    padding: 10px 0;
    font-size: 0.9rem;
  }
  .jalali-datepicker-nav {
    width: 38px;
    height: 38px;
    font-size: 1.1rem;
  }
  .jalali-datepicker-footer button {
    padding: 9px 14px;
    min-height: 40px;
  }
}

/* ============================================================
   ۱۲) مودال‌ها — دکمه بستن استاندارد و سربرگ چسبان
   ------------------------------------------------------------
   دکمه بستن داخل سربرگِ خودِ مودال لنگر می‌شود (سربرگ relative است)
   تا در هیچ بریک‌پوینتی از مودال جدا نشود؛ با z-index بالاتر از
   سربرگ چسبان، همیشه قابل کلیک/لمس است.
   ============================================================ */

.sticky-top-modal {
  position: sticky;
  top: 0;
  z-index: 5;
}

.modal-close-x {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  font-size: 1.15rem;
  cursor: pointer;
  z-index: 10; /* بالاتر از سربرگ چسبان (z5) */
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color 0.18s ease,
    transform 0.18s ease;
}
.modal-close-x:hover {
  background: rgba(255, 255, 255, 0.32);
}
.modal-close-x:active {
  transform: scale(0.94);
}
@media (max-width: 640px) {
  .modal-close-x {
    top: calc(8px + var(--rsp-safe-top));
    left: 10px;
  }
}

/* ============================================================
   ۱۳) قفل اسکرول پس‌زمینه (Drawer / منوی کاربر / مودال‌های ورود)
   ------------------------------------------------------------
   overflow:hidden به‌تنهایی روی iOS Safari قابل اطمینان نیست؛
   body به‌صورت fixed در جای فعلی قفل می‌شود و JS آفست اسکرول را
   نگه می‌دارد تا پس از بستن، موقعیت دقیقاً بازیابی شود.
   ============================================================ */
body.rsp-scroll-locked {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  overflow: hidden !important;
}

/* نسخهٔ «ملایم» قفل اسکرول — فقط overflow:hidden، بدون position:fixed.
   برای مودال‌های ورود/ثبت‌نام استفاده می‌شود تا هنگام باز شدن کیبورد
   موبایل، بدنه جهش نکند و فیلدهای ورود پایدار بمانند. */
body.rsp-scroll-locked-soft {
  overflow: hidden !important;
}

/* ============================================================
   ۱۴) ناوبری پنل‌ها در موبایل — انتقال تب‌ها به منوی همبرگری
   ------------------------------------------------------------
   در ≤900px نوار تب داشبورد مخفی می‌شود چون همان گزینه‌ها داخل
   منوی همبرگری (بخش «گزینه‌ها») در دسترس‌اند. دسکتاپ بدون تغییر.
   ============================================================ */
@media (max-width: 900px) {
  .dash-tabbar {
    display: none !important;
  }
}

/* ============================================================
   ۱۵) پنل مدیریت انجمن — اصلاح ریشه‌ای sticky/stacking
   ------------------------------------------------------------
   مشکل: subnav با z-index:90 و club-header با z-index:50 هر دو
   sticky روی top:0 بودند؛ بالاتر از نوار کاربر برنامه (z40). نتیجه:
   همپوشانی لایه‌ها، آرتیفکت رندر و «به‌جا ماندن» هدر بنفش هنگام
   جابه‌جایی بخش‌ها روی موبایل. راه‌حل: زیرنوار زیر نوارهای برنامه
   می‌چسبد و هدر دوم کلاً sticky نمی‌ماند.
   ============================================================ */

/* زیرنوار انجمن: دقیقاً زیر نوار کاربر + نوچ می‌چسبد و پایین‌تر از آن است */
.club-panel-container .club-subnav {
  top: calc(var(--rsp-dashbar-h, 58px) + var(--rsp-safe-top, 0px));
  z-index: 30;
}

/* هدر عنوان بخش: در جریان عادی بماند (sticky نبودنش منشأ لایه‌های
   سرگردان و «هدر گیر کرده» بود) */
.club-panel-container .club-header {
  position: static;
}

/* هنگام تعویض بخش، محتوای قبلی هیچ لایه ترکیبی (composited) از خود
   باقی نگذارد — مهار صریح ارتقای لایه برای فرزندان پنل انجمن */
.club-panel-container .club-view-content {
  contain: layout paint;
}

/* ============================================================
   ریسپانسیو منوی همبرگری داشبورد — طبقه‌بندی نقش
   ============================================================ */

/* تراز ردیف هدر داشبورد — برای همهٔ نقش‌ها یکسان */
#userDashboard .container.px-4 > .flex {
  justify-content: space-between;
  gap: clamp(0.5rem, 2vw, 1rem);
}

/* جای دکمهٔ همبرگر — گوشهٔ بالا-راست (سمتِ شروع در RTL)
   ------------------------------------------------------------
   فقط در عرض موبایل (≤900px) گروه اکشن کاربر (همبرگر + اعلان) با
   order:-1 به ابتدای ردیف یعنی لبهٔ راست می‌چسبد و خودِ دکمهٔ همبرگر
   با order:-1 درون گروه، راست‌ترین (گوشهٔ) عضو می‌شود. دسکتاپ بدون
   هیچ تغییری می‌ماند: اطلاعات کاربر راست، دکمه‌های اکشن چپ.
   (قانون قبلی با گزینشگر .flex.items-start.gap-2 هرگز با مارک‌آپ
   واقعی .flex.items-center.gap-2 تطبیق نمی‌کرد و اثری نداشت.) */
@media (max-width: 900px) {
  #userDashboard .container.px-4 > .flex {
    flex-wrap: wrap;
  }
  #userDashboard .container.px-4 > .flex > .flex.items-center.gap-2 {
    order: -1;
  }
  #userDashboard
    .container.px-4
    > .flex
    > .flex.items-center.gap-2
    #userMenuToggle {
    order: -1;
  }
}

/* ============================================================
   منوی همبرگری اکشن کاربر: جداسازی نقشی
   ------------------------------------------------------------
   محتوای منوی همبرگری (بخش «گزینه‌ها») به‌صورت پویا و همگام با نقش
   فعلی کاربر از buildRoleTabDefs() ساخته می‌شود (همان منبع واحد
   نوار تبِ دسکتاپ). چون این فهرست فقط آیتم‌های همان نقش را برمی‌گرداند،
   هیچ فیلتر CSS جداگانه‌ای لازم نیست و هر نقشی تنها ناوبریِ مخصوصِ
   پنل خودش را در منو می‌بیند. (قبلاً یک بلوک فیلتر تکراری/ناقص اینجا
   بود که آیتم‌های دبیر درسی را هم مخفی می‌کرد؛ حذف شد.)
   ============================================================ */

/* مدیریت تنظیمات حسابداری بر اساس نقش */
#userDashboard:not(.role-admin) #accountingNavBtn {
  display: none !important;
}

/* ============================================================
   ریسپانسیو موبایل — تراز هدر برای نقش‌های غیراز مدیریت
   ============================================================ */
@media (max-width: 768px) {
  /* هدر داشبورد: گروه اکشن کاربر همچنان در موبایل به لبه‌ی سمت‌راست
       می‌چسبد (order:-1 در RTL) و بلوک اطلاعات در سمت چپ می‌ماند */
  #userDashboard:not(.role-admin) .container.px-4 > .flex {
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: space-between;
  }

  /* نام و نقش کاربر در موبایل */
  #userDisplayName,
  #userRole {
    max-width: 60vw;
  }

  /* نوار تب‌ها در موبایل */
  #userDashboard:not(.role-admin) #dashboardTabs {
    justify-content: center;
    padding: 4px 2px;
  }
}

@media (max-width: 480px) {
  #userDashboard:not(.role-admin) .container.px-4 > .flex {
    gap: 0.25rem;
  }

  #userDisplayName,
  #userRole {
    max-width: 50vw;
  }
} /* ===== FIX: Admin Activity Log - remove left white space ===== */

#userDashboard.role-admin #adminActivityLogCard {
  overflow: hidden !important;
}

#userDashboard.role-admin #activityLogTableWrapper {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  transform: none !important;
  box-sizing: border-box !important;
}

#userDashboard.role-admin #activityLogTableWrapper.table-scroll {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
}

#userDashboard.role-admin #activityLogTableWrapper > table {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}
/* ==================== صفحه ۴۰۴ (یافت نشد) ==================== */
/* هماهنگ با سیستم طراحی موجود: بنفش/آبی گرادیانی، rounded-xl، سایه‌های نرم */

#notFound:not(.hidden) {
  min-height: 55vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 0 3rem;
}

#notFound .notfound-badge,
#accessDenied .notfound-badge {
  width: 4.5rem;
  height: 4.5rem;
  margin: 0 auto 1.25rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  color: var(--primary);
  background: rgba(2, 132, 199, 0.1);
  box-shadow: inset 0 0 0 1px rgba(2, 132, 199, 0.15);
}

#accessDenied .notfound-badge {
  color: #b45309;
  background: rgba(245, 158, 11, 0.12);
  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.2);
}

#notFound .notfound-wrap,
#accessDenied .notfound-wrap {
  text-align: center;
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 10px 40px rgba(88, 28, 135, 0.1);
  padding: 3rem 1.75rem;
  max-width: 30rem;
  width: 100%;
  margin: 0 auto;
}

#notFound .notfound-code,
#accessDenied .notfound-code {
  font-size: clamp(4.5rem, 16vw, 7rem);
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
}

#accessDenied .notfound-code {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

#notFound .notfound-title,
#accessDenied .notfound-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 0.5rem;
}

#notFound .notfound-desc,
#accessDenied .notfound-desc {
  color: #6b7280;
  margin-bottom: 1.75rem;
  font-size: 0.95rem;
}

#notFound .notfound-btn,
#accessDenied .notfound-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary) 100%);
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.7rem 1.6rem;
  border-radius: 0.75rem;
  border: none;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    opacity 0.15s ease;
}

#notFound .notfound-btn:hover,
#accessDenied .notfound-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(2, 132, 199, 0.35);
}

#notFound .notfound-btn:active,
#accessDenied .notfound-btn:active {
  transform: translateY(0);
}

@media (max-width: 640px) {
  #notFound {
    padding: 1.25rem 0 2rem;
  }
  #notFound .notfound-wrap {
    padding: 2.25rem 1.25rem;
    border-radius: 0.875rem;
  }
  #notFound .notfound-title {
    font-size: 1.15rem;
  }
  #notFound .notfound-badge {
    width: 3.75rem;
    height: 3.75rem;
    font-size: 1.5rem;
    margin-bottom: 1rem;
  }
  #accessDenied {
    padding: 1.25rem 0 2rem;
  }
  #accessDenied .notfound-wrap {
    padding: 2.25rem 1.25rem;
    border-radius: 0.875rem;
  }
  #accessDenied .notfound-title {
    font-size: 1.15rem;
  }
  #accessDenied .notfound-badge {
    width: 3.75rem;
    height: 3.75rem;
    font-size: 1.5rem;
    margin-bottom: 1rem;
  }
}

/* 401 — «احراز هویت لازم است». همان زبان بصری ۴۰۴/۴۰۳ با هویت رنگی متمایز (سرخ).
   فقط برای نمای کلاینت روتر مرکزی؛ هیچ محتوای محافظت‌شده‌ای پشت آن رندر نمی‌شود. */
#unauthorized:not(.hidden) {
  min-height: 55vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 0 3rem;
}
#unauthorized .notfound-badge {
  width: 4.5rem;
  height: 4.5rem;
  margin: 0 auto 1.25rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  color: #e11d48;
  background: rgba(225, 29, 72, 0.1);
  box-shadow: inset 0 0 0 1px rgba(225, 29, 72, 0.16);
}
#unauthorized .notfound-wrap {
  text-align: center;
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 10px 40px rgba(159, 18, 57, 0.12);
  padding: 3rem 1.75rem;
  max-width: 32rem;
  width: 100%;
  margin: 0 auto;
}
#unauthorized .notfound-code {
  font-size: clamp(4.5rem, 16vw, 7rem);
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(135deg, #e11d48 0%, #be123c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
}
#unauthorized .notfound-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 0.5rem;
}
#unauthorized .notfound-desc {
  color: #6b7280;
  margin-bottom: 1.75rem;
  font-size: 0.95rem;
  line-height: 1.9;
}
/* ردیف دکمه‌ها (ورود + بازگشت به خانه) برای نمای ۴۰۱ */
.notfound-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}
#unauthorized .notfound-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: linear-gradient(135deg, #e11d48 0%, #be123c 100%);
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.7rem 1.5rem;
  border-radius: 0.75rem;
  border: none;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}
#unauthorized .notfound-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(225, 29, 72, 0.35);
}
#unauthorized .notfound-btn:active {
  transform: translateY(0);
}
#unauthorized .notfound-btn:focus-visible {
  outline: 3px solid rgba(225, 29, 72, 0.35);
  outline-offset: 2px;
}
#unauthorized .notfound-btn.notfound-btn-ghost {
  background: #fff;
  color: #1f2937;
  border: 1px solid #e5e7eb;
  box-shadow: none;
}
#unauthorized .notfound-btn.notfound-btn-ghost:hover {
  border-color: #e11d48;
  color: #e11d48;
  box-shadow: none;
}
@media (max-width: 640px) {
  #unauthorized {
    padding: 1.25rem 0 2rem;
  }
  #unauthorized .notfound-wrap {
    padding: 2.25rem 1.25rem;
    border-radius: 0.875rem;
  }
  #unauthorized .notfound-title {
    font-size: 1.15rem;
  }
  #unauthorized .notfound-badge {
    width: 3.75rem;
    height: 3.75rem;
    font-size: 1.5rem;
    margin-bottom: 1rem;
  }
}

/* =========================================================
   Enhancements Pack (Gallery carousel + Focus preview)
   Added by home-enhancements.js — scoped, GPU-friendly
   ========================================================= */

/* ---------- گالری تصاویر: کاروسل خودکار ---------- */
.gallery-carousel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.gallery-viewport {
  overflow: hidden;
  flex: 1;
  min-width: 0;
  border-radius: 16px;
  touch-action: pan-y;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 24px,
    #000 calc(100% - 24px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 24px,
    #000 calc(100% - 24px),
    transparent 100%
  );
}

.gallery-track {
  display: flex;
  will-change: transform;
}

.gallery-slide {
  flex: 0 0 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 0 0.25rem;
}

.gallery-card {
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.07);
  height: 100%;
  display: flex;
  flex-direction: column;
  cursor: zoom-in;
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s ease;
}

.gallery-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(2, 132, 199, 0.14);
}

.gallery-card:focus-visible {
  outline: 3px solid rgba(2, 132, 199, 0.45);
  outline-offset: 2px;
}

.gallery-card-media {
  position: relative;
  height: 300px;
  overflow: hidden;
  background: #f3f4f6;
}

.gallery-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.gallery-card:hover .gallery-card-media img {
  transform: scale(1.05);
}

.gallery-card-body {
  padding: 0.9rem 1.1rem 1.1rem;
}

.gallery-card-title {
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 0.25rem;
}

.gallery-card-desc {
  color: #6b7280;
  font-size: 0.9rem;
  line-height: 1.6;
}

/* دکمه‌های ناوبری گالری */
.gnav-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  color: var(--primary);
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  transition:
    background 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
  z-index: 2;
}

.gnav-btn:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: #ffffff;
  transform: scale(1.06);
  box-shadow: 0 6px 18px rgba(2, 132, 199, 0.3);
}

.gnav-btn:active {
  transform: scale(0.94);
}

.gnav-btn:focus-visible {
  outline: 3px solid rgba(2, 132, 199, 0.45);
  outline-offset: 2px;
}

.gnav-btn.gnav-is-busy {
  pointer-events: none;
}

/* ریسپانسیو گالری */
@media (min-width: 768px) {
  .gallery-slide {
    flex: 0 0 50%;
  }
}
@media (min-width: 1024px) {
  .gallery-slide {
    flex: 0 0 33.3333%;
  }
  .gallery-card-media {
    height: 240px;
  }
}
@media (max-width: 640px) {
  .gallery-carousel {
    gap: 0.4rem;
  }
  .gallery-card-media {
    height: 220px;
  }
}

/* ---------- پیش‌نمایش متمرکز (Focus Preview) ----------
   مقیاس لایه‌بندی (دقیق و بدون تداخل):
   محتوای صفحه  <  پیش‌نمایش (var(--fx-z-preview))
              <  احراز هویت / عضویت (var(--fx-z-auth))
              <  alert/confirm سفارشی (customModalOverlay: 9999)
              <  toast (customToastContainer: 10000)
   اسپلش بارگذاری (loadingOverlay: 99999) بالاتر از همه می‌ماند. */
:root {
  --fx-z-preview: 9000;
  --fx-z-auth: 9100;
}

.fx-preview-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--fx-z-preview);
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  transition: opacity 0.28s ease;
  /* اجازه اسکرول عمودی برای محتوای بلندتر از دید */
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* مودال‌های احراز هویت / عضویت انجمن همیشه یک لایه بالاتر از پیش‌نمایش‌اند
   (کلاس z-50 تیلویند = 50 بود و پشت اورلی پیش‌نمایش گیر می‌کرد) */
#loginModal,
#registrationModal,
#studentAuthModal,
#clubJoinModal,
#clubViewModal {
  z-index: var(--fx-z-auth);
}

.fx-preview-overlay.fx-open {
  opacity: 1;
}

.fx-preview-overlay.fx-closing {
  opacity: 0;
}

/* لایه محتوای مرکزی: همیشه در مرکز عمودی/افقی */
.fx-preview-center {
  margin: auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
}

.fx-preview-card {
  position: relative;
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
  max-width: min(680px, 100%);
  width: 100%;
  max-height: calc(100dvh - 2rem);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(26px) scale(0.92);
  transition:
    opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}

.fx-preview-overlay.fx-open .fx-preview-card {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.fx-preview-overlay.fx-closing .fx-preview-card {
  opacity: 0;
  transform: translateY(14px) scale(0.95);
}

/* پس‌زمینه‌ی ناحیه رسانه باید سفید و تمیز باشد (قبلاً سرمه‌ای تیره بود و
   پیش‌نمایش را «تاریک» نشان می‌داد). کنتراست توسط بک‌دراپ اورلی تأمین می‌شود. */
.fx-preview-media {
  background: #ffffff;
  line-height: 0;
}

.fx-preview-media img {
  width: 100%;
  max-height: min(52dvh, 430px);
  object-fit: contain;
  display: block;
}

.fx-preview-body {
  padding: 1.15rem 1.35rem 1.35rem;
  overflow-y: auto;
  min-height: 0;
}

.fx-preview-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #111827;
  margin-bottom: 0.6rem;
  line-height: 1.5;
}

.fx-preview-text {
  color: #4b5563;
  line-height: 1.9;
  white-space: pre-line;
  word-break: break-word;
}

.fx-preview-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.1rem;
  color: #6b7280;
  font-size: 0.85rem;
  margin-bottom: 0.65rem;
}

.fx-preview-chip {
  display: inline-block;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  margin: 0 0 0.5rem 0.35rem;
}

.fx-preview-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1rem;
}

.fx-preview-action {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.15rem;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.92rem;
  color: #ffffff;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

.fx-preview-action:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(2, 132, 199, 0.3);
}

.fx-preview-close {
  position: absolute;
  top: 0.8rem;
  left: 0.8rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(15, 23, 42, 0.55);
  color: #ffffff;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition:
    background 0.2s ease,
    transform 0.2s ease;
}

.fx-preview-close:hover {
  background: rgba(15, 23, 42, 0.8);
  transform: rotate(90deg);
}

.fx-preview-close:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.6);
  outline-offset: 2px;
}

/* چرخ‌وفلک ناوبری درون پیش‌نمایش گالری */
.fx-preview-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.92);
  color: #1f2937;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  transition:
    background 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

.fx-preview-nav:hover {
  background: var(--primary);
  color: #ffffff;
}

.fx-preview-nav.fx-prev {
  right: 0.75rem;
}
.fx-preview-nav.fx-next {
  left: 0.75rem;
}
.fx-preview-nav:focus-visible {
  outline: 3px solid rgba(2, 132, 199, 0.5);
  outline-offset: 2px;
}

/* نشانگر دکمه‌های قابل‌پیش‌نمایش */
.fx-focusable {
  cursor: pointer;
}

.fx-focusable:focus-visible {
  outline: 3px solid rgba(2, 132, 199, 0.45);
  outline-offset: 2px;
}

@media (hover: hover) {
  .fx-focusable:hover {
    transform: translateY(-3px);
  }
}

/* ---------- اجزای داخلی پیش‌نمایش ---------- */

/* نوار سرتیتر کارت (انجمن‌ها، المپیادها) */
.fx-preview-head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem 1.25rem;
  color: #ffffff;
  flex-shrink: 0;
}

.fx-preview-head h3 {
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.5;
  margin: 0;
}

.fx-preview-head img {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* نشان آیکون داخل سرتیتر */
.fx-icon-badge {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
}

/* آیکون بزرگ امکانات (پیش‌نمایش وسط‌چین) */
.fx-facility-icon {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.1rem;
  margin: 0 auto;
}

.fx-facility-icon i {
  line-height: 1;
}

/* سربرگ کارت دانلود */
.fx-download-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.9rem;
}

/* تصویر عضو شورا — همیشه دایرهٔ کامل */
.fx-preview-avatar {
  width: 110px;
  height: 110px;
  max-height: 110px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  overflow: hidden;
  flex-shrink: 0;
  margin: 1.25rem auto 0;
  display: block;
  border: 4px solid var(--primary-tint);
  box-shadow: 0 6px 18px rgba(2, 132, 199, 0.18);
}

/* قانون عمومی «.fx-preview-media img» (width:100% + object-fit:contain)
   specificity بالاتری دارد و آواتار دایره‌ای را به بیضی کشیده بود؛
   این قانون با specificity بالاتر آن را خنثی می‌کند. */
.fx-preview-media img.fx-preview-avatar {
  width: 110px;
  height: 110px;
  max-height: 110px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
}

.fx-preview-avatar-ph {
  background: var(--primary-soft);
  color: var(--primary-bright);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.6rem;
  margin-top: 1.25rem;
}

/* حالت وسط‌چین رسانه (شورا، امکانات آیکونی) */
.fx-preview-media.fx-center-media {
  background: #ffffff;
  padding: 1.5rem 1rem 0.75rem;
}

/* ---------- کاهش حرکت (Accessibility) ---------- */
@media (prefers-reduced-motion: reduce) {
  .gallery-track {
    transition: none !important;
  }
  .gallery-card,
  .gallery-card-media img,
  .fx-preview-card,
  .fx-preview-overlay,
  .fx-preview-action,
  .fx-preview-close,
  .fx-preview-nav,
  .gnav-btn,
  .fx-focusable {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  .fx-preview-card,
  .fx-preview-overlay {
    transform: none !important;
  }
  .fx-focusable:hover {
    transform: none;
  }
}

/* موبایل: پیش‌نمایش نزدیک به تمام‌صفحه ولی با حاشیه مناسب */
@media (max-width: 640px) {
  .fx-preview-overlay {
    padding: 0.65rem;
  }
  .fx-preview-card {
    max-width: 100%;
    border-radius: 16px;
    max-height: calc(100dvh - 1.3rem);
  }
  .fx-preview-media img {
    max-height: 40dvh;
  }
  .fx-preview-nav {
    top: auto;
    bottom: 0.9rem;
    transform: none;
  }
  .fx-preview-nav.fx-prev {
    right: auto;
    left: calc(50% - 52px);
  }
  .fx-preview-nav.fx-next {
    left: auto;
    right: calc(50% - 52px);
  }
  .fx-preview-body {
    padding: 1rem;
  }
}

/* ==================== Unified Auth Gate (download / club join / council feedback) ====================
   یک سیستم نمایش واحد برای «صفحهٔ احراز هویت دانلود». رنگ تأکید با متغیرهای
   --ag-* روی #download-login کنترل می‌شود: پیش‌فرض = ایندیگو/اسلیت (دانلود
   جزوات)، data-accent="green" = شورای دانش‌آموزی، و برای عضویت در انجمن‌ها
   رنگِ تنظیم‌شدهٔ همان انجمن (نام Tailwind یا hex) از طریق JS اعمال می‌شود.
   این بخش فقط ظاهر را تعیین می‌کند و هیچ منطق احراز هویت/دسترسی ندارد. */
#download-login {
  --ag-grad-from: #1e293b; /* slate-800  */
  --ag-grad-via: var(--primary-ink); /* indigo-800 */
  --ag-grad-to: var(--primary); /* indigo-600 */
  --ag-grad-sub: #bae6fd; /* indigo-200 */
  --ag-strong: var(--primary); /* indigo-600 */
  --ag-strong-hover: var(--primary-deep); /* indigo-700 */
  --ag-soft: var(--primary-soft); /* indigo-50  */
  --ag-soft-border: var(--primary-tint); /* indigo-100 */
  --ag-soft-text: var(--primary); /* indigo-500 */
  --ag-soft-icon: var(--primary-bright); /* indigo-400 */
  --ag-ring: rgba(2, 132, 199, 0.35);
}
#download-login[data-accent="green"] {
  --ag-grad-via: #15803d; /* green-700 */
  --ag-grad-to: #16a34a; /* green-600 */
  --ag-grad-sub: #bbf7d0; /* green-200 */
  --ag-strong: #16a34a;
  --ag-strong-hover: #15803d;
  --ag-soft: #f0fdf4; /* green-50  */
  --ag-soft-border: #dcfce7; /* green-100 */
  --ag-soft-text: #16a34a;
  --ag-soft-icon: #4ade80; /* green-400 */
  --ag-ring: rgba(22, 163, 74, 0.35);
}
#download-login .ag-header {
  background: linear-gradient(
    to left,
    var(--ag-grad-from),
    var(--ag-grad-via),
    var(--ag-grad-to)
  );
  transition: background 0.25s ease;
}
#download-login .ag-header-sub {
  color: var(--ag-grad-sub);
}
#download-login .ag-pending {
  background: var(--ag-soft);
  border: 1px solid var(--ag-soft-border);
}
#download-login .ag-pending-label {
  color: var(--ag-soft-text);
}
#download-login .ag-pending-icon {
  color: var(--ag-strong);
}
#download-login .ag-info-icon {
  color: var(--ag-soft-icon);
}
#download-login .ag-input:focus {
  outline: none;
  border-color: var(--ag-strong);
  box-shadow: 0 0 0 2px var(--ag-ring);
}
#download-login .ag-submit {
  background-color: var(--ag-strong);
  transition: background-color 0.2s ease;
}
#download-login .ag-submit:hover {
  background-color: var(--ag-strong-hover);
}

/* ==================== آیکون چشم رمز عبور + منوی خروجی ==================== */

.password-eye-wrap {
  position: relative;
}

.password-eye-wrap input {
  padding-left: 2.75rem;
}

.password-eye-btn {
  position: absolute;
  left: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  line-height: 0;
  color: var(--primary); /* purple-600 — هم‌خانواده با رنگ اصلی سایت */
}

.password-eye-btn:hover {
  color: var(--primary-deep); /* purple-700 */
}

.password-eye-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 0.25rem;
}

.export-menu {
  min-width: 8.5rem;
}

.export-menu button {
  white-space: nowrap;
}

/* پاپ‌آور منوی خروجی (Excel/PDF) — position:fixed روی body تا ظرف
   جدول (overflow-y:hidden) دیگر آن را قیچی نکند. ظاهر همان زبان طراحی
   قبلی: پس‌زمینهٔ سفید، حاشیه، سایه و گوشه‌های گرد. */
.export-menu-popover {
  position: fixed;
  z-index: 1000;
  min-width: 8.5rem;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -4px rgba(0, 0, 0, 0.1);
  padding: 0.25rem 0;
  overflow: hidden;
}

.export-menu-popover button {
  display: block;
  width: 100%;
  text-align: right;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  line-height: 1.5;
  white-space: nowrap;
  background: transparent;
  border: none;
  cursor: pointer;
}

.export-menu-popover button:hover {
  background: #f9fafb;
}

/* ==================== v2.1 بهبودهای جزئی رابط کاربری ==================== */

/* ==================== v2.6 پروفایل چت، نشست‌ها، حذف مکالمه، پیشرفت آپلود ==================== */

/* --- چیپ پروفایل من در سربرگ پیام‌رسان --- */
.chat-self-chip {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: 1;
  min-width: 0;
  background: linear-gradient(
    135deg,
    rgba(14, 165, 233, 0.08),
    rgba(2, 132, 199, 0.05)
  );
  border: 1px solid rgba(14, 165, 233, 0.22);
  border-radius: 0.9rem;
  padding: 0.45rem 0.6rem;
  text-align: right;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}
.chat-self-chip:hover,
.chat-self-chip:focus-visible {
  border-color: rgba(14, 165, 233, 0.55);
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.14);
  background: linear-gradient(
    135deg,
    rgba(14, 165, 233, 0.13),
    rgba(2, 132, 199, 0.08)
  );
  outline: none;
}
.chat-self-avatar-wrap {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
}
.chat-self-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.22);
  background: #f0f9ff;
}
.chat-self-edit-badge {
  position: absolute;
  bottom: -3px;
  left: -3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    var(--primary-bright, #0ea5e9),
    var(--primary, #0284c7)
  );
  color: #fff;
  font-size: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
}
.chat-self-texts {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.chat-self-name {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--primary-ink, #0f172a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.chat-self-sub {
  font-size: 0.68rem;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- پیش‌نمایش تصویر در ویرایشگر پروفایل چت --- */
.chat-profile-preview {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #e0f2fe;
  box-shadow: 0 6px 20px rgba(2, 132, 199, 0.18);
  background: #f0f9ff;
}
.chat-profile-spinner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--primary, #0284c7);
  background: rgba(255, 255, 255, 0.55);
  border-radius: 50%;
}

/* --- دکمهٔ سطل زبالهٔ حذف مکالمهٔ خصوصی --- */
.pv-delete-btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 0.55rem;
  border: 1px solid transparent;
  background: transparent;
  color: #94a3b8;
  font-size: 0.82rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition:
    opacity 0.18s ease,
    background 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease;
}
.conversation-item:hover .pv-delete-btn,
.conversation-item:focus-within .pv-delete-btn {
  opacity: 1;
}
.pv-delete-btn:hover,
.pv-delete-btn:focus-visible {
  background: #fef2f2;
  border-color: #fecaca;
  color: #dc2626;
  outline: none;
}
@media (hover: none) {
  /* در لمسی، دکمه همیشه نمایان است */
  .pv-delete-btn {
    opacity: 1;
  }
}

/* --- نشست‌های فعال --- */
.session-item {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  padding: 0.6rem 0.75rem;
  transition:
    border-color 0.2s ease,
    background 0.2s ease;
}
.session-item:hover {
  border-color: rgba(14, 165, 233, 0.45);
  background: #f0f9ff;
}
.session-item-current {
  border-color: rgba(14, 165, 233, 0.55);
  background: #f0f9ff;
}
.session-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 0.6rem;
  background: linear-gradient(
    135deg,
    var(--primary-bright, #0ea5e9),
    var(--primary, #0284c7)
  );
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
}
.session-current-badge {
  display: inline-flex;
  align-items: center;
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #bbf7d0;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 0.1rem 0.5rem;
}
.session-end-btn,
.session-end-btn-danger {
  flex-shrink: 0;
  border-radius: 0.55rem;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.35rem 0.7rem;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #475569;
  cursor: pointer;
  transition:
    background 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease;
}
.session-end-btn:hover,
.session-end-btn:focus-visible {
  background: #fef2f2;
  border-color: #fecaca;
  color: #dc2626;
  outline: none;
}
.session-end-btn-danger {
  background: #dc2626;
  border-color: #dc2626;
  color: #fff;
}
.session-end-btn-danger:hover,
.session-end-btn-danger:focus-visible {
  background: #b91c1c;
  border-color: #b91c1c;
  color: #fff;
  outline: none;
}

/* --- نوار پیشرفت آپلود پیوست چت --- */
.chat-upload-progress {
  position: absolute;
  top: -3.4rem;
  right: 0.75rem;
  left: 0.75rem;
  background: #fff;
  border: 1px solid rgba(14, 165, 233, 0.3);
  border-radius: 0.75rem;
  box-shadow: 0 8px 24px rgba(2, 132, 199, 0.16);
  padding: 0.5rem 0.75rem;
  z-index: 20;
}
.chat-upload-progress-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  color: var(--primary-ink, #0f172a);
}
.chat-upload-progress-row .fa-arrow-up-from-bracket {
  color: var(--primary, #0284c7);
}
.chat-upload-progress-name {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
}
.chat-upload-progress-pct {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--primary, #0284c7);
}
.chat-upload-progress-track {
  margin-top: 0.35rem;
  height: 6px;
  border-radius: 999px;
  background: rgba(14, 165, 233, 0.16);
  overflow: hidden;
}
.chat-upload-progress-fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    var(--primary-bright, #0ea5e9),
    var(--primary, #0284c7)
  );
  transition: width 0.25s ease;
}

/* --- لایت‌باکس تصویر چت --- */
.media-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 6, 20, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.22s ease;
}

.media-lightbox.open {
  opacity: 1;
}

.media-lightbox .lightbox-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  max-width: min(92vw, 1100px);
  transform: scale(0.94);
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.media-lightbox.open .lightbox-body {
  transform: scale(1);
}

.media-lightbox .lightbox-img {
  max-width: 100%;
  max-height: 78vh;
  border-radius: 14px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
  cursor: zoom-in;
  transition: transform 0.25s ease;
}

.media-lightbox .lightbox-img.zoomed {
  max-width: none;
  max-height: none;
  cursor: zoom-out;
  transform: scale(1.6);
}

.media-lightbox .lightbox-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.media-lightbox .lightbox-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  font-size: 0.8rem;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  transition:
    background 0.2s ease,
    transform 0.15s ease;
}

.media-lightbox .lightbox-btn:hover {
  background: rgba(255, 255, 255, 0.22);
  transform: translateY(-1px);
}

.media-lightbox .lightbox-close {
  position: absolute;
  top: 1.1rem;
  left: 1.1rem; /* در RTL دور از شروع خواندن */
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background 0.2s ease,
    transform 0.2s ease;
}

.media-lightbox .lightbox-close:hover {
  background: rgba(239, 68, 68, 0.75);
  transform: rotate(90deg);
}

.media-lightbox .lightbox-close:focus-visible {
  outline: 2px solid #7dd3fc;
  outline-offset: 2px;
}

/* --- جدول‌های داشبورد: جداکنندهٔ نرم‌تر و هاور یکنواخت --- */
.dashboard-table tbody tr,
.table-auto tbody tr {
  transition: background-color 0.15s ease;
}

/* --- بهبود حالت خالی جدول‌ها --- */
.dataTables_empty,
td[colspan].text-center {
  padding: 2rem 1rem !important;
  color: #9ca3af;
  text-align: center;
}

/* ===== A11y: قفل اسکرول پس‌زمینه هنگام باز بودن دیالوگ‌ها (round 4) ===== */
body.a11y-modal-open {
  overflow: hidden !important;
}

/* ===== نشانگر «در حال تایپ» در ردیف کانال‌ها (سایدبار چت) — round 4 ===== */
.channel-row-typing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--primary);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.6;
  animation: channelTypingFadeIn 0.25s ease-out;
}
.channel-row-typing .fa-pen-nib {
  font-size: 9px;
  opacity: 0.75;
}
.channel-row-typing-name {
  max-width: 96px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.channel-row-typing-dots {
  display: inline-flex;
  gap: 2px;
  margin-right: 2px;
}
.channel-row-typing-dots i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--primary);
  display: inline-block;
  animation: channelTypingDot 1.2s infinite ease-in-out;
}
.channel-row-typing-dots i:nth-child(2) {
  animation-delay: 0.15s;
}
.channel-row-typing-dots i:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes channelTypingDot {
  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.45;
  }
  30% {
    transform: translateY(-3px);
    opacity: 1;
  }
}
@keyframes channelTypingFadeIn {
  from {
    opacity: 0;
    transform: translateY(2px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .channel-row-typing,
  .channel-row-typing-dots i {
    animation: none !important;
  }
}

/* ============================================================
   فوکوس یکدست داشبورد — حلقهٔ بنفش ملایم هماهنگ با تم برای
   ورودی‌ها/سلکت‌ها/تکست‌اره‌های داشبورد (حسابداری، فیلترها و …).
   قبلاً این عناصر فقط حلقهٔ پیش‌فرض مرورگر داشتند؛ حالا فوکوس
   کیبوردی و موس هر دو نشانهٔ بصری یکدست و شفاف دارند (a11y).
   نکته: قانون قدیمیِ «حذف افکت‌ها در داشبورد» (خط ~۲۳۰۶) با
   !important همهٔ سایه‌ها را می‌کُشد؛ چون نشانهٔ فوکوس صرفاً هنگام
   تمرکز واقعی نمایش داده می‌شود و نقش دسترس‌پذیری دارد، فقط در
   همین حالت با !important از آن قانون عبور می‌کند.
   ============================================================ */
#dashboardContent input:focus,
#dashboardContent select:focus,
#dashboardContent textarea:focus {
  outline: none;
  border-color: var(--primary-bright) !important;
  box-shadow: 0 0 0 3px rgba(196, 181, 253, 0.35) !important;
}

/* ============================================================
   نشان پیام خوانده‌نشدهٔ «پیام‌های شورا» — تب داشبورد + منوی موبایل
   (ویژگی تکمیلی راند ۷؛ قرمز تم، RTL، حرکت ظریف با رعایت
   prefers-reduced-motion. position:relative روی هدف‌ها تا نشان
   در گوشهٔ چپِ آیتم (انتهای جهت RTL) بنشیند.)
   ============================================================ */
#dashboardTabs button[data-tab="council-messages"],
#userMenuRoleOptions .um-item[data-section="council-messages"] {
  position: relative;
}
.council-unread-pill {
  position: absolute;
  top: 5px;
  inset-inline-end: 6px;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  border-radius: 9999px;
  background: #ef4444;
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  animation: councilPillIn 0.18s ease-out;
  pointer-events: none;
}
@keyframes councilPillIn {
  from {
    transform: scale(0.6);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .council-unread-pill {
    animation: none;
  }
}

/* ---------- دور بازبینی ۸: اشتراک‌گذاری المپیاد + حلقهٔ فوکوس دکمه‌ها ---------- */
/* دکمهٔ اشتراک‌گذاری لینک المپیاد — قاب هم‌رنگ کارت، هم‌قدِ دکمهٔ «شرکت کنید» */
.olympiad-share-btn {
  width: 44px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 16px;
  background: transparent;
  border: 1.5px solid;
  border-radius: 10px;
  cursor: pointer;
  transition:
    background 0.2s,
    transform 0.2s;
}
.olympiad-share-btn:hover {
  background: rgba(0, 0, 0, 0.05);
  transform: translateY(-1px);
}
.olympiad-share-btn:active {
  transform: translateY(0);
}
/* حلقهٔ فوکوس صفحه‌کلید برای همهٔ دکمه‌ها — مکمل حلقهٔ فوکوس فیلدهای دور ۶.
   از outline استفاده می‌شود تا با سرکوب box-shadow در قالب داشبورد تزاریظ
   (!important) درگیر نشود؛ فقط در فوکوس صفحه‌کلیدی (focus-visible) ظاهر می‌شود. */
button:focus-visible,
a:focus-visible,
select:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--primary-bright);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .olympiad-share-btn,
  .olympiad-share-btn:hover,
  .olympiad-share-btn:active {
    transform: none;
    transition: none;
  }
}

/* ==================== تکالیف (Assignments) — round 9 ==================== */
/* کارت تکلیف: بالا رفتن ظریف با هاور + تغییر رنگ حاشیه */
.asgmt-card {
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}
.asgmt-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -8px rgba(126, 34, 206, 0.18);
  border-color: #bae6fd;
}
/* نشان وضعیت تکلیف: بدون انیمیشن مزاحم؛ فقط کنتراست کافی در هر دو تم */
.asgmt-status-badge {
  white-space: nowrap;
}
/* ردیف تکالیف معلم: هایور ملایم */
.asgmt-row {
  transition: background-color 0.15s ease;
}
.asgmt-row:hover {
  background-color: rgba(250, 245, 255, 0.6);
}
/* مودال‌های تکلیف: هم‌تراز با سیستم مودال موجود */
#assignmentSubmitModal,
#assignmentSubmissionsModal {
  backdrop-filter: blur(2px);
}
@media (prefers-reduced-motion: reduce) {
  .asgmt-card,
  .asgmt-row {
    transition: none;
  }
  .asgmt-card:hover {
    transform: none;
  }
}
/* نشان «نزدیک مهلت»: نبض ملایم — در حرکت‌کاملاً کاهش‌یافته ثابت می‌ماند */
.asgmt-status-badge.animate-pulse {
  animation: asgmtDueSoonPulse 2s ease-in-out infinite;
}
@keyframes asgmtDueSoonPulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.75;
  }
}
@media (prefers-reduced-motion: reduce) {
  .asgmt-status-badge.animate-pulse {
    animation: none;
  }
}

/* ============================================================
   ROYAL-BLUE DESIGN SYSTEM — 2026-10-08 full redesign
   Reference: navy #0B3268 / sidebar #0B3D7A / royal #287FE8 /
   interactive #2583F4 / pale #EAF4FF / border #D8E8FA
   Text #183B69 / sub #6481A6 / icon-bg #E4F0FF / focus #156FE5
   Layering note: appended LAST; overrides equal-specificity rules.
   ============================================================ */

/* ---------- 1) Page background & surfaces ---------- */
body {
  background:
    radial-gradient(
      1100px 500px at 100% -140px,
      rgba(37, 131, 244, 0.1),
      transparent 60%
    ),
    radial-gradient(
      900px 460px at 0% -120px,
      rgba(11, 61, 122, 0.08),
      transparent 55%
    ),
    linear-gradient(180deg, #f5f9ff 0%, #eaf4ff 100%);
  background-attachment: fixed;
  color: var(--primary-ink);
}

/* ---------- 2) Header (navy identity bar) ---------- */
header.gradient-bg {
  background:
    radial-gradient(
      720px 220px at 12% 130%,
      rgba(67, 143, 234, 0.35),
      transparent 65%
    ),
    linear-gradient(
      120deg,
      var(--primary-ink) 0%,
      var(--primary-deep) 55%,
      var(--primary-deep) 100%
    );
  position: relative;
  overflow: hidden;
}
header.gradient-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.06),
    transparent 40%
  );
  pointer-events: none;
}
header.gradient-bg .fa-graduation-cap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 8px 20px rgba(4, 24, 54, 0.28);
  font-size: 1.5rem !important;
}
header.gradient-bg h1 {
  letter-spacing: 0.2px;
}
#currentDate {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 6px 14px;
  border-radius: 9999px;
  font-weight: 600;
  font-size: 0.85rem;
}
header .bg-white {
  background: #ffffff !important;
  color: var(--primary-deep);
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(4, 24, 54, 0.25);
}
header .bg-white:hover {
  background: #eaf4ff !important;
}

/* ---------- 3) Public nav ---------- */
/* شیشه‌ای‌سازی ناوبری از طریق لایهٔ ::before — نه روی خودِ nav.
   چرا؟ per CSS spec، «backdrop-filter» روی یک عنصر آن را به containing-block
   برای descendants با position:fixed تبدیل می‌کند؛ drawer موبایل (ul ثابتِ
   درون nav) به‌جای viewport درون nav جای‌می‌گرفت و به یک نوار ۴۸ پیکسلی
   (فقط دکمهٔ «بستن») فرو می‌ریخت. با انتقال blur به ::before، جلوهٔ شیشه‌ای
   حفظ می‌شود اما nav دیگر containing-block نیست و drawer تمام‌قد باز می‌شود. */
nav[aria-label="ناوبری اصلی"] {
  background: transparent !important;
  border-bottom: 1px solid #d8e8fa;
  isolation: isolate;
}
nav[aria-label="ناوبری اصلی"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  pointer-events: none;
}
nav .nav-link {
  position: relative;
  padding: 6px 2px;
}
nav .nav-link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -6px;
  height: 3px;
  border-radius: 9999px;
  background: linear-gradient(90deg, var(--primary), #438fea);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
}
nav .nav-link:hover::after,
nav .nav-link.active::after {
  transform: scaleX(1);
}

/* ---------- 4) Hero ---------- */
.school-hero {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  isolation: isolate;
  min-height: 480px;
  margin-bottom: 28px;
  box-shadow: 0 24px 60px -18px rgba(11, 50, 104, 0.45);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.school-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%; /* قاب عکس واقعی: تابلو و ورودی در دید بمانند */
  z-index: -2;
  transform: scale(1.02);
}
.school-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      275deg,
      rgba(11, 50, 104, 0.18) 0%,
      rgba(11, 50, 104, 0.42) 55%,
      rgba(11, 50, 104, 0.88) 100%
    ),
    linear-gradient(0deg, rgba(11, 61, 122, 0.55) 0%, rgba(11, 61, 122, 0) 45%);
}
.school-hero__content {
  padding: clamp(24px, 5vw, 56px);
  max-width: 620px;
  color: #fff;
}
.school-hero__title {
  font-size: clamp(1.5rem, 3.4vw, 2.5rem);
  font-weight: 800;
  line-height: 1.45;
  margin-bottom: 10px;
  text-shadow: 0 2px 14px rgba(4, 24, 54, 0.45);
}
.school-hero__subtitle {
  font-size: clamp(0.95rem, 1.6vw, 1.12rem);
  opacity: 0.92;
  line-height: 1.9;
  text-shadow: 0 1px 8px rgba(4, 24, 54, 0.4);
}
.school-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}
.school-hero__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 10px 22px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.95rem;
  transition:
    transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.2s ease,
    background-color 0.2s ease;
}
.school-hero__btn--solid {
  background: linear-gradient(
    135deg,
    var(--primary-bright),
    var(--primary) 60%,
    var(--primary-deep)
  );
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 10px 24px -8px rgba(37, 131, 244, 0.65);
}
.school-hero__btn--solid:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -8px rgba(37, 131, 244, 0.75);
  color: #fff;
}
.school-hero__btn--glass {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.school-hero__btn--glass:hover {
  background: rgba(255, 255, 255, 0.22);
  transform: translateY(-2px);
  color: #fff;
}
.school-hero__cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  padding: 0 clamp(16px, 3.4vw, 36px) clamp(18px, 3vw, 32px);
}
.hero-quick-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 16px 10px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.26);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #fff;
  transition:
    transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1),
    background-color 0.22s ease,
    box-shadow 0.22s ease;
}
.hero-quick-card:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 14px 30px -12px rgba(4, 24, 54, 0.5);
  color: #fff;
}
.hero-quick-card__icon {
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.3);
  font-size: 1.15rem;
}
.hero-quick-card__title {
  font-weight: 800;
  font-size: 0.95rem;
}
.hero-quick-card__sub {
  font-size: 0.74rem;
  opacity: 0.85;
  line-height: 1.6;
}

/* ---------- 5) Stat & generic white cards ---------- */
#homeStats > .bg-white,
main .bg-white.rounded-lg.shadow {
  border: 1px solid #d8e8fa;
  border-radius: 16px;
  box-shadow: 0 10px 26px -14px rgba(11, 50, 104, 0.25);
}
#homeStats .stat-number {
  color: var(--primary-deep) !important;
  font-weight: 800;
}
#homeStats .fa-users,
#homeStats .fa-chalkboard-teacher,
#homeStats .fa-star,
#homeStats .fa-book {
  background: #e4f0ff;
  color: var(--primary-bright);
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem !important;
}

/* ---------- 6) Dashboard shell: navy identity ---------- */
/* Tab bar (real DOM: .dash-tabbar wraps #dashboardTabs) */
#userDashboard .dash-tabbar {
  background:
    radial-gradient(
      600px 160px at 85% 120%,
      rgba(67, 143, 234, 0.28),
      transparent 60%
    ),
    linear-gradient(
      120deg,
      var(--primary-ink) 0%,
      var(--primary-deep) 55%,
      var(--primary-deep) 100%
    ) !important;
  border-bottom: none;
  box-shadow: 0 10px 24px -14px rgba(11, 50, 104, 0.5);
}
#userDashboard .bg-white.shadow-lg {
  border-bottom: 1px solid #d8e8fa;
}
#dashboardTabs button {
  border-radius: 10px 10px 0 0;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;
}
#dashboardTabs button.text-gray-600 {
  color: #cfe0f5 !important;
  border-bottom-color: transparent !important;
}
#dashboardTabs button.text-gray-600:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.1);
  border-bottom-color: rgba(67, 143, 234, 0.55) !important;
}
#dashboardTabs button.text-blue-700 {
  color: #ffffff !important;
  font-weight: 800;
  background: linear-gradient(135deg, var(--primary-bright), var(--primary));
  border-bottom-color: #438fea !important;
  box-shadow: 0 8px 18px -8px rgba(37, 131, 244, 0.7);
}
#userDashboard .dash-tabs-scroll {
  color: #cfe0f5;
}
#userDashboard .dash-tabs-scroll:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

/* ---------- 7) Buttons ---------- */
button.bg-blue-600,
.bg-blue-600 {
  background-color: var(--primary);
}
button.bg-blue-600:hover,
.bg-blue-600:hover {
  background-color: #1e6fd0;
}
button.bg-blue-700 {
  background-color: var(--primary-deep);
}

/* ---------- 8) Focus ring (reference #156FE5) ---------- */
button:focus-visible,
a:focus-visible,
select:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
#userDashboard input:focus,
#userDashboard select:focus,
#userDashboard textarea:focus {
  border-color: #a7c8f5 !important;
  box-shadow: 0 0 0 3px rgba(21, 111, 229, 0.25) !important;
}

/* ---------- 9) Tables ---------- */
#userDashboard table thead th {
  background: #eaf4ff;
  color: var(--primary-deep);
  font-weight: 800;
  border-bottom: 2px solid #d8e8fa;
}
#userDashboard table tbody tr {
  border-bottom: 1px solid #e3eefb;
}
#userDashboard table tbody tr:hover {
  background: #f5f9ff;
}

/* ---------- 10) Chat bubbles ---------- */
.chat-message-sent,
.message-sent,
.sent-message {
  background: linear-gradient(
    135deg,
    var(--primary-bright) 0%,
    #438fea 100%
  ) !important;
  color: #fff;
}

/* ---------- 11) Hero responsive ---------- */
@media (max-width: 1024px) {
  .school-hero__cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .school-hero {
    min-height: 420px;
  }
  .school-hero__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .hero-quick-card__sub {
    display: none;
  }
  .school-hero__cta .school-hero__btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}
@media (prefers-reduced-motion: reduce) {
  .school-hero__btn,
  .hero-quick-card,
  nav .nav-link::after {
    transition: none !important;
  }
  .hero-quick-card:hover {
    transform: none;
  }
}
/* ============================================================
   REFINED BLUE + RIGHT SIDEBAR + GREEN CHAT SYSTEM — 2026-10-09
   ------------------------------------------------------------
   Task scope (owner request):
   1) lighter, more elegant blue theme (no more heavy navy)
   2) remove the blue band behind panel/section headings
   3) one unified GREEN identity for every chat surface
   4) every panel header becomes a RIGHT-side RTL sidebar
      (tabs keep their JS contract: text-gray-600 / text-blue-700)
   5) responsive audit 320→1280+, mobile drawer for the sidebar
   6) chat modal empty-state redesigned (was: huge white void
      where "only the close button" was visible)
   Appended LAST → equal-specificity rules above are overridden.
   ============================================================ */

/* ---------- 1) Refined light-blue tokens ---------- */
:root {
  --primary: var(--primary); /* primary blue            */
  --primary-interactive: var(--primary); /* hover / secondary       */
  --primary-deep: var(--primary-deep); /* pressed / emphasis      */
  --primary-ink: var(--primary-ink); /* deep readable accent    */
  --surface-pale: var(--primary-soft); /* light blue surface      */
  --page-soft: #f4f8ff; /* soft page background    */
  --border-blue: #d7e3f4; /* subtle borders          */
  --text-main: #1e293b; /* dark readable text      */
  --text-sub: #64748b; /* muted text              */
  --focus-blue: var(--primary);

  /* unified green chat system */
  --chat-primary: #16a34a;
  --chat-interactive: #22c55e;
  --chat-deep: #15803d;
  --chat-surface: #f0fdf4;
  --chat-accent: #dcfce7;
  --chat-border: #bbf7d0;
}

/* ---------- 2) Page background — lighter, airier ---------- */
body {
  background:
    radial-gradient(
      1100px 480px at 100% -160px,
      rgba(14, 165, 233, 0.07),
      transparent 62%
    ),
    radial-gradient(
      900px 440px at 0% -140px,
      rgba(2, 132, 199, 0.05),
      transparent 55%
    ),
    linear-gradient(180deg, #f7faff 0%, #eef5ff 100%);
  background-attachment: fixed;
  color: var(--text-main);
}

/* ---------- 3) Header + modal title bars — unified reference blue ----------
   (old royal-navy var(--primary-ink)/var(--primary) family retired; every remaining
   .gradient-bg surface now uses the sidebar reference tokens) */
header.gradient-bg,
.gradient-bg {
  background:
    radial-gradient(
      720px 220px at 12% 130%,
      rgba(125, 211, 252, 0.25),
      transparent 65%
    ),
    linear-gradient(
      120deg,
      var(--primary) 0%,
      var(--primary-interactive) 55%,
      var(--primary-bright) 100%
    ) !important;
}

/* ---------- 4) Hero overlay — let the photo breathe ---------- */
.school-hero__overlay {
  background:
    linear-gradient(
      275deg,
      rgba(2, 132, 199, 0.1) 0%,
      rgba(7, 89, 133, 0.34) 55%,
      rgba(7, 89, 133, 0.74) 100%
    ),
    linear-gradient(0deg, rgba(3, 105, 161, 0.42) 0%, rgba(3, 105, 161, 0) 45%);
}

/* ---------- 5) Buttons & focus — refined blue ---------- */
button.bg-blue-600,
.bg-blue-600 {
  background-color: var(--primary);
}
button.bg-blue-600:hover,
.bg-blue-600:hover {
  background-color: var(--primary-interactive);
}
button.bg-blue-700,
.bg-blue-700 {
  background-color: var(--primary-deep);
}
button:focus-visible,
a:focus-visible,
select:focus-visible,
[role="button"]:focus-visible {
  outline-color: var(--focus-blue);
}

/* ---------- 6) Tables — light headers on soft surface ---------- */
#userDashboard table thead th {
  background: var(--surface-pale);
  color: var(--primary-ink);
  border-bottom: 2px solid var(--border-blue);
}
#userDashboard table tbody tr {
  border-bottom: 1px solid #e6eefa;
}
#userDashboard table tbody tr:hover {
  background: #f6f9ff;
}

/* ---------- 7) Panel heading band REMOVED (council section) ----------
   The old full-width blue gradient behind «شورای دانش‌آموزی» is
   replaced by a clean white heading card with a blue accent edge.
   Text, hierarchy and alignment are preserved. */
#council > .bg-gradient-to-r {
  background: #ffffff !important;
  color: var(--text-main);
  border: 1px solid var(--border-blue);
  border-inline-start: 5px solid var(--primary);
  border-radius: 16px;
  box-shadow: 0 10px 24px -18px rgba(7, 89, 133, 0.35);
}
#council > .bg-gradient-to-r h2 {
  color: var(--primary-ink);
}
#council > .bg-gradient-to-r p {
  color: var(--text-sub);
}

/* Same treatment for any remaining gradient heading banner
   outside modals (defensive, scoped to sections only). */
main section > .bg-gradient-to-r:not(.keep-band) {
  background: #ffffff !important;
  color: var(--text-main);
  border: 1px solid var(--border-blue);
  border-inline-start: 5px solid var(--primary);
  border-radius: 16px;
}
main section > .bg-gradient-to-r:not(.keep-band) h2 {
  color: var(--primary-ink);
}
main section > .bg-gradient-to-r:not(.keep-band) p {
  color: var(--text-sub);
}

/* ============================================================
   8) RIGHT-SIDE RTL SIDEBAR (desktop ≥901px)
   ------------------------------------------------------------
   The horizontal navy .dash-tabbar becomes a vertical sidebar
   on the RIGHT (RTL grid: first column = right). The JS tab
   contract is untouched — #dashboardTabs buttons keep their
   text-gray-600 / text-blue-700 class toggling.
   ============================================================ */
#userDashboard:not(.hidden) {
  display: grid;
  grid-template-columns: 272px minmax(0, 1fr);
  grid-template-areas:
    "dashhead dashhead"
    "dashside dashmain";
  align-items: start;
}
#userDashboard > .bg-white.shadow-lg {
  grid-area: dashhead;
}
#userDashboard .dash-tabbar {
  grid-area: dashside;
}
#userDashboard > #dashboardContent {
  grid-area: dashmain;
}

#userDashboard .dash-tabbar {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  background:
    radial-gradient(
      420px 200px at 100% 0%,
      rgba(125, 211, 252, 0.16),
      transparent 60%
    ),
    linear-gradient(180deg, var(--primary-ink) 0%, var(--primary-deep) 120%) !important;
  border-bottom: none !important;
  box-shadow: -12px 0 32px -22px rgba(7, 89, 133, 0.55);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
}
#userDashboard .dash-tabbar::-webkit-scrollbar {
  width: 6px;
}
#userDashboard .dash-tabbar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.25);
  border-radius: 99px;
}

/* sidebar column layout (scroll arrows are retired) */
#userDashboard .dash-tabbar .container {
  max-width: none;
  padding: 0;
}
#userDashboard .dash-tabs-wrap {
  display: block;
  position: static;
  padding: 14px 12px 22px;
}
#userDashboard .dash-tabs-scroll {
  display: none !important;
}

#dashboardTabs {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#dashboardTabs::before {
  content: "منوی پنل";
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.55);
  padding: 6px 14px 10px;
}

/* nav items — same DOM buttons, sidebar language */
#dashboardTabs button {
  display: flex;
  align-items: center;
  width: 100%;
  text-align: start;
  gap: 2px;
  padding: 11px 14px !important;
  border-radius: 12px !important;
  border-bottom-color: transparent !important;
  font-size: 0.92rem;
  line-height: 1.45;
  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease;
}
#dashboardTabs button i {
  width: 20px;
  text-align: center;
  font-size: 0.95rem;
}
#dashboardTabs button.text-gray-600 {
  color: #dbe7fb !important;
  background: transparent !important;
  box-shadow: none !important;
}
#dashboardTabs button.text-gray-600:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.12) !important;
  transform: translateX(-2px);
}
#dashboardTabs button.text-blue-700 {
  color: #ffffff !important;
  font-weight: 800;
  background: linear-gradient(
    135deg,
    var(--primary),
    var(--primary)
  ) !important;
  border-bottom-color: transparent !important;
  box-shadow: 0 10px 20px -10px rgba(2, 132, 199, 0.8) !important;
}
#dashboardTabs button.text-blue-700:hover {
  transform: none;
}

/* ---------- 9) Header action pills — calmer, unified ---------- */
.user-more .um-item {
  border-radius: 12px;
  font-weight: 700;
  padding: 8px 14px;
}
.user-more .um-profile {
  background: var(--surface-pale);
  color: var(--primary-deep);
}
.user-more .um-profile:hover {
  background: var(--primary-tint);
  color: var(--primary-ink);
}
.user-more .um-chat {
  background: var(--chat-surface);
  color: var(--chat-deep);
}
.user-more .um-chat:hover {
  background: var(--chat-accent);
}
.user-more .um-accounting {
  background: #fff7ed;
  color: #c2410c;
}
.user-more .um-accounting:hover {
  background: #ffedd5;
}
.user-more .um-logout {
  background: #fef2f2;
  color: #b91c1c;
}
.user-more .um-logout:hover {
  background: #fee2e2;
}

/* ============================================================
   10) MOBILE / TABLET — sidebar becomes an accessible drawer
       (≤900px; the old rule hid the tabbar entirely)
   ============================================================ */
.dash-sidebar-toggle {
  display: none;
}
@media (max-width: 900px) {
  #userDashboard:not(.hidden) {
    display: block;
  }
  /* the old hide-rule is intentionally overridden: the sidebar
       now IS the mobile navigation drawer */
  #userDashboard .dash-tabbar {
    display: flex !important;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: auto;
    width: min(312px, 86vw);
    height: 100dvh;
    /* !important: the dashboard-wide effects-kill rule
           (#userDashboard * { transform:none !important }) would
           otherwise keep the drawer permanently on-screen */
    transform: translateX(105%) !important;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 70;
    border-radius: 0;
    box-shadow: -18px 0 44px -18px rgba(15, 23, 42, 0.5);
  }
  body.dash-sidebar-open #userDashboard .dash-tabbar {
    transform: translateX(0) !important;
  }
  body.dash-sidebar-open {
    overflow: hidden;
  }

  .dash-sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: 65;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }
  body.dash-sidebar-open .dash-sidebar-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  .dash-sidebar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--surface-pale);
    color: var(--primary-deep);
    border: 1px solid var(--border-blue);
    transition: background-color 0.18s ease;
  }
  .dash-sidebar-toggle:hover {
    background: var(--primary-tint);
  }
  .dash-sidebar-toggle i {
    pointer-events: none;
  }

  #dashboardTabs {
    padding-bottom: 8px;
  }
}

/* ============================================================
   11) UNIFIED GREEN CHAT SYSTEM
   ------------------------------------------------------------
   Every chat surface — the پیام‌رسان modal, council messages
   thread, chat quick-actions — speaks ONE green identity while
   semantic states (errors, quota warnings, reports) stay
   recognizable.
   ============================================================ */

/* --- 11a) chat modal shell --- */
#chatModal > div {
  max-width: 60rem;
  height: 82vh;
}
#chatModal .w-64 {
  background: #ffffff;
}

/* every blue control inside the chat modal becomes green */
#chatModal .bg-blue-600,
#chatModal .bg-blue-500 {
  background-color: var(--chat-primary) !important;
}
#chatModal button.bg-blue-600:hover,
#chatModal .bg-blue-600:hover {
  background-color: var(--chat-deep) !important;
}
#chatModal .bg-green-500 {
  background-color: var(--chat-interactive) !important;
}
#chatModal .bg-green-500:hover {
  background-color: var(--chat-primary) !important;
}
#chatModal .text-blue-600,
#chatModal .text-blue-700 {
  color: var(--chat-primary) !important;
}
#chatModal .focus\:ring-blue-500:focus {
  --tw-ring-color: rgba(34, 197, 94, 0.3) !important;
  border-color: var(--chat-interactive) !important;
}

/* sidebar header + tabs strip */
#chatModal .p-4.border-b.bg-gray-50 {
  background: var(--chat-surface) !important;
  border-bottom: 1px solid var(--chat-border) !important;
}
#chatModal .p-4.border-b.bg-gray-50 h3 {
  color: var(--chat-deep);
}
#chatModal #channelsTabBtn:not(.bg-gray-200),
#chatModal .chat-tab-active {
  background: var(--chat-primary) !important;
  box-shadow: 0 6px 14px -6px rgba(22, 163, 74, 0.55);
}
#chatModal #pvTabBtn.bg-gray-200 {
  color: var(--chat-deep);
}
#chatModal #pvTabBtn:not(.bg-gray-200) {
  background: var(--chat-primary) !important;
  color: #fff !important;
}
#chatModal #channelsTabBtn.bg-gray-200 {
  color: var(--chat-deep);
}

/* conversation / channel lists */
#chatModal .channel-item,
#chatModal .conversation-item {
  border-radius: 12px;
  margin: 2px 8px;
  border-inline-start: 3px solid transparent;
  transition:
    background-color 0.16s ease,
    border-color 0.16s ease;
}
#chatModal .channel-item:hover,
#chatModal .conversation-item:hover {
  background: var(--chat-surface) !important;
}
#chatModal .channel-item.active,
#chatModal .conversation-item.active {
  background: var(--chat-accent) !important;
  border-inline-start-color: var(--chat-primary);
}
#chatModal .channel-item.active .font-semibold,
#chatModal .conversation-item.active .font-semibold {
  color: var(--chat-deep);
}

/* chat header / composer / inputs */
#chatModal .chat-header {
  background: #ffffff;
  border-bottom: 1px solid var(--chat-border);
}
#chatModal .chat-header-details h4 {
  color: var(--text-main);
}
#chatModal .chat-input-area {
  background: var(--chat-surface);
  border-top: 1px solid var(--chat-border);
}
#chatModal .chat-input {
  border-color: var(--chat-border) !important;
  background: #ffffff;
}
#chatModal .chat-input:focus {
  border-color: var(--chat-interactive) !important;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.22) !important;
}
#chatModal .chat-input-btn {
  background: var(--chat-accent) !important;
  color: var(--chat-deep) !important;
}
#chatModal .chat-input-btn:hover {
  background: var(--chat-interactive) !important;
  color: #fff !important;
}
#chatModal .chat-input-btn.send {
  background: linear-gradient(
    135deg,
    var(--chat-interactive),
    var(--chat-primary)
  ) !important;
  color: #fff !important;
}
#chatModal .chat-input-btn.send:hover {
  background: var(--chat-deep) !important;
}

/* message bubbles — sent green, received neutral, ticks green */
.chat-message-sent,
.message-sent,
.sent-message,
#chatModal .message.sent .message-content,
#chatModal .message.sent .message-wrapper {
  background: linear-gradient(
    135deg,
    var(--chat-interactive) 0%,
    var(--chat-primary) 100%
  ) !important;
  color: #fff;
}
#chatModal .message.received .message-content {
  background: #ffffff;
  border: 1px solid var(--chat-border);
}
#chatModal .message-time-status,
#chatModal .message-status i {
  color: var(--chat-deep) !important;
}
#chatModal .message.received .message-time-status {
  color: var(--text-sub) !important;
}

/* typing + presence */
#chatModal .typing-dot {
  background: var(--chat-interactive);
}
#chatModal .online-indicator {
  background: var(--chat-interactive) !important;
  border-color: #fff;
}

/* --- 11b) council messages thread (dashboard panel) ---
    header follows the shared LIGHT modal-bar language with green
    accents (no heavy saturated green band — owner brief §2) */
#councilThreadOverlay .gradient-bg {
  background: #ffffff !important;
  color: var(--text-main) !important;
  border-bottom: 1px solid var(--chat-border) !important;
}
#councilThreadOverlay .gradient-bg h3 {
  color: var(--chat-deep) !important;
}
#councilThreadOverlay .gradient-bg p {
  color: var(--text-sub) !important;
}
#councilThreadOverlay .gradient-bg button.text-white,
#councilThreadOverlay .gradient-bg button {
  color: var(--text-sub) !important;
}
#councilThreadOverlay .gradient-bg button.text-white:hover,
#councilThreadOverlay .gradient-bg button:hover {
  color: var(--text-main) !important;
}
#councilThreadBody .bg-blue-600 {
  background: var(--chat-primary) !important;
  color: #fff !important;
}
#councilThreadSend.bg-blue-600,
#councilThread button.bg-blue-600 {
  background: var(--chat-primary) !important;
}
#councilThreadSend.bg-blue-600:hover {
  background: var(--chat-deep) !important;
}
#councilThreadInput:focus {
  border-color: var(--chat-interactive) !important;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2) !important;
}

/* --- 11c) chat quick-action in header menu stays green-coded --- */
.user-more .um-chat i {
  color: inherit;
}

/* ============================================================
   12) CHAT MODAL EMPTY-STATE — fixes «فقط دکمهٔ بستن»
   ------------------------------------------------------------
   The unselected-chat state used to render as a giant white
   void (users perceived the modal as a blank page where only
   the ✕ was visible). The existing placeholder <p> is now a
   designed, centered empty-state card.
   ============================================================ */
#chatMainContent {
  background:
    radial-gradient(
      520px 260px at 50% 0%,
      rgba(34, 197, 94, 0.06),
      transparent 70%
    ),
    linear-gradient(180deg, #fbfefc 0%, #f3faf5 100%);
}
#chatMainContent > p {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0 !important;
  min-height: 60vh;
  color: var(--text-sub) !important;
  font-size: 1.02rem;
  font-weight: 600;
  text-align: center;
  padding: 24px;
}
#chatMainContent > p::before {
  content: "\f086"; /* fa-comments */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  border-radius: 26px;
  font-size: 34px;
  color: var(--chat-primary);
  background: var(--chat-accent);
  box-shadow: 0 16px 30px -16px rgba(22, 163, 74, 0.45);
}
#chatMainContent > p::after {
  content: "از فهرست روبه‌رو یک کانال یا گفتگو انتخاب کنید";
  font-size: 0.85rem;
  font-weight: 500;
  color: #94a3b8;
}

/* ============================================================
   13) RESPONSIVE AUDIT — small screens through desktop
   ============================================================ */
@media (max-width: 640px) {
  /* chat modal goes full-bleed; sidebar rail narrows */
  #chatModal {
    padding: 0 !important;
  }
  #chatModal > div {
    max-width: none !important;
    width: 100vw;
    height: 100dvh;
    border-radius: 0;
  }
  #chatModal .w-64 {
    width: 13.5rem;
  }
  #chatMainContent > p {
    min-height: 52vh;
  }

  /* notification center fits the viewport */
  #notificationsDropdown {
    width: min(24rem, calc(100vw - 2rem)) !important;
  }

  /* header action pills wrap gracefully instead of overflowing */
  .user-more .um-item {
    padding: 7px 11px;
    font-size: 0.84rem;
  }
}

@media (max-width: 400px) {
  .user-more .um-item {
    padding: 6px 9px;
    font-size: 0.78rem;
  }
  #userDashboard .dash-tabbar {
    width: min(300px, 88vw);
  }
}

@media (min-width: 901px) and (max-width: 1100px) {
  #userDashboard {
    grid-template-columns: 232px minmax(0, 1fr);
  }
  #dashboardTabs button {
    font-size: 0.86rem;
    padding: 10px 12px !important;
  }
}

/* ============================================================
   14) Motion hygiene for the new pieces
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  #userDashboard .dash-tabbar,
  .dash-sidebar-backdrop,
  #dashboardTabs button {
    transition: none !important;
  }
  #dashboardTabs button.text-gray-600:hover {
    transform: none;
  }
}

/* ============================================================
   LIGHT PREMIUM SYSTEM — v2.4 — 2026-10-09 (sky refinement)
   ------------------------------------------------------------
   Owner brief: bright, elegant, light-first design.
   1) light header + light modal title bars (no heavy blue bands)
   2) LIGHT right sidebar: spacious nav items, group headings,
      separators + ONE shared blue active pill on every dashboard
   3) desktop-only: admin settings sub-tabs promoted INTO the
      sidebar (mobile keeps the compact «تنظیمات» tab)
   4) ADMIN identity = the refined sky-blue (NOT green);
      student stays violet, teacher stays light-blue (login cards);
      sidebar active states are unified blue everywhere
   5) chat stays ONE unified light-green (incl. chat dialogs)
   Layering: appended LAST → wins ties vs older blocks.
   JS contract preserved: tab classes text-gray-600/text-blue-700
   are only REMAPPED visually, never renamed.
   ============================================================ */

/* ---------- 1) Tokens — sky-blue base + role identities ---------- */
:root {
  /* refined light SKY-blue primary (global CTAs).
       #0284c7 (sky-600) keeps ≥4.5:1 contrast under white text;
       #0ea5e9 (sky-500) is reserved for icons/borders/indicators */
  --primary: #0284c7;
  --primary-interactive: #0369a1;
  --primary-deep: #075985;
  --primary-ink: #0c4a6e;
  --primary-bright: #0ea5e9;
  --primary-soft: #f0f9ff;
  --primary-tint: #e0f2fe;
  --page-soft: #f6fbff;
  --border-blue: #d8ecfa;
  --border-soft: #e8eef7;
  --surface-2: #f8fafc;
  --text-main: #1e293b;
  --text-sub: #64748b;
  --focus-blue: #0284c7;

  /* ADMIN — green identity (login role card; the panel's shared active
       pill stays the unified sky-blue per owner brief §6/§10/§11) */
  --admin-primary: #16a34a; /* admin identity: green (login card)     */
  --admin-interactive: #22c55e;
  --admin-deep: #15803d;
  --admin-ink: #166534;
  --admin-soft: #f0fdf4;
  --admin-accent: #dcfce7;
  --admin-border: #bbf7d0;

  /* STUDENT — modern violet identity */
  --student-primary: #7c3aed;
  --student-interactive: #8b5cf6;
  --student-deep: #6d28d9;
  --student-ink: #5b21b6;
  --student-soft: #f5f3ff;
  --student-accent: #ede9fe;
  --student-border: #ddd6fe;

  /* TEACHER — soft light-blue identity */
  --teacher-primary: #0284c7;
  --teacher-interactive: #0ea5e9;
  --teacher-deep: #0369a1;
  --teacher-ink: #075985;
  --teacher-soft: #f0f9ff;
  --teacher-accent: #e0f2fe;
  --teacher-border: #bae6fd;

  /* CHAT — one unified green system (unchanged family) */
  --chat-primary: #16a34a;
  --chat-interactive: #22c55e;
  --chat-deep: #15803d;
  --chat-surface: #f0fdf4;
  --chat-accent: #dcfce7;
  --chat-border: #bbf7d0;
}

/* ---------- 2) Page background — airy, near-white ---------- */
body {
  background:
    radial-gradient(
      1000px 440px at 100% -150px,
      rgba(14, 165, 233, 0.055),
      transparent 60%
    ),
    radial-gradient(
      820px 400px at 0% -130px,
      rgba(16, 185, 129, 0.035),
      transparent 55%
    ),
    linear-gradient(180deg, #fbfdff 0%, #f2f7fd 100%);
  background-attachment: fixed;
  color: var(--text-main);
}

/* ---------- 3) Site header — bright white identity bar ---------- */
header.gradient-bg {
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%) !important;
  color: var(--text-main) !important;
  border-bottom: 1px solid var(--border-soft);
  box-shadow: 0 10px 30px -24px rgba(15, 23, 42, 0.25);
  overflow: hidden;
}
header.gradient-bg::after {
  content: none;
}
header.gradient-bg .fa-graduation-cap {
  background: var(--primary-soft);
  border: 1px solid var(--border-blue);
  color: var(--primary) !important;
  box-shadow: none;
}
header.gradient-bg h1 {
  color: var(--text-main);
  letter-spacing: 0.2px;
}
#currentDate {
  background: var(--primary-soft);
  border: 1px solid var(--border-blue);
  color: var(--primary-ink);
  font-weight: 700;
}
/* login button in a light header → refined solid blue */
header.gradient-bg .bg-white {
  background: var(--primary) !important;
  color: #ffffff !important;
  font-weight: 700;
  box-shadow: 0 10px 22px -12px rgba(2, 132, 199, 0.7);
}
header.gradient-bg .bg-white:hover {
  background: var(--primary-deep) !important;
  color: #ffffff !important;
}

/* ---------- 4) Modal title bars — light, quiet ---------- */
.sticky-top-modal,
div.fixed > div > .gradient-bg {
  background: #ffffff !important;
  color: var(--text-main) !important;
  border-bottom: 1px solid var(--border-soft);
}
.sticky-top-modal h3,
div.fixed > div > .gradient-bg h3 {
  color: var(--text-main) !important;
}
.sticky-top-modal p,
div.fixed > div > .gradient-bg p {
  color: var(--text-sub) !important;
}
.sticky-top-modal .modal-close-x {
  background: var(--surface-2);
  color: #475569;
  border: 1px solid var(--border-soft);
}
.sticky-top-modal .modal-close-x:hover {
  background: #eef2f7;
  color: var(--text-main);
}
.sticky-top-modal button.text-white,
div.fixed > div > .gradient-bg button.text-white {
  color: var(--text-sub) !important;
}
.sticky-top-modal button.text-white:hover,
div.fixed > div > .gradient-bg button.text-white:hover {
  color: var(--text-main) !important;
}
/* exception — council thread header: LIGHT bar with green accents
   (same language as every other modal title bar; green identity
   comes from the title color + border, not a saturated band) */
#councilThreadOverlay > div > .gradient-bg {
  background: #ffffff !important;
  color: var(--text-main) !important;
  border-bottom: 1px solid var(--chat-border);
}
#councilThreadOverlay > div > .gradient-bg h3 {
  color: var(--chat-deep) !important;
}
#councilThreadOverlay > div > .gradient-bg button.text-white,
#councilThreadOverlay > div > .gradient-bg button {
  color: var(--text-sub) !important;
}
#councilThreadOverlay > div > .gradient-bg button.text-white:hover,
#councilThreadOverlay > div > .gradient-bg button:hover {
  color: var(--text-main) !important;
}

/* ---------- 5) Buttons — lighter, refined ---------- */
button.bg-blue-600,
.bg-blue-600 {
  background-color: var(--primary);
}
button.bg-blue-600:hover,
.bg-blue-600:hover {
  background-color: var(--primary-interactive);
}
button.bg-blue-700,
.bg-blue-700 {
  background-color: var(--primary-deep);
}
button:focus-visible,
a:focus-visible,
select:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--focus-blue);
  outline-offset: 2px;
}

/* ---------- 6) Hero — let the photo breathe ---------- */
.school-hero {
  box-shadow: 0 22px 50px -22px rgba(7, 89, 133, 0.35);
}
.school-hero__overlay {
  background:
        /* پردهٔ آبی ملایم بالای کادر برای خوانایی تیتر سفید روی آسمان روشنِ عکس واقعی */
    linear-gradient(
      180deg,
      rgba(7, 89, 133, 0.68) 0%,
      rgba(7, 89, 133, 0.3) 32%,
      rgba(7, 89, 133, 0) 58%
    ),
    linear-gradient(
      275deg,
      rgba(2, 132, 199, 0.04) 0%,
      rgba(3, 105, 161, 0.18) 55%,
      rgba(7, 89, 133, 0.5) 100%
    ),
    linear-gradient(0deg, rgba(7, 89, 133, 0.28) 0%, rgba(7, 89, 133, 0) 45%);
}

/* ============================================================
   7) LIGHT RIGHT SIDEBAR — spacious, grouped, unified blue active
   ============================================================ */
#userDashboard[class*="role-"] .dash-tabbar,
#userDashboard .dash-tabbar {
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
  border-bottom: none !important;
  border-inline-end: 1px solid var(--border-soft);
  box-shadow: -20px 0 44px -32px rgba(15, 23, 42, 0.25);
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}
#userDashboard .dash-tabbar::-webkit-scrollbar {
  width: 6px;
}
#userDashboard .dash-tabbar::-webkit-scrollbar-thumb {
  background: #d3dce8;
  border-radius: 99px;
}

/* container: generous rhythm (beats legacy role-admin flex rules) */
#userDashboard[class*="role-"] #dashboardTabs,
#userDashboard #dashboardTabs {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  flex-wrap: nowrap;
  overflow: visible;
  gap: 6px;
  padding: 2px 0 6px;
}
#userDashboard #dashboardTabs::before {
  content: "منوی پنل";
  color: #94a3b8;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 10px 16px 8px;
}

/* nav items — taller, breathable (later block beats legacy paddings) */
#userDashboard[class*="role-"] #dashboardTabs button,
#userDashboard #dashboardTabs button {
  display: flex;
  align-items: center;
  width: 100%;
  text-align: start;
  gap: 12px;
  padding: 12px 16px !important;
  margin: 0;
  border-radius: 12px !important;
  border-bottom: 2px solid transparent !important;
  border-bottom-color: transparent !important;
  font-size: 0.93rem;
  line-height: 1.5;
  letter-spacing: 0;
  white-space: nowrap;
  transition:
    background-color 0.16s ease,
    color 0.16s ease,
    box-shadow 0.16s ease;
}
#userDashboard #dashboardTabs button i {
  width: 22px;
  text-align: center;
  font-size: 0.98rem;
  flex-shrink: 0;
}
#userDashboard #dashboardTabs button.text-gray-600 {
  color: #475569 !important;
  background: transparent !important;
  box-shadow: none !important;
}
#userDashboard #dashboardTabs button.text-gray-600:hover {
  color: var(--text-main) !important;
  background: var(--surface-2) !important;
}

/* group heading + separator (retired: the admin sidebar no longer renders
   the «مدیریت محتوا» group heading — the JS insertion was removed at the
   source, so these styles are gone too) */
.dash-nav-sep {
  height: 1px;
  margin: 10px 14px 6px;
  background: var(--border-soft);
  border: 0;
}

/* active pill — ONE shared refined sky-blue on EVERY dashboard
   (unified per owner brief §6: no per-role active styles) */
#userDashboard #dashboardTabs button.text-blue-700,
#userDashboard[class*="role-"] #dashboardTabs button.text-blue-700 {
  color: #ffffff !important;
  font-weight: 700;
  background: linear-gradient(
    135deg,
    var(--primary-bright) 0%,
    var(--primary) 100%
  ) !important;
  box-shadow: 0 10px 20px -12px rgba(2, 132, 199, 0.7) !important;
}
#userDashboard #dashboardTabs button.text-blue-700:hover,
#userDashboard[class*="role-"] #dashboardTabs button.text-blue-700:hover {
  background: linear-gradient(
    135deg,
    var(--primary) 0%,
    var(--primary-deep) 100%
  ) !important;
}

/* ============================================================
   8) ADMIN SETTINGS PROMOTED INTO SIDEBAR (desktop ≥901px)
   ------------------------------------------------------------
   Sub-tabs live in #dashboardTabs as .dash-settings-item
   buttons (data-tab="settings" data-settings-tab="…").
   Desktop: parent «تنظیمات» tab hidden, sub-items shown.
   Mobile ≤900px: sub-items hidden, parent tab shown — the
   responsive behavior is untouched.
   ============================================================ */
#userDashboard #dashboardTabs button.dash-settings-item {
  font-size: 0.87rem !important;
  padding: 10px 14px !important;
  margin-inline-start: 14px;
  width: calc(100% - 14px) !important;
  border-radius: 10px !important;
  position: relative;
}
#userDashboard #dashboardTabs button.dash-settings-item i {
  font-size: 0.88rem;
}
/* settings sub-item active — EXACTLY the same sky-blue gradient pill as the
   main sidebar items (owner brief: lower items like «برنامه هفتگی» and
   «تایید نمره» must share the upper items' active styling) */
#userDashboard #dashboardTabs button.dash-settings-item.is-active,
#userDashboard[class*="role-"]
  #dashboardTabs
  button.dash-settings-item.is-active {
  color: #ffffff !important;
  font-weight: 700;
  background: linear-gradient(
    135deg,
    var(--primary-bright) 0%,
    var(--primary) 100%
  ) !important;
  box-shadow: 0 10px 20px -12px rgba(2, 132, 199, 0.7) !important;
}
#userDashboard #dashboardTabs button.dash-settings-item.is-active:hover,
#userDashboard[class*="role-"]
  #dashboardTabs
  button.dash-settings-item.is-active:hover {
  color: #ffffff !important;
  background: linear-gradient(
    135deg,
    var(--primary) 0%,
    var(--primary-deep) 100%
  ) !important;
  filter: none;
}

@media (min-width: 901px) {
  /* desktop: sub-items visible, parent settings tab retired */
  .dash-settings-wrap {
    display: block;
  }
  #userDashboard[class*="role-"]
    #dashboardTabs
    > button[data-tab="settings"].dash-nav-parent,
  #userDashboard #dashboardTabs > button[data-tab="settings"].dash-nav-parent {
    display: none;
  }
}
@media (max-width: 900px) {
  /* mobile/tablet: exactly the previous behavior */
  .dash-settings-wrap {
    display: none;
  }
}

/* ============================================================
   9) LOGIN ROLE CARDS — blue admin / purple student /
      light-blue teacher (admin mirrors its blue panel identity)
   ============================================================ */
#loginModal .user-type-btn {
  background: #ffffff !important;
  border: 1.5px solid var(--border-soft);
  border-radius: 16px;
  padding: 14px 8px 12px !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  box-shadow: 0 2px 6px -2px rgba(15, 23, 42, 0.06);
  transition:
    border-color 0.18s ease,
    background-color 0.18s ease,
    box-shadow 0.18s ease;
}
#loginModal .user-type-btn p {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-main);
}
#loginModal .user-type-btn .ut-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.22rem;
  transition: transform 0.18s ease;
}
#loginModal .user-type-btn:hover {
  transform: translateY(-2px);
}
#loginModal .user-type-btn:hover .ut-icon {
  transform: scale(1.06);
}

/* student — violet */
#loginModal .user-type-btn.ut-student .ut-icon {
  background: var(--student-accent);
  color: var(--student-primary);
}
#loginModal .user-type-btn.ut-student:hover {
  border-color: var(--student-border);
  background: var(--student-soft) !important;
  box-shadow: 0 10px 22px -14px rgba(124, 58, 237, 0.5);
}
#loginModal .user-type-btn.ut-student.bg-blue-100 {
  background: var(--student-accent) !important;
  border-color: var(--student-primary);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.18);
}
/* teacher — light blue */
#loginModal .user-type-btn.ut-teacher .ut-icon {
  background: var(--teacher-accent);
  color: var(--teacher-primary);
}
#loginModal .user-type-btn.ut-teacher:hover {
  border-color: var(--teacher-border);
  background: var(--teacher-soft) !important;
  box-shadow: 0 10px 22px -14px rgba(2, 132, 199, 0.5);
}
#loginModal .user-type-btn.ut-teacher.bg-blue-100 {
  background: var(--teacher-accent) !important;
  border-color: var(--teacher-primary);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.18);
}
/* admin — green (same design structure as the other role cards;
   the admin's own color identity, matching its green login treatment) */
#loginModal .user-type-btn.ut-admin .ut-icon {
  background: var(--admin-accent);
  color: var(--admin-primary);
}
#loginModal .user-type-btn.ut-admin:hover {
  border-color: var(--admin-border);
  background: var(--admin-soft) !important;
  box-shadow: 0 10px 22px -14px rgba(22, 163, 74, 0.5);
}
#loginModal .user-type-btn.ut-admin.bg-green-100 {
  background: var(--admin-accent) !important;
  border-color: var(--admin-primary);
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18);
}

/* ============================================================
   10) CHAT DIALOGS — same green system outside #chatModal
   ============================================================ */
/* managed form dialogs opened from chat surfaces */
#managedFormModal.managed-form--chat .p-4.border-b {
  background: var(--chat-surface);
  border-bottom: 1px solid var(--chat-border);
}
#managedFormModal.managed-form--chat h3 {
  color: var(--chat-deep);
}
#managedFormModal.managed-form--chat button.bg-blue-600,
#managedFormModal.managed-form--chat .bg-blue-600 {
  background: var(--chat-primary) !important;
  color: #fff !important;
}
#managedFormModal.managed-form--chat button.bg-blue-600:hover {
  background: var(--chat-deep) !important;
}
#managedFormModal.managed-form--chat input:focus,
#managedFormModal.managed-form--chat select:focus,
#managedFormModal.managed-form--chat textarea:focus {
  border-color: var(--chat-interactive) !important;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2) !important;
}
/* prompt/alert dialogs opened from chat */
.custom-modal--chat .custom-modal-header {
  background: var(--chat-surface);
  border-bottom: 1px solid var(--chat-border);
}
.custom-modal--chat .custom-modal-title {
  color: var(--chat-deep);
}
.custom-modal--chat .custom-modal-btn-primary {
  background: var(--chat-primary) !important;
}
.custom-modal--chat .custom-modal-btn-primary:hover {
  background: var(--chat-deep) !important;
}
.custom-modal--chat input:focus {
  border-color: var(--chat-interactive) !important;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2) !important;
}

/* ============================================================
   11) RESPONSIVE — drawer keeps the light language
   ============================================================ */
@media (max-width: 900px) {
  #userDashboard .dash-tabbar {
    background: #ffffff !important;
    box-shadow: -22px 0 48px -20px rgba(15, 23, 42, 0.35);
  }
  #userDashboard #dashboardTabs button {
    padding: 12px 15px !important;
  }
}
@media (max-width: 400px) {
  #userDashboard #dashboardTabs button {
    padding: 11px 13px !important;
    font-size: 0.9rem;
  }
}
@media (min-width: 901px) and (max-width: 1100px) {
  #userDashboard[class*="role-"] #dashboardTabs,
  #userDashboard #dashboardTabs {
    gap: 5px;
  }
  #userDashboard[class*="role-"] #dashboardTabs button,
  #userDashboard #dashboardTabs button {
    font-size: 0.88rem;
    padding: 10px 14px !important;
  }
  .dash-settings-item {
    font-size: 0.84rem !important;
  }
}

/* ---------- 12) Motion hygiene ---------- */
@media (prefers-reduced-motion: reduce) {
  #loginModal .user-type-btn,
  #loginModal .user-type-btn .ut-icon {
    transition: none !important;
  }
  #loginModal .user-type-btn:hover,
  #loginModal .user-type-btn:hover .ut-icon {
    transform: none;
  }
}

/* ============================================================
   SKY ALIGNMENT & SETTINGS STATE — v2.4 — 2026-10-09
   ------------------------------------------------------------
   Owner brief fixes (root-cause, no visual hacks):
   A) Sidebar alignment: the sticky sidebar had ZERO travel room
      on short sections (grid row height == sidebar height), so
      it scrolled away with the page and left a white void on the
      right. Fix: the COLUMN stretches to the full dashboard
      height (no void, straight edge at every scroll position)
      and the INNER NAV becomes the sticky element with its own
      capped scroll. Desktop ≥901px only — the ≤900px drawer is
      untouched.
   B) Settings display behavior: when a settings subsection is
      opened from the desktop sidebar, the redundant internal
      tabbar strip (the "general Settings overview") is hidden
      via a JS navigation-state class — never by a media query.
      The overview returns automatically whenever Settings is
      opened as a whole (parent tab on mobile, direct hash).
   C) Club management topbar: saturated blue gradient band →
      white surface + sky accents (reduces oversized blue).
   D) Club subnav active + hover → the shared sky-blue tokens.
   ============================================================ */

/* ---------- A) Right sidebar: full-height column + sticky nav ---------- */
@media (min-width: 901px) {
  #userDashboard:not(.hidden) {
    min-height: 100vh;
    grid-template-rows: auto minmax(0, 1fr);
    align-items: stretch; /* the column box spans the whole row */
  }
  /* the grid ITEM is no longer the sticky box — it stretches.
       overflow MUST stay visible here: any overflow≠visible would turn
       the column into a scroll container and trap the sticky nav */
  #userDashboard .dash-tabbar {
    position: static;
    height: auto;
    top: auto;
    overflow: visible;
  }
  /* inner container chain must carry the full column height */
  #userDashboard .dash-tabbar .container {
    height: 100%;
  }
  /* the NAV sticks and scrolls internally when longer than the viewport */
  #userDashboard .dash-tabs-wrap {
    position: sticky;
    top: 0;
    max-height: 100vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
  }
  #userDashboard .dash-tabs-wrap::-webkit-scrollbar {
    width: 6px;
  }
  #userDashboard .dash-tabs-wrap::-webkit-scrollbar-thumb {
    background: #d3dce8;
    border-radius: 99px;
  }
}

/* compact rail 901–1100px — restores the designed narrower column
   (the old rule lost the specificity race against :not(.hidden)) */
@media (min-width: 901px) and (max-width: 1100px) {
  #userDashboard:not(.hidden) {
    grid-template-columns: 232px minmax(0, 1fr);
  }
}

/* ---------- B) Settings subsection mode (state-driven) ---------- */
/* JS adds .settings--subsection on the settings root ONLY when the
   section was opened as a specific subsection from the desktop
   sidebar. No media query is involved: on mobile the overview
   strip always stays because that state is never set there. */
.settings-root.settings--subsection > .settings-tabbar {
  display: none;
}

/* ---------- C) Club management topbar — white, quiet ---------- */
.club-panel-container .club-panel-topbar {
  background: #ffffff !important;
  color: var(--text-main);
  border-bottom: 1px solid var(--border-soft);
}
.club-panel-container .club-panel-topbar .club-logo {
  background: var(--primary-soft);
  color: var(--primary);
  border: 1px solid var(--border-blue);
  box-shadow: none;
}
.club-panel-container .club-panel-topbar .club-name {
  color: var(--text-main);
}
.club-panel-container .club-panel-topbar .club-role {
  color: var(--text-sub);
}
.club-panel-container .club-panel-topbar .club-selector-wrap {
  background: var(--primary-soft);
  border: 1px solid var(--border-blue);
}
.club-panel-container .club-panel-topbar .club-selector-label {
  color: var(--primary-ink);
  opacity: 1;
}

/* ---------- D) Club subnav — shared sky-blue active language ---------- */
.club-panel-container .club-subnav-item:hover {
  background: var(--primary-soft);
  color: var(--primary);
}
.club-panel-container .club-subnav-item.active {
  background: var(--primary);
  color: #ffffff;
}

/* ---------- motion hygiene for the sticky nav ---------- */
@media (prefers-reduced-motion: reduce) {
  #userDashboard .dash-tabs-wrap {
    scroll-behavior: auto;
  }
}

/* ============================================================
   v2.5 — UNIFIED BLUE SYSTEM (reference: sidebar active pill)
   ------------------------------------------------------------
   Reference treatment (single source of truth):
     gradient  linear-gradient(135deg, --primary-bright, --primary)
     hover     linear-gradient(135deg, --primary, --primary-deep)
     solid     --primary (#0284c7) · interactive --primary-interactive
     surfaces  --primary-soft (#f0f9ff) / --primary-tint (#e0f2fe)
     border    --border-blue (#d8ecfa) · ink --primary-ink (#0c4a6e)
   Everything that is currently BLUE derives from this family.
   Deliberately non-blue identities (student violet, chat green,
   admin login green, red/orange/amber/teal status colors) are
   NOT touched by this layer.
   ============================================================ */

/* ---------- 1) navigation group headings ----------
   ADMIN sidebar: both group headings («منوی پنل» + «مدیریت محتوا») are
   removed at EVERY breakpoint — desktop, tablet and the ≤900px mobile
   drawer (owner request). Other panels keep the mobile-drawer heading;
   desktop removal below is the pre-existing behavior left untouched. */
#userDashboard.role-admin #dashboardTabs::before {
  content: none !important;
}
@media (min-width: 901px) {
  #userDashboard #dashboardTabs::before {
    content: none !important;
  }
}

/* ---------- 2) student file-export icon — violet identity ---------- */
.student-export-btn.student-export-btn {
  color: var(--student-primary) !important;
}
.student-export-btn.student-export-btn:hover {
  color: var(--student-interactive) !important;
}
.student-export-btn.student-export-btn i {
  color: inherit !important;
}

/* ---------- 3) «خروجی حسابداری» menu ---------- */
#accExportArea .acc-export-menu {
  z-index: 30;
}
#accExportArea .acc-export-pop {
  position: absolute;
  bottom: calc(100% + 10px);
  right: 50%;
  transform: translateX(50%);
  min-width: 260px;
  background: #ffffff;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  box-shadow: 0 24px 60px -18px rgba(15, 23, 42, 0.35);
  padding: 8px;
  z-index: 40;
}
#accExportArea .acc-export-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: start;
  padding: 11px 12px;
  border: none;
  border-radius: 11px;
  background: transparent;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--text-main);
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}
#accExportArea .acc-export-item:hover,
#accExportArea .acc-export-item:focus-visible {
  background: var(--primary-soft);
  color: var(--primary-ink);
  outline: none;
}
#accExportArea .acc-export-item--sub {
  font-size: 0.86rem;
  font-weight: 600;
}
#accExportArea .acc-export-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  flex-shrink: 0;
}
#accExportArea .acc-export-icon--pdf {
  background: #fef2f2;
  color: #dc2626;
}
#accExportArea .acc-export-icon--csv {
  background: var(--primary-tint);
  color: var(--primary);
}
#accExportArea .acc-export-icon--print {
  background: #f1f5f9;
  color: #475569;
}
#accExportArea .acc-export-hint {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-sub);
  white-space: nowrap;
}
#accExportArea .acc-export-sep {
  height: 1px;
  margin: 6px 10px;
  background: var(--border-soft);
}
@media (max-width: 640px) {
  #accExportArea .acc-export-pop {
    min-width: 230px;
  }
  #accExportArea .acc-export-hint {
    display: none;
  }
}

/* ---------- 4) unified blue — Tailwind utility remapping ----------
   These override the CDN palette so every blue control, text, border,
   surface and gradient derives from the sidebar reference tokens.
   Green / violet / red / orange / amber / teal / rose / lime families
   are intentionally NOT remapped. */
.bg-blue-500 {
  background-color: var(--primary-interactive) !important;
}
.bg-blue-600 {
  background-color: var(--primary) !important;
}
.bg-blue-700 {
  background-color: var(--primary-deep) !important;
}
.bg-blue-800 {
  background-color: var(--primary-deep) !important;
}
.bg-blue-50 {
  background-color: var(--primary-soft) !important;
}
.bg-blue-100 {
  background-color: var(--primary-tint) !important;
}
.bg-blue-200 {
  background-color: #bae6fd !important;
}
.hover\:bg-blue-50:hover {
  background-color: var(--primary-soft) !important;
}
.hover\:bg-blue-100:hover {
  background-color: var(--primary-tint) !important;
}
.hover\:bg-blue-600:hover {
  background-color: var(--primary-interactive) !important;
}
.hover\:bg-blue-700:hover {
  background-color: var(--primary-deep) !important;
}
.hover\:bg-blue-800:hover {
  background-color: var(--primary-deep) !important;
}

.text-blue-400 {
  color: var(--primary-bright) !important;
}
.text-blue-500 {
  color: var(--primary) !important;
}
.text-blue-600 {
  color: var(--primary) !important;
}
.text-blue-700 {
  color: var(--primary) !important;
}
.text-blue-800 {
  color: var(--primary-ink) !important;
}
.text-blue-900 {
  color: var(--primary-ink) !important;
}
.hover\:text-blue-600:hover {
  color: var(--primary-interactive) !important;
}
.hover\:text-blue-700:hover {
  color: var(--primary-deep) !important;
}
.hover\:text-blue-800:hover {
  color: var(--primary-deep) !important;
}
.hover\:text-blue-900:hover {
  color: var(--primary-ink) !important;
}

.border-blue-200 {
  border-color: var(--border-blue) !important;
}
.border-blue-300 {
  border-color: #bae6fd !important;
}
.border-blue-400 {
  border-color: var(--primary-bright) !important;
}
.border-blue-500 {
  border-color: var(--primary) !important;
}
.border-blue-600 {
  border-color: var(--primary) !important;
}
.border-blue-700 {
  border-color: var(--primary-deep) !important;
}
.hover\:border-blue-300:hover {
  border-color: #7dd3fc !important;
}
.hover\:border-blue-400:hover {
  border-color: var(--primary-bright) !important;
}
.hover\:border-blue-500:hover {
  border-color: var(--primary) !important;
}
.hover\:border-blue-700:hover {
  border-color: var(--primary-deep) !important;
}

.ring-blue-300:focus,
.focus\:ring-blue-300:focus,
.ring-blue-500:focus,
.focus\:ring-blue-500:focus,
.focus\:ring-blue-400:focus {
  --tw-ring-color: rgba(14, 165, 233, 0.35) !important;
  border-color: var(--primary-bright) !important;
}
.focus\:border-blue-400:focus,
.focus\:border-blue-500:focus {
  border-color: var(--primary-bright) !important;
}
.text-sky-600,
.text-sky-700 {
  color: var(--primary) !important;
}
.text-sky-800 {
  color: var(--primary-ink) !important;
}
.bg-sky-50 {
  background-color: var(--primary-soft) !important;
}
.bg-sky-100 {
  background-color: var(--primary-tint) !important;
}
.bg-sky-500 {
  background-color: var(--primary-bright) !important;
}
.bg-sky-600 {
  background-color: var(--primary) !important;
}
.bg-sky-700 {
  background-color: var(--primary-deep) !important;
}
.hover\:bg-sky-600:hover {
  background-color: var(--primary-interactive) !important;
}
.hover\:bg-sky-700:hover {
  background-color: var(--primary-deep) !important;
}
.hover\:bg-sky-50:hover {
  background-color: var(--primary-soft) !important;
}

/* gradient stops — every blue/sky gradient becomes the reference pair */
.from-blue-400,
.from-blue-500,
.from-blue-600,
.from-blue-700,
.from-sky-400,
.from-sky-500,
.from-sky-600 {
  --tw-gradient-from: var(--primary-bright) var(--tw-gradient-from-position) !important;
}
.to-blue-500,
.to-blue-600,
.to-blue-700,
.to-sky-500,
.to-sky-600,
.to-sky-700 {
  --tw-gradient-to: var(--primary) var(--tw-gradient-to-position) !important;
}
.from-blue-900,
.via-blue-500,
.via-blue-600 {
  --tw-gradient-via: var(--primary) var(--tw-gradient-via-position) !important;
}

/* ============================================================================
   سخن بزرگان ادب پارسی (چرخهٔ ادبی) + ساعت تهران + امروز در تاریخ
   ماژول: literary-clock.js | داده: public/data/*
   ============================================================================ */

/* ---------------- بنر سخن بزرگان ---------------- */
.lit-banner {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: linear-gradient(
    150deg,
    var(--lit-accent-soft, #eef5fb) 0%,
    #ffffff 62%
  );
  border: 1px solid rgba(47, 146, 216, 0.14);
  box-shadow: 0 12px 34px -20px rgba(15, 23, 42, 0.28);
  padding: 18px 22px 14px;
  margin-top: 1.75rem;
}
.lit-banner::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 6px;
  background: var(--lit-accent, #2f92d8);
  opacity: 0.9;
  transition: background-color 0.8s ease;
}
.lit-banner__mark {
  position: absolute;
  top: -34px;
  left: 10px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 150px;
  line-height: 1;
  color: var(--lit-accent, #2f92d8);
  opacity: 0.1;
  pointer-events: none;
  user-select: none;
  transition: color 0.8s ease;
}
.lit-banner__head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.lit-banner__kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--lit-accent, #2f92d8);
  transition: color 0.8s ease;
}
.lit-banner__controls {
  display: flex;
  gap: 8px;
}
.lit-btn {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(47, 146, 216, 0.2);
  background: #ffffff;
  color: var(--lit-accent, #2f92d8);
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 0.82rem;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.8s ease;
}
.lit-btn:hover {
  background: var(--lit-accent, #2f92d8);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 16px -8px rgba(15, 23, 42, 0.4);
}
.lit-btn:focus-visible {
  outline: 2px solid var(--lit-accent, #2f92d8);
  outline-offset: 2px;
}
.lit-banner__body {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 20px;
  align-items: stretch;
}
.lit-portrait {
  flex: 0 0 148px;
  height: 190px;
  border-radius: 16px;
  overflow: hidden;
  border: 3px solid var(--lit-accent, #2f92d8);
  background: #fff;
  box-shadow: 0 14px 28px -16px rgba(15, 23, 42, 0.45);
  transition: border-color 0.8s ease;
}
.lit-portrait__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.45s ease;
}
.lit-quote {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.lit-quote__stage {
  position: relative;
  height: 152px;
}
.lit-quote__layer {
  position: absolute;
  inset: 0;
}
.lit-quote__layer--in {
  opacity: 0;
  transform: translateY(16px);
}
.lit-quote__layer--active {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.5s ease,
    transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.lit-quote__text {
  height: 100%;
  overflow-y: auto;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.85;
  color: #1f2937;
  padding-left: 10px;
}
.lit-quote__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.lit-quote__name {
  background: var(--lit-accent-soft, #eaf4fc);
  color: var(--lit-accent, #2f92d8);
  font-weight: 800;
  font-size: 0.98rem;
  padding: 6px 16px;
  border-radius: 999px;
  transition:
    background-color 0.8s ease,
    color 0.8s ease;
}
.lit-quote__era {
  color: #64748b;
  font-size: 0.85rem;
}
.lit-banner__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed rgba(47, 146, 216, 0.22);
}
.lit-quote__src {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #64748b;
  font-size: 0.85rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lit-quote__src i {
  color: var(--lit-accent, #2f92d8);
  transition: color 0.8s ease;
}
.lit-banner__navinfo {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.lit-counter {
  font-size: 0.8rem;
  font-weight: 700;
  color: #94a3b8;
}
.lit-progress {
  display: inline-block;
  width: 110px;
  height: 5px;
  border-radius: 999px;
  background: rgba(47, 146, 216, 0.16);
  overflow: hidden;
}
.lit-progress__fill {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: var(--lit-accent, #2f92d8);
  transform: scaleX(0);
  transform-origin: right center;
}
.lit-paused .lit-progress__fill {
  animation-play-state: paused !important;
}
@keyframes litProgress {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

/* ---------------- شبکهٔ ساعت و تقویم ---------------- */
.lc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 1.5rem;
  align-items: stretch;
}
.lc-card {
  background: #ffffff;
  border-radius: 18px;
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 12px 34px -22px rgba(15, 23, 42, 0.25);
  padding: 20px;
  display: flex;
  flex-direction: column;
  min-height: 480px;
}
.lc-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.lc-card__title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #0f172a;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.lc-card__title i {
  color: #2f92d8;
}
.lc-card__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #2f92d8;
  background: #eaf4fc;
  padding: 5px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.lc-chip--ghost {
  background: #f1f5f9;
  color: #475569;
}

/* ساعت آنالوگ */
.lc-clock__wrap {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 6px 0;
}
.lc-clock {
  width: min(252px, 60vw);
  height: auto;
  filter: drop-shadow(0 20px 30px rgba(47, 146, 216, 0.16));
}
.lc-clock__digital {
  text-align: center;
  margin-top: 12px;
}
.lc-clock__time {
  display: inline-block;
  font-size: 1.3rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: 1px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 6px 20px;
  font-variant-numeric: tabular-nums;
}

/* کارت تاریخ و رویدادها */
.lc-date__main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 0 14px;
  border-bottom: 1px dashed #e2e8f0;
}
.lc-date__weekday {
  color: #2f92d8;
  font-weight: 800;
  font-size: 0.92rem;
  background: #eaf4fc;
  padding: 4px 14px;
  border-radius: 999px;
}
.lc-date__big {
  font-size: 2rem;
  font-weight: 900;
  color: #0f172a;
  line-height: 1.3;
}
.lc-date__year {
  font-size: 1.02rem;
  font-weight: 700;
  color: #64748b;
}
.lc-events__bar {
  display: flex;
  align-items: center;
  margin: 10px 0 8px;
}
.lc-events__count {
  font-size: 0.82rem;
  font-weight: 700;
  color: #475569;
}
.lc-events {
  list-style: none;
  margin: 0;
  padding: 2px 4px 2px 8px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}
.lc-events:focus-visible {
  outline: 2px solid #2f92d8;
  outline-offset: 2px;
  border-radius: 8px;
}
.lc-events::-webkit-scrollbar {
  width: 6px;
}
.lc-events::-webkit-scrollbar-track {
  background: transparent;
}
.lc-events::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 999px;
}
.lc-event {
  border-right: 3px solid var(--ev-color, #2f92d8);
  background: #f8fafc;
  border-radius: 10px;
  padding: 10px 12px;
  flex-shrink: 0;
}
.lc-event__top {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.lc-event__year {
  font-size: 0.72rem;
  font-weight: 800;
  color: #fff;
  background: var(--ev-color, #2f92d8);
  padding: 2px 9px;
  border-radius: 999px;
}
.lc-event__cat {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ev-color, #2f92d8);
  border: 1px solid currentColor;
  padding: 1px 9px;
  border-radius: 999px;
  opacity: 0.9;
}
.lc-event__title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
  line-height: 1.7;
}
.lc-event__desc {
  font-size: 0.8rem;
  color: #64748b;
  margin: 4px 0 0;
  line-height: 1.7;
}
.lc-event__foot {
  margin-top: 6px;
}
.lc-event__src {
  font-size: 0.74rem;
  color: #2f92d8;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lc-event__src:hover {
  text-decoration: underline;
}
.lc-event__src--plain {
  color: #94a3b8;
  cursor: help;
}
.lc-events__empty {
  color: #64748b;
  font-size: 0.9rem;
  text-align: center;
  padding: 16px 0;
  margin: 0;
}

/* ---------------- واکنش‌گرایی ---------------- */
@media (max-width: 767px) {
  .lit-banner {
    padding: 14px 16px 12px;
  }
  .lit-banner__body {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .lit-portrait {
    flex: 0 0 auto;
    width: 104px;
    height: 132px;
    margin-inline-start: 2px;
  }
  .lit-quote__stage {
    height: 128px;
  }
  .lit-quote__text {
    font-size: 1.06rem;
    line-height: 1.75;
  }
  .lit-quote__meta {
    margin-top: 8px;
  }
  .lit-banner__foot {
    flex-wrap: wrap;
  }
  .lit-quote__src {
    white-space: normal;
  }
  .lit-progress {
    width: 74px;
  }
  .lit-banner__mark {
    font-size: 110px;
    top: -26px;
  }

  .lc-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .lc-card {
    min-height: 0;
    padding: 16px;
  }
  .lc-events {
    max-height: 260px;
  }
  .lc-clock {
    width: min(216px, 66vw);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lit-quote__layer,
  .lit-portrait__img,
  .lit-btn {
    transition: none !important;
  }
  .lit-quote__layer--in {
    opacity: 1 !important;
    transform: none !important;
  }
  .lit-progress__fill {
    animation: none !important;
    transform: scaleX(1) !important;
  }
  .lit-btn:hover {
    transform: none;
  }
}

/* ============================================================
   «درباره ما» — درخشش جادویی آبی روی پاراگراف فوتر
   فقط با فعال‌سازی آیتم «درباره ما» صفحهٔ اصلی فعال می‌شود (کلاس
   about-glow از طریق JS) و پس از پایان انیمیشن، پاراگراف دقیقاً به
   ظاهر عادی خود برمی‌گردد (هیچ تغییری دائمی در فوتر ایجاد نمی‌کند).
   - padding + margin منفی همدیگر را خنثی می‌کنند ⇒ بدون جابه‌جایی چیدمان.
   - شیشهٔ آبی + هالهٔ نوری روی لایهٔ ::before (پشت متن)، جاروی نور
     روی ::after با background-position (بدون نیاز به overflow:hidden
     تا هالهٔ بیرونی بریده نشود).
   - کنتراست متن در طول افکت بالا می‌ماند (سرمه‌ای تیره روی شیشهٔ روشن).
   ============================================================ */

#footerAbout.about-glow {
  position: relative;
  isolation: isolate; /* لایهٔ شیشه پشت متن بماند، نه پشت پس‌زمینهٔ فوتر */
  border-radius: 14px;
  padding: 14px 18px;
  margin: -14px -18px;
  animation: aboutGlowText 4.4s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* شیشهٔ آبی درخشان + حلقهٔ نوری و هالهٔ بیرونی (پشت متن) */
#footerAbout.about-glow::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 14px;
  background:
    radial-gradient(
      120% 160% at 85% 0%,
      rgba(125, 211, 252, 0.32),
      rgba(125, 211, 252, 0) 55%
    ),
    linear-gradient(
      120deg,
      rgba(125, 211, 252, 0.22) 0%,
      rgba(59, 130, 246, 0.26) 48%,
      rgba(37, 99, 235, 0.3) 100%
    );
  box-shadow:
    0 0 0 1.5px rgba(147, 197, 253, 0.65),
    0 0 20px rgba(56, 189, 248, 0.42),
    0 0 44px rgba(59, 130, 246, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 0 18px rgba(191, 219, 254, 0.22);
  animation: aboutGlowGlass 4.4s cubic-bezier(0.4, 0, 0.2, 1) both;
  pointer-events: none;
}

/* جاروی نور شیشه‌ای — یک‌بار، ظریف، داخل کادر (background-position خودش کلیپ می‌شود) */
#footerAbout.about-glow::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 14px;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255, 255, 255, 0.42) 50%,
    transparent 60%
  );
  background-size: 280% 100%;
  background-repeat: no-repeat;
  background-position: 110% 0;
  animation: aboutGlowSheen 1.6s cubic-bezier(0.4, 0, 0.2, 1) 0.35s both;
  pointer-events: none;
}

@keyframes aboutGlowText {
  0% {
    color: #64748b;
  }
  10% {
    color: #16337a;
  }
  64% {
    color: #16337a;
  }
  100% {
    color: #64748b;
  }
}

@keyframes aboutGlowGlass {
  0% {
    opacity: 0;
  }
  9% {
    opacity: 1;
  }
  66% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes aboutGlowSheen {
  0% {
    background-position: 110% 0;
  }
  100% {
    background-position: -110% 0;
  }
}

/* کاهش حرکت: هایلایت ثابت و بدون انیمیشن؛ پاک‌سازی آنی توسط JS */
@media (prefers-reduced-motion: reduce) {
  #footerAbout.about-glow,
  #footerAbout.about-glow::before,
  #footerAbout.about-glow::after {
    animation: none !important;
  }
  #footerAbout.about-glow {
    color: #16337a;
  }
  #footerAbout.about-glow::before {
    opacity: 1;
  }
  #footerAbout.about-glow::after {
    content: none;
  }
}