/* UI Kit - کیت رابط کاربری مدرن */
/* بر اساس الگوی newtheme با استفاده از Tailwind CSS */

/* Button Components - کامپوننت‌های دکمه */
.btn {
  @apply inline-flex items-center justify-center px-4 py-2 text-sm font-medium rounded-lg transition-all duration-300 cursor-pointer border-0 outline-none focus:ring-2 focus:ring-offset-2;
  font-family: var(--theme-font-family);
  text-decoration: none;
  user-select: none;
  position: relative;
  overflow: hidden;
}

.btn:disabled {
  @apply opacity-50 cursor-not-allowed;
}

/* Primary Button */
.btn-primary {
  background: var(--theme-primary);
  color: var(--theme-text-inverse);
}

.btn-primary:hover:not(:disabled) {
  background: var(--theme-primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(28, 57, 187, 0.3);
}

.btn-primary:focus {
  @apply ring-blue-500;
}

/* Secondary Button */
.btn-secondary {
  background: var(--theme-secondary);
  color: var(--theme-text-inverse);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--theme-secondary-dark);
  transform: translateY(-2px);
}

.btn-secondary:focus {
  @apply ring-gray-500;
}

/* Accent Button */
.btn-accent {
  background: var(--theme-accent);
  color: var(--theme-text-inverse);
}

.btn-accent:hover:not(:disabled) {
  background: var(--theme-accent-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(245, 158, 11, 0.3);
}

.btn-accent:focus {
  @apply ring-yellow-500;
}

/* Outline Button */
.btn-outline {
  background: transparent;
  color: var(--theme-primary);
  border: 2px solid var(--theme-primary);
}

.btn-outline:hover:not(:disabled) {
  background: var(--theme-primary);
  color: var(--theme-text-inverse);
  transform: translateY(-2px);
}

.btn-outline:focus {
  @apply ring-blue-500;
}

/* Ghost Button */
.btn-ghost {
  background: transparent;
  color: var(--theme-text-secondary);
}

.btn-ghost:hover:not(:disabled) {
  background: var(--theme-hover);
  color: var(--theme-text);
}

.btn-ghost:focus {
  @apply ring-gray-300;
}

/* Button Sizes */
.btn-xs {
  @apply px-2 py-1 text-xs;
}

.btn-sm {
  @apply px-3 py-1.5 text-sm;
}

.btn-lg {
  @apply px-6 py-3 text-lg;
}

.btn-xl {
  @apply px-8 py-4 text-xl;
}

/* Icon Button */
.btn-icon {
  @apply w-10 h-10 p-0;
  border-radius: var(--theme-radius-full);
}

.btn-icon-sm {
  @apply w-8 h-8 p-0;
  border-radius: var(--theme-radius-full);
}

.btn-icon-lg {
  @apply w-12 h-12 p-0;
  border-radius: var(--theme-radius-full);
}

/* Card Components - کامپوننت‌های کارت */
.card {
  background: var(--theme-surface);
  border: 1px solid var(--theme-border);
  border-radius: var(--theme-radius-lg);
  box-shadow: 0 2px 8px var(--theme-shadow-light);
  transition: var(--theme-transition);
  overflow: hidden;
}

.card-hover {
  cursor: pointer;
}

.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px var(--theme-shadow);
  border-color: var(--theme-primary);
}

.card-header {
  padding: var(--theme-spacing-lg);
  border-bottom: 1px solid var(--theme-border);
  background: var(--theme-bg-secondary);
}

.card-title {
  margin: 0;
  font-size: var(--theme-font-size-lg);
  font-weight: 600;
  color: var(--theme-text);
}

.card-subtitle {
  margin: var(--theme-spacing-sm) 0 0 0;
  color: var(--theme-text-secondary);
  font-size: var(--theme-font-size-sm);
}

.card-body {
  padding: var(--theme-spacing-lg);
}

