/* --- iOS Glassy Style --- */

:root {
  /* متغیرهای رنگی برای حالت شیشه‌ای - می‌توانید اینها را تغییر دهید */
  --glass-bg-light: rgba(255, 255, 255, 0.6); /* پس‌زمینه روشن با شفافیت */
  --glass-bg-dark: rgba(30, 30, 30, 0.7);    /* پس‌زمینه تیره با شفافیت */
  --glass-border-light: rgba(200, 200, 200, 0.5);
  --glass-border-dark: rgba(70, 70, 70, 0.5);
  --glass-text-light: #222;
  --glass-text-dark: #eee;
  --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15); /* سایه ظریف */
  --glass-blur: 10px; /* میزان بلور شدن پس‌زمینه */
  --border-radius-main: 1rem; /* گردی گوشه‌ها */
}

/* اعمال استایل پایه به بدنه برای فعال شدن backdrop-filter در المان‌های فرزند */
body {
  /* اگر از تصویر پس‌زمینه استفاده می‌کنید، این عالی است. */
  /* در غیر این صورت، یک پس‌زمینه گرادیانت یا رنگی ساده اضافه کنید */
  /* background: linear-gradient(to bottom right, #f0f4f8, #d9e2ec); */
}

/* استایل کارت‌ها (Cards) */
.card {
  background: var(--glass-bg-dark); /* پیش‌فرض تیره، اگر قالب روشن دارید --glass-bg-light را امتحان کنید */
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur)); /* برای سازگاری با Safari */
  border-radius: var(--border-radius-main);
  border: 1px solid var(--glass-border-dark); /* یا --glass-border-light */
  box-shadow: var(--glass-shadow);
  color: var(--glass-text-dark); /* یا --glass-text-light */
  overflow: hidden; /* برای جلوگیری از بیرون زدن محتوا از گوشه‌های گرد */
}

/* استایل هشدارها (Alerts) */
.alert {
  background: rgba(255, 255, 255, 0.1); /* رنگ پایه ملایم */
  backdrop-filter: blur(5px); /* بلور کمتر برای هشدار */
  -webkit-backdrop-filter: blur(5px);
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: none; /* بدون سایه برای هشدار */
  color: inherit; /* رنگ متن از قالب اصلی بیاید */
  padding: 1rem 1.5rem;
}

/* استایل‌های مختلف هشدار */
.alert-info { background: rgba(59, 130, 246, 0.3); border-color: rgba(59, 130, 246, 0.5); }
.alert-success { background: rgba(16, 185, 129, 0.3); border-color: rgba(16, 185, 129, 0.5); }
.alert-warning { background: rgba(245, 158, 11, 0.3); border-color: rgba(245, 158, 11, 0.5); color: #111; /* برای خوانایی بهتر روی زرد */}
.alert-error { background: rgba(239, 68, 68, 0.3); border-color: rgba(239, 68, 68, 0.5); }


/* استایل دکمه‌ها (Buttons) */
.btn-primary, .btn-secondary, .btn-danger {
  border-radius: 0.75rem;
  padding: 0.75rem 1.5rem;
  font-weight: bold;
  transition: all 0.2s ease-in-out;
  border: 1px solid transparent;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.btn-primary {
  background: rgba(129, 140, 248, 0.7); /* رنگ بنفش-آبی با شفافیت */
  border-color: rgba(129, 140, 248, 0.9);
  color: white;
}
.btn-primary:hover {
  background: rgba(109, 118, 224, 0.9);
  box-shadow: 0 6px 20px rgba(129, 140, 248, 0.3);
  transform: translateY(-2px);
}

.btn-secondary {
  background: rgba(107, 114, 128, 0.5); /* خاکستری با شفافیت */
  border-color: rgba(107, 114, 128, 0.7);
  color: white;
}
.btn-secondary:hover {
  background: rgba(87, 94, 108, 0.7);
   box-shadow: 0 6px 20px rgba(107, 114, 128, 0.2);
   transform: translateY(-2px);
}

.btn-danger {
  background: rgba(239, 68, 68, 0.6); /* قرمز با شفافیت */
  border-color: rgba(239, 68, 68, 0.8);
  color: white;
}
.btn-danger:hover {
  background: rgba(219, 48, 48, 0.8);
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.3);
  transform: translateY(-2px);
}


/* استایل فرم‌ها (Inputs, Textareas, Selects) */
.form-input, .form-textarea, .form-select {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border-dark); /* یا --glass-border-light */
  border-radius: 0.75rem;
  color: var(--glass-text-dark); /* یا --glass-text-light */
  padding: 0.75rem 1rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-input::placeholder, .form-textarea::placeholder {
    color: rgba(238, 238, 238, 0.6); /* رنگ placeholder کمی محوتر */
}
/* Focus state for forms */
.form-input:focus, .form-textarea:focus, .form-select:focus {
  outline: none;
  border-color: rgba(129, 140, 248, 0.8); /* رنگ برجسته هنگام فوکوس */
  box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.3);
}


/* استایل نوار ناوبری (Navbar) */
.navbar {
  background: var(--glass-bg-dark);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-bottom: 1px solid var(--glass-border-dark);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  /* اطمینان از اینکه متن داخل navbar رنگ مناسب دارد */
  color: var(--glass-text-dark);
}
.navbar a {
    color: var(--glass-text-dark); /* یا --glass-text-light */
}
.navbar a:hover {
    color: rgba(199, 210, 254, 1); /* رنگ هاور کمی روشن‌تر */
}
/* منوی کشویی */
#dropdown-menu {
    background: var(--glass-bg-dark);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border-dark);
    border-radius: 0.75rem; /* گرد کردن گوشه منو */
}
#dropdown-menu a {
    color: rgba(238, 238, 238, 0.8);
}
#dropdown-menu a:hover {
    background: rgba(129, 140, 248, 0.3); /* رنگ هاور برای آیتم‌های منو */
    color: white;
}

/* بهبود خوانایی در برخی المان‌ها */
.prose {
    color: var(--glass-text-dark); /* یا --glass-text-light */
}
.prose h1, .prose h2, .prose h3 {
    color: var(--glass-text-dark); /* یا --glass-text-light */
}
.prose a {
    color: #a7b3ff; /* رنگ لینک‌ها را کمی برجسته‌تر کنید */
}
.prose a:hover {
    color: #cad1ff;
}

/* استایل جدول‌ها کمی شفاف‌تر */
table {
    border-collapse: separate;
    border-spacing: 0;
}
table thead th {
    background: rgba(255, 255, 255, 0.1);
}
table tbody tr:hover {
     background: rgba(255, 255, 255, 0.05); /* هاور ملایم‌تر برای سطرها */
}
table td, table th {
    border-bottom: 1px solid var(--glass-border-dark);
}