.card-footer {
  padding: var(--theme-spacing-lg);
  border-top: 1px solid var(--theme-border);
  background: var(--theme-bg-secondary);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Video Card Specific */
.video-card {
  @apply card card-hover;
  max-width: 350px;
}

.video-thumbnail {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
}

.video-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--theme-transition);
}

.video-card:hover .video-thumbnail img {
  transform: scale(1.05);
}

.video-duration {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 2px 6px;
  border-radius: var(--theme-radius-sm);
  font-size: var(--theme-font-size-xs);
  font-weight: 500;
}

.video-info {
  padding: var(--theme-spacing);
}

.video-title {
  font-size: var(--theme-font-size);
  font-weight: 600;
  color: var(--theme-text);
  margin: 0 0 var(--theme-spacing-sm) 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.video-meta {
  display: flex;
  align-items: center;
  gap: var(--theme-spacing);
  color: var(--theme-text-secondary);
  font-size: var(--theme-font-size-sm);
}

.video-views,
.video-date {
  display: flex;
  align-items: center;
  gap: var(--theme-spacing-xs);
}

/* Badge Components - کامپوننت‌های نشان */
.badge {
  @apply inline-flex items-center px-2 py-1 text-xs font-medium rounded-full;
  font-family: var(--theme-font-family);
}

.badge-primary {
  background: var(--theme-primary-light);
  color: var(--theme-primary-dark);
}

.badge-secondary {
  background: var(--theme-secondary-light);
  color: var(--theme-secondary-dark);
}

.badge-accent {
  background: var(--theme-accent-light);
  color: var(--theme-accent-dark);
}

.badge-success {
  background: var(--color-success-100);
  color: var(--color-success-800);
}

.badge-warning {
  background: var(--color-warning-100);
  color: var(--color-warning-800);
}

.badge-error {
  background: var(--color-error-100);
  color: var(--color-error-800);
}

/* Form Components - کامپوننت‌های فرم */
.form-group {
  margin-bottom: var(--theme-spacing-lg);
}

.form-label {
  display: block;
  margin-bottom: var(--theme-spacing-sm);
  font-weight: 500;
  color: var(--theme-text);
  font-size: var(--theme-font-size-sm);
}

.form-input {
  width: 100%;
  padding: var(--theme-spacing) var(--theme-spacing-lg);
  border: 2px solid var(--theme-border);
  border-radius: var(--theme-radius);
  background: var(--theme-bg);
  color: var(--theme-text);
  font-size: var(--theme-font-size);
  font-family: var(--theme-font-family);
  transition: var(--theme-transition);
}

.form-input:focus {
  outline: none;
  border-color: var(--theme-primary);
  box-shadow: 0 0 0 3px var(--theme-focus);
}

.form-input:invalid {
  border-color: var(--theme-error);
}

.form-textarea {
  @apply form-input;
  min-height: 100px;
  resize: vertical;
}

.form-select {
  @apply form-input;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
  background-position: left 12px center;
  background-repeat: no-repeat;
  background-size: 16px 12px;
  padding-left: 40px;
  appearance: none;
}

/* Alert Components - کامپوننت‌های هشدار */
.alert {
  padding: var(--theme-spacing);
  border-radius: var(--theme-radius);
  border: 1px solid;
  display: flex;
  align-items: flex-start;
  gap: var(--theme-spacing);
}

.alert-success {
  background: var(--color-success-50);
  border-color: var(--color-success-200);
  color: var(--color-success-800);
}

.alert-warning {
  background: var(--color-warning-50);
  border-color: var(--color-warning-200);
  color: var(--color-warning-800);
}

.alert-error {
  background: var(--color-error-50);
  border-color: var(--color-error-200);
  color: var(--color-error-800);
}

.alert-info {
  background: var(--color-primary-50);
  border-color: var(--color-primary-200);
  color: var(--color-primary-800);
}

.alert-icon {
  flex-shrink: 0;
  margin-top: 2px;
}

.alert-content {
  flex: 1;
}

.alert-title {
  font-weight: 600;
  margin: 0 0 var(--theme-spacing-xs) 0;
}

.alert-message {
  margin: 0;
  font-size: var(--theme-font-size-sm);
}

/* Modal Components - کامپوننت‌های مودال */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--theme-backdrop);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: var(--theme-transition);
}

.modal-overlay.show {
  opacity: 1;
  visibility: visible;
}

.modal {
  background: var(--theme-surface);
  border-radius: var(--theme-radius-xl);
  box-shadow: 0 20px 60px var(--theme-shadow-dark);
  max-width: 90vw;
  max-height: 90vh;
  overflow: hidden;
  transform: scale(0.9);
  transition: var(--theme-transition);
}

.modal-overlay.show .modal {
  transform: scale(1);
}

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

.modal-title {
  margin: 0;
  font-size: var(--theme-font-size-xl);
  font-weight: 600;
  color: var(--theme-text);
}

.modal-close {
  @apply btn-ghost btn-icon;
}

.modal-body {
  padding: var(--theme-spacing-xl);
  overflow-y: auto;
}

.modal-footer {
  padding: var(--theme-spacing-xl);
  border-top: 1px solid var(--theme-border);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--theme-spacing);
}

/* Loading Components - کامپوننت‌های بارگذاری */
.spinner {
  width: 24px;
  height: 24px;
  border: 2px solid var(--theme-border);
  border-top: 2px solid var(--theme-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.spinner-sm {
  width: 16px;
  height: 16px;
}

.spinner-lg {
  width: 32px;
  height: 32px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

[data-theme="dark"] .loading-overlay {
  background: rgba(0, 0, 0, 0.8);
}

/* Progress Components - کامپوننت‌های پیشرفت */
.progress {
  width: 100%;
  height: 8px;
  background: var(--theme-bg-secondary);
  border-radius: var(--theme-radius-full);
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background: var(--theme-primary);
  border-radius: var(--theme-radius-full);
  transition: width 0.3s ease;
}

.progress-sm {
  height: 4px;
}

.progress-lg {
  height: 12px;
}

/* Tooltip Components - کامپوننت‌های راهنما */
.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip-content {
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-dark-800);
  color: white;
  padding: var(--theme-spacing-sm) var(--theme-spacing);
  border-radius: var(--theme-radius);
  font-size: var(--theme-font-size-sm);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: var(--theme-transition);
  z-index: 1000;
}

.tooltip-content::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--color-dark-800);
}

.tooltip:hover .tooltip-content {
  opacity: 1;
  visibility: visible;
}

/* Utility Classes - کلاس‌های کمکی */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }

.w-full { width: 100%; }
.h-full { height: 100%; }

.mt-auto { margin-top: auto; }
.mb-auto { margin-bottom: auto; }

.hidden { display: none; }
.block { display: block; }
.inline-block { display: inline-block; }

.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }

.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }

.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }

.cursor-pointer { cursor: pointer; }
.cursor-not-allowed { cursor: not-allowed; }

.select-none { user-select: none; }

.transition { transition: var(--theme-transition); }
.transition-fast { transition: var(--theme-transition-fast); }

/* Responsive Utilities */
@media (max-width: 640px) {
  .sm\:hidden { display: none; }
  .sm\:block { display: block; }
  .sm\:flex { display: flex; }
  .sm\:text-center { text-align: center; }
}

@media (max-width: 768px) {
  .md\:hidden { display: none; }
  .md\:block { display: block; }
  .md\:flex { display: flex; }
  .md\:text-center { text-align: center; }
}

@media (max-width: 1024px) {
  .lg\:hidden { display: none; }
  .lg\:block { display: block; }
  .lg\:flex { display: flex; }
  .lg\:text-center { text-align: center; }
}