/* =========================================================
   بخش: متغیرها و import فونت
   توضیح: این بخش متغیرهای اصلی CSS (مانند رنگ‌ها، فونت‌ها و اندازه‌ها) را تعریف می‌کند و فونت Colibri را وارد می‌کند.
   ========================================================= */
@import url('https://fonts.cdnfonts.com/css/colibri');

:root {
  --bg: #f5f7fb;
  --surface: #ffffff;
  --text: #0f172a;
  --muted: #6b7280;
  --primary: #0ea5b7;
  --primary-dark: #0b8f96;
  --danger: #ef4444;
  --cancel: #9ca3af;
  --success: #10b981;
  --border: rgba(0, 0, 0, 0.08);
  --radius: 10px;
  --sidebar-radius: 16px;
  --shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  --sidebar-width: 338px;
  --header-height: 90px;
  --font-sans: 'Colibri', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-size-base: 0.95rem;
  --font-size-title: 1.4rem;
  --font-size-sidebar-title: 1.5rem;
  --font-size-sidebar-subtitle: 1.1rem;
}





/* =========================================================
   بخش: Reset و پایه‌ها
   توضیح: این بخش استایل‌های پیش‌فرض مرورگر را ریست می‌کند و تنظیمات پایه‌ای برای کل سند (مانند فونت، جهت و پس‌زمینه) را اعمال می‌کند.
   ========================================================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body,
#root {
  height: 100%;
  width: 100%;
  direction: rtl;
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}




/* =========================================================
   بخش: کوچکی‌ها / تک‌کلاس‌ها
   توضیح: این بخش شامل کلاس‌های کوچک و مستقل مانند txtdate است که برای استایل‌دهی جزئی استفاده می‌شوند.
   ========================================================= */
.txtdate {
  margin-top:2px;
}




/* =========================================================
   بخش: مودال‌ها / پاپ‌آپ‌ها
   توضیح: این بخش استایل‌های مربوط به پاپ‌آپ‌های تأیید، مودال‌های معمولی و پاپ‌آپ‌های ویرایش را تعریف می‌کند.
   ========================================================= */
.confirm-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200; /* بالاتر از پاپ‌آپ‌های ویرایش */
}

.confirm-modal {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 1.5rem;
  max-width: 90%;
  width: 600px;
  box-shadow: var(--shadow);
  z-index: 201; /* بالاتر از confirm-modal-backdrop */
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100; /* بالاتر از پاپ‌آپ‌های ویرایش */
}

.modal {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 1.5rem;
  max-width: 90%;
  width: 600px;
  box-shadow: var(--shadow);
  z-index: 101; /* بالاتر از modal-backdrop */
}

.edit-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50; /* زیر پاپ‌آپ تأیید */
}

.edit-modal {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 1.5rem;
  max-width: 90%;
  width: 600px;
  box-shadow: var(--shadow);
  z-index: 51; /* بالاتر از edit-modal-backdrop */
}




/* =========================================================
   بخش: Login screen و فرم‌ها
   توضیح: این بخش استایل‌های مربوط به صفحه ورود و فرم‌های لاگین را تعریف می‌کند، شامل دکمه‌ها و تصویر پس‌زمینه.
   ========================================================= */
.login-screen {
    font-size: inherit; /* جلوگیری از وراثت فونت ناخواسته */
}

.login-form {
    width: 80%;
    display: flex;
    flex-direction: column;
    margin: 0 auto; /* وسط‌چین کردن فرم */
}

.button-container {
    display: flex;
    justify-content: center; /* وسط‌چین کردن دکمه */
    margin-top: 24px; /* فاصله از بالا */
}

.login-screen .btn-login {
    background-color: var(--primary); /* رنگ پس‌زمینه هماهنگ با btn-primary */
    color:#fff; /* رنگ متن هماهنگ با btn-primary */
    font-size: 1.4rem !important; /* فونت دو برابر (1rem -> 2rem) */
    border: 1px solid var(--primary); /* بوردر هماهنگ با btn-primary */
    border-radius: 7px; /* گوشه‌های گرد مشابه input */
    width: 94%; /* عرض 90% نسبت به div والد */
    height: 42px; /* ارتفاع ثابت */
    cursor: pointer;
    transition: background-color 0.2s ease;
    text-align: center;
    margin: 0 auto; /* وسط‌چین کردن دکمه */
    display: flex;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
    justify-content: center; /* اطمینان از وسط‌چین متن در دکمه */
    line-height: 12px; /* تنظیم خط برای وسط‌چین عمودی متن */
}

.login-screen .btn-login:hover {
    background-color: var(--primary-dark); /* رنگ تیره‌تر برای هاور */
    border-color: var(--primary-dark);
        box-shadow: 0 2px 14px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
    .login-form {
        width: 90%; /* عرض فرم بیشتر در موبایل */
    }

    .button-container {
        justify-content: center; /* حفظ وسط‌چین در موبایل */
    }

    .login-screen .btn-login {
        padding: 0.585rem 1rem; /* پدینگ عمودی 30% بیشتر */
        font-size: 1.8rem !important; /* فونت دو برابر (0.9rem -> 1.8rem) */
        width: 90%; /* عرض 90% در موبایل */
        height: 50px; /* ارتفاع ثابت */
        margin: 0 auto; /* وسط‌چین کردن دکمه */
    }
}

/* انیمیشن برای تغییر فرم */
.fade-out {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.fade-in {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s ease, transform 0.3s ease;
}






/* =========================================================
   بخش: Menu Toggle (دکمه منوی موبایل)
   توضیح: این بخش استایل‌های دکمه منوی سه‌خطی (تبدیل به X در حالت باز) را برای نمایش در موبایل تعریف می‌کند.
   ========================================================= */
.menu-toggle {
  width: 34px;
  height: 26px;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  position: fixed;
  top: 50px;
  right: 27px;
  z-index: 150;
}

.menu-toggle span {
  display: block;
  width: 100%;
  height: 3px;
  background: var(--text);
  border-radius: 2px;
  transition:
    transform 0.4s cubic-bezier(0.65, 0, 0.35, 1),
    opacity 0.35s cubic-bezier(0.65, 0, 0.35, 1);
  transform-origin: center;
}

.menu-toggle.open span:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}

.menu-toggle.open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.menu-toggle.open span:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

.menu-toggle:not(.open) span:nth-child(1),
.menu-toggle:not(.open) span:nth-child(3) {
  transform: translateY(0) rotate(0deg);
}

.menu-toggle:not(.open) span:nth-child(2) {
  opacity: 1;
  transform: scaleX(1);
}

@media (max-width: 768px) {
  .menu-toggle {
    display: flex;
  }
}

/* تکراری: این بخش Menu Toggle قبلاً تعریف شده است، برای حذف بعداً بررسی کنید */
.menu-toggle {
  width: 26px;
  height: 22px;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.menu-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--text);
  border-radius: 2px;
}
@media (max-width: 768px) {
  .menu-toggle {
    display: flex;
  }
  .content-header {
    right: 1.5rem;
    width: calc(100% - 3rem);
    z-index:6;
  }
}




/* =========================================================
   بخش: Sidebar (نوار کناری)
   توضیح: این بخش استایل‌های نوار کناری (سایدبار) را برای حالت دسکتاپ و موبایل تعریف می‌کند، شامل انیمیشن‌ها و لوگو.
   ========================================================= */
.sidebar.mobile {
  position: fixed;
  top: 14px;
  right: 14px;
  left: 14px;
  border-radius: var(--sidebar-radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  transform: translateX(100%);
  opacity: 0;
  transition: transform 0.4s ease, opacity 0.4s ease;
  z-index: 120;

  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  scrollbar-width: none;
}
.sidebar.mobile::-webkit-scrollbar {
  display: none;
}

.sidebar.mobile::after {
  content: "";
  display: block;
  height: 14px;
}

.sidebar.mobile.open {
  transform: translateX(0);
  opacity: 1;
  animation: slideInSidebar 0.4s ease forwards;
}

.sidebar.mobile.closing {
  animation: slideOutSidebar 0.4s ease forwards;
}

@keyframes slideInSidebar {
  from {
    transform: translateX(100%);
    opacity: 0.7;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOutSidebar {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0.7;
  }
}

.sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  z-index: 100;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.sidebar-backdrop.show {
  opacity: 1;
  visibility: visible;
}

@media (max-width: 768px) {
  .menu-toggle {
    display: flex;
  }

  .sidebar.desktop {
    display: none;
  }

  .sidebar.mobile {
    display: flex;
    flex-direction: column;
    height:96.5%;
  }
}

.sidebar-logo {
  width: 292px;
  height: 241px;
  object-fit: contain;
  margin: 0 auto;
  display: block;
}

@media (max-width: 768px) {
  .sidebar.mobile .sidebar-logo {
    width: 292px;
    height: 241px;
    object-fit: contain;
  }
}

/* تکراری: این بخش Sidebar قبلاً تعریف شده است، برای حذف بعداً بررسی کنید */
.sidebar {
  position: fixed;
  top: 1rem;
  right: 1rem;
  width: var(--sidebar-width);
  height: calc(100vh - 2rem);
  background: var(--surface);
  border-radius: var(--sidebar-radius);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.5rem;
  transition: transform 0.4s ease;
  z-index:10;
}
@media (max-width: 768px) {
  .sidebar {
    top: 0;
    right: 0;
    width: 94vw;
    height: 100vh;
    display: none;
    transform: translateX(100%);
  }
}
.main-content {
  margin-right: calc(var(--sidebar-width) + 1.5rem);
}
@media (max-width: 768px) {
  .main-content {
    margin-right: 0;
  }
}




/* =========================================================
   بخش: Header و content-header
   توضیح: این بخش استایل‌های هدر صفحه و هدر محتوا را تعریف می‌کند، شامل ماسک هدر و تنظیمات چیدمان.
   ========================================================= */
.header-mask {
  position: fixed;
  top: 0;
  width: 100%;
  height: calc(var(--header-height) + 15px);
        background-image: url("img/bg.png");
    background-repeat: repeat;               /* tile the image in both directions */
    background-position: 0 0;
  border: none;
  z-index: 5;
}

.header-maskside {
  position: fixed;
  top: 1rem;
  right: 1rem;
  width: calc(var(--sidebar-width)+10px);
  height: calc(100vh - 2rem) !important;
  background-image: url("img/bg.png");
  background-repeat: repeat;
  background-position: 0 0;
  background-attachment: fixed;
  border: none;
  z-index: 5;
}

.content-header {
  position: fixed;
  top: 15px;
  right: calc(var(--sidebar-width) + 2.8rem);
  width: calc(100% - var(--sidebar-width) - 4.2rem);
  background: var(--surface);
  height: var(--header-height);
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
  justify-content: space-between;
  border-radius: var(--radius);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  z-index: 6;
}
.content-header h1 {
  font-size: 1.4rem;
  color: #000;
  font-weight: 700;
  flex-grow: 1;
  text-align: right;
}
.content-header .menu-toggle {
  margin-right: 1rem;
  border-radius: 2px;
  width: 20px;
  height: 20px;
}




/* =========================================================
   بخش: Main content
   توضیح: این بخش استایل‌های محتوای اصلی صفحه را تعریف می‌کند، شامل تنظیمات اسکرول و پدینگ.
   ========================================================= */
.main-content {
  flex: 1;
  padding: calc(var(--header-height) + 15px) 1.5rem 1.5rem 1.5rem;
  overflow-y: auto;
  transition: margin 0.3s ease;
  scrollbar-width: none;
  position: relative;
}
.main-content::-webkit-scrollbar {
  display: none;
}




/* =========================================================
   بخش: App Shell
   توضیح: این بخش ساختار کلی برنامه را به صورت flex تعریف می‌کند.
   ========================================================= */
.app-shell {
  display: flex;
  flex-direction: row-reverse;
  min-height: 100vh;
}




/* =========================================================
   بخش: Sidebar header و محتوا
   توضیح: این بخش استایل‌های هدر و محتوای سایدبار (مانند دکمه‌ها و توضیحات) را تعریف می‌کند.
   ========================================================= */
.sidebar-header {
  background: rgba(14, 165, 183, 0.06);
  padding: 1rem;
  border-radius: 12px;
  margin-bottom: 1rem;
  text-align: center;
}
.sidebar-header h2 {
  font-size: var(--font-size-sidebar-title);
  font-weight: 700;
  margin-bottom: 0.2rem;
  color: var(--text);
}
.sidebar-header p {
  font-size: var(--font-size-sidebar-subtitle);
  color: var(--muted);
}
.sidebar-content {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.sidebar-content button {
  background: transparent;
  color: var(--text);
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  padding: 0.7rem 0.8rem;
  text-align: right;
  font-weight: 600;
  cursor: pointer;
  font-size: var(--font-size-base);
  border-radius: 8px;
}
.sidebar-content button:hover {
  background: rgba(14, 165, 183, 0.08);
}
.sidebar-content button.active {
  background: var(--primary);
  color: #fff;
}
.sidebar .btn-danger {
  background: var(--danger);
  color: #fff;
  border: none;
  padding: 0.6rem;
  border-radius: 8px;
  cursor: pointer;
}
.sidebar .btn-danger:hover {
  background: #dc2626;
}




/* =========================================================
   بخش: Cards
   توضیح: این بخش استایل‌های کارت‌های عمومی (مانند کارت‌های محتوا) را تعریف می‌کند.
   ========================================================= */
.card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem;
  margin-bottom: 1rem;
}
.card h2 {
  font-size: var(--font-size-title);
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--text);
}




/* =========================================================
   بخش: Buttons
   توضیح: این بخش استایل‌های دکمه‌های مختلف (مانند primary، danger و ghost) را تعریف می‌کند.
   ========================================================= */
.btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: var(--radius);
  border: none;
  font-weight: 600;
  font-size: var(--font-size-base);
  cursor: pointer;
  line-height: 1.5;
  margin-left:2px;
  margin-right:2px;
}
.btn-primary {
  background: var(--primary);
  color: #fff;
   margin-left: 10;
}
.btn-danger {
  background: var(--danger);
  color: #fff;
}
.btn-cancel {
  background: var(--cancel);
  color: #fff;
}
.btn-success {
  background: var(--success);
  color: #fff;
}
.btn-ghost {
  background: #e5e7eb;
  border: none;
  color: var(--muted);
  padding: var(--btn-padding);
  font-size: var(--font-size-base);
  line-height: 1.5;
  width: 70PX;
  height: 40PX;

}
.btn-ghost:not(:disabled) {
  background: #e0f7fa;
  color: var(--text);
}
.btn-ghost:hover:not(:disabled) {
  background: #b2ebf2;
}
.btn-primary:hover {
  background: var(--primary-dark);
}




/* =========================================================
   بخش: Print Button
   توضیح: این بخش استایل‌های دکمه پرینت را تعریف می‌کند.
   ========================================================= */
.print-btn {
  background: var(--primary);
  color: #fff;
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: var(--font-size-base);
  font-weight: 600;
}
.print-btn:hover {
  background: var(--primary-dark);
}




/* =========================================================
   بخش: فرم‌ها و ورودی‌ها
   توضیح: این بخش استایل‌های فرم‌ها، فیلدهای ورودی و تاریخ را تعریف می‌کند.
   ========================================================= */
.form-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  align-items: start;
  margin-bottom: 1rem;
}
.form-group {
  display: flex;
  flex-direction: column;
}
.form-group label {
  font-weight: 700;
  margin-bottom: 0.5rem;
  font-size: var(--font-size-base);
}
input,
select,
textarea,
.input {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  font-size: var(--font-size-base);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
input:disabled,
select:disabled,
textarea:disabled {
  box-shadow: none;
  background: #f9fafb;
}
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(14, 165, 183, 0.2);
}

.date-input-wrapper {
  position: relative;
}
.date-input-wrapper .input {
  padding-right: 2.5rem;
}
.date-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: var(--primary);
  font-size: 1.2rem;
  pointer-events: auto;
}




/* =========================================================
   بخش: جداول
   توضیح: این بخش استایل‌های جداول را برای نمایش داده‌ها تعریف می‌کند.
   ========================================================= */
.table-wrapper {
  overflow-x: auto;
}
table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border-radius: var(--radius);
}
thead th {
  background: rgba(14, 165, 183, 0.06);
  color: var(--primary-dark);
  padding: 0.75rem;
  font-weight: 700;
  text-align: center;
}
tbody td {
  padding: 0.65rem;
  text-align: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}




/* =========================================================
   بخش: Star Rating و Rating chart
   توضیح: این بخش استایل‌های سیستم امتیازدهی ستاره‌ای و نمودار امتیازات را تعریف می‌کند.
   ========================================================= */
.star-rating {
  display: flex;
  direction: rtl;
  justify-content: center;
  gap: 0.4rem;
}
.star {
  font-size: 1.5rem;
  color: #ccdede;
  cursor: pointer;
  transition: transform 0.15s, color 0.15s;
}
.star:hover {
  transform: scale(1.15);
}
.star.filled {
  color: #00bcd4;
}

.rating-chart {
  width: 100%;
  height: 150px;
}
.ratings-grid-joined {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--surface);
  direction: ltr;
}
.rating-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  border-right: 1px solid rgba(0, 0, 0, 0.05);
}
.rating-name {
  font-weight: 600;
  color: var(--text);
  font-size: var(--font-size-base);
}
.rating-bar {
  width: 100%;
  height: 12px;
  background: #e5e7eb;
  border-radius: 6px;
  overflow: hidden;
}
.rating-fill {
  height: 100%;
  transition: width 0.6s ease, background-color 0.6s ease;
  border-radius: 6px;
}
.rating-score {
  font-size: 0.85rem;
  color: var(--muted);
  text-align: right;
  width: 100%;
}
.rating-row:hover {
  background: rgba(14, 165, 183, 0.05);
}
@media (max-width: 1400px) {
  .ratings-grid-joined {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 1000px) {
  .ratings-grid-joined {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .ratings-grid-joined {
    grid-template-columns: 1fr;
  }
}




/* =========================================================
   بخش: Login Slide Panel
   توضیح: این بخش استایل‌های پنل اسلایدی صفحه لاگین را برای دسکتاپ و موبایل تعریف می‌کند.
   ========================================================= */
.login-bg {
  position: fixed;
  inset: 0;
  background: url("img/lockscreen.png") center center/cover no-repeat;
  filter: brightness(1);
}

.login-screen {
  position: fixed;
  top: 14px;
  right: 14px;
  left: 14px;
  bottom: 14px;
  width: 370px;
  height: auto;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(6px);
  box-shadow: -6px 0 22px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: slideInRight 0.5s ease forwards;
  border-radius: 24px;
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.login-screen h2 {
  font-size: 1.3rem;
  margin-bottom: 1rem;
  color: var(--primary-dark);
}

.login-screen form {
  width: 80%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.login-screen .input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.7rem 0.9rem;
  font-size: var(--font-size-base);
}

.login-screen button {
  background: var(--primary);
  color: #fff;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: var(--font-size-base);
  line-height: 1.5;
}

.login-screen .btn-ghost {
  background: #e5e7eb;
  border: none;
  color: var(--muted);
  padding: 0.5rem 1rem;
  font-size: var(--font-size-base);
  line-height: 1.5;
}
.login-screen .btn-ghost:not(:disabled) {
  background: #e0f7fa;
  color: var(--text);
}

@media (max-width: 768px) {
  .login-screen {
    top: 14px;
    right: 14px;
    bottom: 14px;
    left: 14px;
    width: auto;
    height: auto;
    border-radius: 24px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.25);
  }
}




/* =========================================================
   بخش: File input و Upload button
   توضیح: این بخش استایل‌های ورودی فایل و دکمه آپلود را تعریف می‌کند.
   ========================================================= */
input[type="file"] {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  font-size: var(--font-size-base);
  padding: 0.5rem;
  cursor: pointer;
  color: var(--muted);
}
input[type="file"]::-webkit-file-upload-button {
  background: var(--primary);
  color: #fff;
  border: none;
  padding: 0.45rem 0.9rem;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.2s;
}
input[type="file"]::-webkit-file-upload-button:hover {
  background: var(--primary-dark);
}




/* =========================================================
   بخش: Toast, Print media, Helpers
   توضیح: این بخش استایل‌های اعلان‌ها (Toast)، تنظیمات پرینت و کلاس‌های کمکی را تعریف می‌کند.
   ========================================================= */
.toast {
  position: fixed;
  top: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--success);
  color: #fff;
  padding: 1rem 2rem;
  border-radius: var(--radius);
  font-size: var(--font-size-base);
  box-shadow: var(--shadow);
  z-index: 102;
}

@media print {
  .sidebar,
  .content-header,
  .modal-backdrop,
  .edit-modal-backdrop,
  .toast,
  .header-mask {
    display: none !important;
  }
  .main-content {
    margin: 0 !important;
    padding: 0 !important;
  }
}

.text-danger {
  color: var(--danger);
  font-weight: 600;
  margin-top: 0.5rem;
}
.mt-3 {
  margin-top: 1rem;
}
.flex {
  display: flex;
  height:38px;
}
.gap-2 {
  gap: 0.5rem;
}
.justify-end {
  justify-content: flex-end;
}
.items-center {
  align-items: center;
}

.flexleft {
  display: flex;
  height: 38px;
  gap: 0.5rem;
  margin-left: 0;
  margin-right: auto;
  direction: ltr;
}

.main-container {
  display: flex;
  width: 100%;
  gap: 0.5rem;
  align-items: center;
}




/* =========================================================
   بخش: Food card grid و کارت‌ها
   توضیح: این بخش استایل‌های شبکه کارت‌های غذا و جزئیات کارت‌ها (مانند عنوان و تصویر) را تعریف می‌کند.
   ========================================================= */
.food-card-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 تا در هر ردیف */
  gap: 1.5rem;
  margin-top: 1rem;
  direction: rtl;
  justify-items: center;
  max-height: 70vh;
  overflow-y: auto;
  padding: 0.5rem;
  width: 100%; /* عرض کامل */
  scrollbar-width: none; /* مخفی کردن اسکرولبار در فایرفاکس */
}

.food-card-container::-webkit-scrollbar {
  display: none; /* مخفی کردن اسکرولبار در کروم و سافاری */
}

.food-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 1rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* افکت 3D نرم */
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.food-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.food-card-selected {
  border: 2px solid var(--primary);
  box-shadow: 0 0 0 3px rgba(14, 165, 183, 0.2), 0 4px 12px rgba(0, 0, 0, 0.1);
}

.food-card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

.food-card-radio {
  display: none;
}

.food-card-details {
  text-align: center;
  width: 100%;
}

.food-card-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
  color: var(--text);
}

.food-card-type {
  font-size: 0.9rem;
  color: var(--muted);
}

.food-card-image {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* اصلاح ساختار کلی مودال برای انتخاب غذا */
.modal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  overflow: hidden;
  direction: rtl;
  width: 600px;
  max-width: 90%;
}

.modal h2 {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 1rem;
  text-align: center;
  width: 100%;
}

.modal .food-card-container {
  direction: rtl;
  width: 100%;
}

.modal .flex.gap-2.mt-4 {
  justify-content: flex-end; /* در rtl سمت چپ می‌شود */
  width: 100%;
  margin-top: 1rem;
}

@media (max-width: 768px) {
  .food-card-container {
    grid-template-columns: 1fr; /* 1 تا در موبایل */
    align-items: center;
    padding: 0 1rem;
  }

  .food-card {
    width: 100%; /* عرض کامل */
  }

  .modal {
    width: 94%; /* افزایش عرض مودال در موبایل */
    padding: 1rem;
  }
}



/* =========================================================
   بخش: Column selected highlight
   توضیح: این بخش استایل‌های هایلایت ستون انتخاب‌شده در جدول را تعریف می‌کند.
   ========================================================= */
.column-selected {
    background-color: rgba(14, 165, 183, 0.2);
    border: 2px solid var(--primary);
    transition: background-color 0.2s ease, border 0.2s ease;
}




/* =========================================================
   بخش: Mobile and Desktop Views
   توضیح: این بخش استایل‌های مربوط به نمایش و مخفی کردن نمای موبایل و دسکتاپ را تعریف می‌کند.
   ========================================================= */

/* اطمینان از مخفی شدن نمای موبایل در دسکتاپ */
@media (min-width: 769px) {
  .card.mobile-only,
  .mobile-only {
    display: none !important;
  }
}

/* استایل‌های نمای موبایل */
@media (max-width: 768px) {
  /* مخفی کردن جدول دسکتاپ */
  .table-wrapper {
    display: none !important;
  }

  /* نمایش نمای موبایل */
  .card.mobile-only,
  .mobile-only {
    display: block !important;
  }

  /* =========================================================
     زیربخش: Mobile Reservation Dropdown
     توضیح: استایل‌های مربوط به منوی کشویی رزرو غذا در حالت موبایل.
     ========================================================= */

  /* کانتینر اصلی منوی کشویی */
  .reserve-mobile-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  /* استایل هر روز */
  .reserve-mobile-day {
    border: 1px solid #ddd;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
    transition: box-shadow 0.3s ease;
  }

  .reserve-mobile-day.open {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  }

  /* هدر منوی کشویی */
  .reserve-mobile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f3f4f6;
    padding: 10px 14px;
    font-weight: bold;
    font-size: 15px;
    color: #333;
    cursor: pointer;
    user-select: none;
  }

  /* بدنه منوی کشویی */
  .reserve-mobile-body {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-6px);
    transition:
      max-height 0.45s cubic-bezier(0.25, 1, 0.3, 1),
      opacity 0.4s ease,
      transform 0.4s ease;
  }

  .reserve-mobile-day.open .reserve-mobile-body {
    max-height: 800px;
    opacity: 1;
    transform: translateY(0);
  }

  /* استایل غذای انتخاب‌شده */
.reserve-mobile-food {
    display: flex;
    flex-direction: column; /* تغییر به ستونی برای قرار گرفتن نام زیر تصویر */
    align-items: center;
    gap: 8px; /* فاصله کمتر برای فشردگی بهتر */
    padding: 8px 0;
  }

.reserve-mobile-food img {
    width: 64px;
    height: 38.4px; /* کاهش 40% از 64px (64 * 0.6 = 38.4px) */
    border-radius: 10px;
    object-fit: cover;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  }

  .reserve-mobile-food-info {
    text-align: center;
  }

.reserve-mobile-food-info h4 {
    font-size: 1rem;
    font-weight: 500;
    color: inherit;
    margin: 0;
  }

.reserve-mobile-food-info p {
    font-size: 0.85rem;
    color: var(--muted);
    margin: 0;
  }

  /* استایل امتیازدهی ستاره‌ای */
  .reserve-mobile-stars {
    display: flex;
    justify-content: center;
    gap: 4px;
    font-size: 22px;
    margin-top: 8px;
  }

  .reserve-mobile-stars .star {
    cursor: pointer;
    color: #ccc;
    transition: color 0.25s ease, transform 0.15s ease;
  }

  .reserve-mobile-stars .star:hover {
    transform: scale(1.2);
    color: #facc15;
  }

  .reserve-mobile-stars .star.filled {
    color: gold;
  }

  /* متن برای حالت بدون غذا */
  .no-food-text {
    color: #777;
    text-align: center;
    margin-bottom: 10px;
  }
}



/* =========================================================
   بخش: دکمه‌های پرینت و اکسل
   توضیح: این بخش استایل‌های دکمه‌های پرینت و اکسل را در حالت موبایل تعریف می‌کند.
   ========================================================= */
@media (max-width: 768px) {
  .btn-text {
    display: none;
  }

  .btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    width: 90%;
    height: 90%;
  }

  .btn.btn-sm {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #f3f4f6;
    padding: 0;
    border: 1px solid #e5e7eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease-in-out;
  }

  .btn.btn-sm:hover {
    background: #dbeafe;
    color: #1d4ed8;
    transform: translateY(-1px);
  }

  .flexleft.gap-2 {
    justify-content: center;
  }
}




/* =========================================================
   بخش: دکمه‌های ماه قبل / بعد
   توضیح: این بخش استایل‌های دکمه‌های تغییر ماه (ماه قبل و بعد) را تعریف می‌کند.
   ========================================================= */
.month-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  vertical-align: middle;
  padding: 0.55rem 1rem;
  line-height: 1.2;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  color: #333;
  transition: all 0.25s ease-in-out;
  white-space: nowrap;
  user-select: none;
}

.month-btn:hover {
  background: #e0e7ff;
  color: #1d4ed8;
  transform: translateY(-1px);
}

.month-btn-icon {
  display: none;
  font-size: 1.6rem;
  line-height: 1;
}

.month-btn-text {
  display: inline;
  font-size: 1rem;
}

@media (max-width: 768px) {
  .month-btn,
  .btn.btn-sm {
    padding: 0;
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease-in-out;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  }

  .month-btn:hover,
  .btn.btn-sm:hover {
    background: #e0e7ff;
    color: #1d4ed8;
  }

  .month-btn-icon,
  .btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 90%;
    height: 90%;
    font-size: 3rem;
  }

  .month-btn-text,
  .btn-text {
    display: none;
  }

  .month-navigation {
    display: flex;
    justify-content: space-between;
    width: 100%;
    gap: 10px;
  }

  .month-navigation button:last-child .month-btn-icon {
    transform: scaleX(-1);
  }

  .flexleft.gap-2 {
    justify-content: center;
    gap: 10px;
  }
  
  .btn.btn-ghost {
margin-top:14px;
     font-weight: 500;
}


.rtxtdate {
    margin-top:24px;
    font-size: 3rem;
}
.mto {
    margin-top:14px;
}

.mtu {
   margin-top:1;
     line-height: 0;
     padding:0;
}


}






/* =========================================================
   بخش: بهبود دکمه‌های پرینت، اکسل، تغییر ماه و تاریخ در نمای موبایل
   توضیح: این بخش دکمه‌ها و تاریخ را استاندارد می‌کند، تاریخ را غیر bold و وسط‌چین با دکمه‌ها می‌کند.
   ========================================================= */
@media (max-width: 768px) {
  .month-navigation {
    display: flex;
    justify-content: center; /* وسط‌چین افقی */
    align-items: center; /* وسط‌چین عمودی */
    width: 100%;
    gap: 10px; /* فاصله بین دکمه‌ها و تاریخ */
    padding: 8px 0;
  }

  .month-btn,
  .btn.btn-sm {
    width: 44px; /* اندازه استاندارد */
    height: 44px; /* هم‌تراز با تاریخ */
    border-radius: 12px;
    background: var(--surface); /* سفید */
    border: 1px solid var(--border);
    box-shadow: var(--shadow); /* سایه مشخص */
    transition: all 0.3s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .month-btn:hover,
  .btn.btn-sm:hover {
    background: var(--primary);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }

  .month-btn-icon,
  .btn-icon {
    font-size: 1.8rem; /* آیکن استاندارد */
  }

  .month-btn-text,
  .btn-text {
    display: none; /* مخفی در موبایل */
  }

  .month-navigation button:last-child .month-btn-icon {
    transform: scaleX(-1); /* برعکس کردن فلش */
  }

  .flexleft.gap-2 {
    justify-content: center;
    gap: 10px;
    align-items: center; /* وسط‌چین عمودی */
  }

  .txtdate {
    font-size: 1.1rem; /* فونت کوچکتر */
    font-weight: 400; /* غیر bold */
    font-family: var(--font-sans);
    color: var(--text);
    text-align: center;
    margin: 0;
    line-height: 44px; /* هم‌تراز با دکمه‌ها */
  }
}

/* =========================================================
   بخش: بهبود dropdown‌ها و رنگ روزهای تعطیل در نمای موبایل
   توضیح: این بخش انیمیشن‌های dropdown را اصلاح می‌کند و روزهای پنج‌شنبه و جمعه را خاکستری می‌کند.
   ========================================================= */
@media (max-width: 768px) {
  .reserve-mobile-container {
    padding: 0 10px;
  }

  .reserve-mobile-day {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface); /* سفید پیش‌فرض */
    margin-bottom: 10px;
    box-shadow: var(--shadow); /* سایه مشخص */
    transition: box-shadow 0.3s ease, transform 0.2s ease;
  }

  .reserve-mobile-day:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
  }

  .reserve-mobile-day.open {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
    border-color: var(--primary);
  }



  .reserve-mobile-header {
    background: inherit; /* ارث‌بری رنگ از والد */
    padding: 12px 16px;
    font-size: 1rem;
    font-weight: 500;
    color: inherit; /* هماهنگ با والد */
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.2s ease;
  }

  .reserve-mobile-header:hover {
    background: rgba(14, 165, 183, 0.05);
  }

  .reserve-mobile-header .arrow {
    font-size: 1.2rem;
    transition: transform 0.4s ease;
  }

  .reserve-mobile-day.open .arrow {

  }

  .reserve-mobile-body {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition:
      max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.3s ease;
    padding: 0 16px;
    background: var(--surface); /* سفید برای بدنه */
  }

  .reserve-mobile-day.open .reserve-mobile-body {
    max-height: 1200px; /* فضای کافی */
    opacity: 1;
    padding: 12px 16px;
  }

  .reserve-mobile-day.holiday-friday .reserve-mobile-header,
  .reserve-mobile-day.holiday-thursday .reserve-mobile-header,
  .reserve-mobile-day.holiday-friday .reserve-mobile-body,
  .reserve-mobile-day.holiday-thursday .reserve-mobile-body {
    color: #fff !important;
  }

  .reserve-mobile-food {
    gap: 10px;
    padding: 8px 0;
  }

  .reserve-mobile-food img {
    width: 64px;
    height: 64px;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  }

  .reserve-mobile-food-info h4 {
    font-size: 1rem;
    font-weight: 500;
    color: inherit;
  }

  .reserve-mobile-food-info p {
    font-size: 0.85rem;
    color: var(--muted);
  }

  .no-food-text {
    font-size: 0.9rem;
    color: var(--muted);
    padding: 10px 0;
  }

  .reserve-mobile-stars {
    gap: 5px;
    margin-top: 8px;
  }

  .reserve-mobile-stars .star {
    font-size: 1.6rem;
    transition: transform 0.2s ease, color 0.2s ease;
  }

  .reserve-mobile-stars .star:hover {
    transform: scale(1.2);
    color: #facc15;
  }

  .reserve-mobile-stars .star.filled {
    color: #f59e0b;
  }

  .reserve-mobile-body .btn {
    width: 100%;
    padding: 0.6rem;
    font-size: 0.95rem;
    border-radius: 10px;
    transition: all 0.3s ease;
  }

  .reserve-mobile-body .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  }

  .reserve-mobile-day.holiday-friday .btn,
  .reserve-mobile-day.holiday-thursday .btn {
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
  }

  .reserve-mobile-day.holiday-friday .star,
  .reserve-mobile-day.holiday-thursday .star {
    color: #ccdede !important;
  }

  .reserve-mobile-day.holiday-friday .star.filled,
  .reserve-mobile-day.holiday-thursday .star.filled {
    color: #f59e0b !important;
  }
}

/* =========================================================
   بخش: رنگ روزهای تعطیل در نمای دسکتاپ
   توضیح: این بخش رنگ‌های خاکستری را برای روزهای جمعه و پنج‌شنبه در جدول دسکتاپ اعمال می‌کند.
   ========================================================= */
.table-wrapper table tbody tr.holiday-friday,
.table-wrapper table tr.holiday-friday {
  background: #4b5563 !important; /* خاکستری تیره برای جمعه */
  color: #fff !important;
}

.table-wrapper table tbody tr.holiday-thursday,
.table-wrapper table tr.holiday-thursday {
  background: #6b7280 !important; /* خاکستری روشن‌تر برای پنج‌شنبه */
  color: #fff !important;
}

.table-wrapper table tbody tr.holiday-friday td,
.table-wrapper table tr.holiday-friday td,
.table-wrapper table tbody tr.holiday-thursday td,
.table-wrapper table tr.holiday-thursday td {
  background: inherit !important; /* ارث‌بری رنگ از والد */
  color: #fff !important;
}

.table-wrapper table tbody tr.holiday-friday .btn,
.table-wrapper table tr.holiday-friday .btn,
.table-wrapper table tbody tr.holiday-thursday .btn,
.table-wrapper table tr.holiday-thursday .btn {
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

.table-wrapper table tbody tr.holiday-friday .star,
.table-wrapper table tr.holiday-friday .star,
.table-wrapper table tbody tr.holiday-thursday .star,
.table-wrapper table tr.holiday-thursday .star {
  color: #ccdede !important;
}

.table-wrapper table tbody tr.holiday-friday .star.filled,
.table-wrapper table tr.holiday-friday .star.filled,
.table-wrapper table tbody tr.holiday-thursday .star.filled,
.table-wrapper table tr.holiday-thursday .star.filled {
  color: #f59e0b !important;
}

/* =========================================================
   بخش: اصلاح استایل‌های چاپ
   توضیح: این بخش استایل‌های چاپ را به‌روزرسانی می‌کند تا روزهای تعطیل خاکستری باشند.
   ========================================================= */
@media print {
  .holiday-friday {
    background: #4b5563 !important; /* خاکستری تیره برای جمعه */
    color: #fff !important;
  }

  .holiday-thursday {
    background: #6b7280 !important; /* خاکستری روشن‌تر برای پنج‌شنبه */
    color: #fff !important;
  }

  .holiday-friday td,
  .holiday-thursday td {
    background: inherit !important; /* ارث‌بری رنگ از والد */
    color: #fff !important;
  }
}






/* تنظیم رنگ متن دراپ‌داون‌ها به مشکی به صورت پیش‌فرض */
.table-wrapper table td select.input {
    color: #000; /* مشکی */
    background-color: #fff; /* پس‌زمینه سفید */
}

/* حفظ رنگ سفید برای پنج‌شنبه و جمعه */
.table-wrapper table tr.holiday-thursday td select.input,
.table-wrapper table tr.holiday-friday td select.input {
    color: #fff !important; /* سفید برای پنج‌شنبه و جمعه */
    background-color: inherit; /* حفظ رنگ پس‌زمینه از ردیف */
}












@media (max-width: 768px) {
    .reserve-mobile-container {
        padding: 0 10px;
    }

    .reserve-mobile-day {
        border: 1px solid var(--border);
        border-radius: 12px;
        background: var(--surface);
        margin-bottom: 10px;
        box-shadow: var(--shadow);
        transition: box-shadow 0.3s ease, transform 0.2s ease;
    }

    .reserve-mobile-day:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
    }

    .reserve-mobile-day.open {
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
        border-color: var(--primary);
    }

    .reserve-mobile-day.holiday-friday,
    .reserve-mobile-container .reserve-mobile-day.holiday-friday {
        background: #4b5563 !important;
        color: #fff !important;
    }

    .reserve-mobile-day.holiday-thursday,
    .reserve-mobile-container .reserve-mobile-day.holiday-thursday {
        background: #6b7280 !important;
        color: #fff !important;
    }

    .reserve-mobile-header {
        background: inherit;
        padding: 12px 16px;
        font-size: 1rem;
        font-weight: 500;
        color: inherit;
        display: flex;
        justify-content: space-between;
        align-items: center;
        transition: background 0.2s ease;
    }

    .reserve-mobile-header:hover {
        background: rgba(14, 165, 183, 0.05);
    }

    .reserve-mobile-header .arrow {
        font-size: 1.2rem;
        transition: transform 0.4s ease;
    }

    .reserve-mobile-day.open .arrow {

    }

    .reserve-mobile-body {
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
        padding: 0 16px;
        background: var(--surface);
    }

    .reserve-mobile-day.open .reserve-mobile-body {
        max-height: 1200px;
        opacity: 1;
        padding: 12px 16px;
    }

    .reserve-mobile-food {
        gap: 10px;
        padding: 8px 0;
    }

    .reserve-mobile-food-title {
        font-size: 0.9rem;
        font-weight: 500;
        color: #000; /* متن تیترها مشکی */
        margin-bottom: 5px;
        white-space: nowrap; /* جلوگیری از wrap شدن متن */
        /* حذف overflow: hidden و text-overflow: ellipsis */
    }

    .input {
        padding: 8px;
        border: 1px solid #d1d5db;
        border-radius: 4px;
        width: 100%;
        color: #000; /* متن پیش‌فرض مشکی */
        background-color: #fff;
    }

    /* تنظیم رنگ متن دراپ‌داون بسته برای تعطیلات به مشکی */
    .reserve-mobile-day.holiday-thursday .input,
    .reserve-mobile-day.holiday-friday .input {
        color: #000 !important; /* متن دراپ‌داون بسته مشکی */
        background-color: inherit; /* پس‌زمینه از ردیف ارث‌بری می‌شه */
    }

    /* تنظیم رنگ تیترها برای تعطیلات */
    .reserve-mobile-day.holiday-thursday .reserve-mobile-food-title,
    .reserve-mobile-day.holiday-friday .reserve-mobile-food-title {
        color: #000 !important; /* تیترها مشکی */
    }

    /* تنظیم رنگ گزینه‌های دراپ‌داون برای تعطیلات */
    .reserve-mobile-day.holiday-thursday .input option,
    .reserve-mobile-day.holiday-friday .input option {
        color: #000; /* گزینه‌ها مشکی */
        background-color: #fff; /* پس‌زمینه سفید */
    }

    .desktop-only {
        display: block;
    }

    .mobile-only {
        display: none;
    }
}

@media (max-width: 768px) {
    .desktop-only {
        display: none !important; /* اطمینان از پنهان شدن کامل دکمه‌ها */
    }

    .mobile-only {
        display: block;
    }

    .flexleft {
        flex-direction: row;
        justify-content: center;
        gap: 10px;
        align-items: center;
    }

    .btn.btn-sm {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        background: var(--surface);
        border: 1px solid var(--border);
        box-shadow: var(--shadow);
        transition: all 0.3s ease-in-out;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .btn.btn-sm:hover {
        background: var(--primary);
        color: #fff;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
}











/* =============================== */
/* 📦 ساختار کلی داشبورد */
.dash-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    z-index:100;

}

/* عنوان اصلی */
.dash-header h2 {
    text-align: right;
    font-size: 1.2rem;
    color: #222;
}

/* محتوای اصلی (غذا و تقویم) */
.dash-content {
        background: #fff;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 25px;
    width: 100%;
}

/* کارت سه‌بعدی */
.dash-neumorphic-card {
    background: #f6f7f8;
    border-radius: 20px;
    box-shadow: 6px 6px 14px #d0d0d0, -6px -6px 14px #ffffff;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* نسبت بین بخش‌ها */
.dash-calendar-section {
        background: #fff;
    flex: 2;
}
.dash-food-section {
    flex: 3;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;    
}

/* =============================== */
/* 📅 تقویم */
.dash-calendar {
    width: 100%;
}

.dash-calendar-title {
    text-align: center;
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 20px;
}

.dash-calendar-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-weight: 600;
    color: #444;
    margin-bottom: 10px;
}

.dash-calendar-body {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

.dash-calendar-day {
    padding: 10px 0;
    border-radius: 10px;
    text-align: center;
    font-weight: 500;
    background: #f9fafb;
    box-shadow: inset 2px 2px 5px #d6d6d6, inset -2px -2px 5px #ffffff;
    cursor: pointer;
    transition: all 0.3s;
}

/* hover */
.dash-calendar-day:hover:not(.dash-selected) {
    background: #e7f8fa;
}

/* رنگ روزهای خاص */
.dash-friday {
    color: #ef4444 !important;
}
.dash-thursday {
    color: #6b7280 !important;
}

/* روز امروز */
.dash-calendar-day.dash-today {
    background: #b7f0fa;
    font-weight: 600;
}

/* روز انتخاب‌شده (فیروزه‌ای تیره) */
.dash-calendar-day.dash-selected {
    background: #0ea5b3 !important;
    color: #fff !important;
    box-shadow: inset 2px 2px 5px rgba(0,0,0,0.15), inset -2px -2px 5px rgba(255,255,255,0.4);
    transform: scale(0.97);
}

/* رزروها */
.dash-calendar-day.dash-reserved {
    background: rgba(14, 165, 233, 0.15);
    border: 1px solid rgba(14, 165, 233, 0.2);
}
.dash-calendar-day.dash-reserved.dash-selected {
    background: #0ea5b3 !important;
    color: #fff !important;
}






/* =========================================================
   بخش: دکمه‌های ناوبری ماه در داشبورد
   توضیح: استایل‌های اختصاصی برای دکمه‌های جابه‌جایی ماه در تقویم داشبورد
   ========================================================= */

.dash-calendar-title {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-bottom: 10px;
    position: relative; /* برای موقعیت‌دهی مطلق دکمه‌ها */
    padding: 0 40px; /* فضای کافی برای دکمه‌ها در چپ و راست */
}

.report-month-nav {
    background: transparent;
    border: none;
    color: #007bff; /* رنگ فیروزه‌ای برای حالت فعال */
    font-size: 2.5rem;
    padding: 1px;
    cursor: pointer;
    transition: color 0.3s;
    line-height: 1;
    position: absolute;
    top: 1px;
    transform: translateY(-50%);
}

.report-month-nav:hover:not(:disabled) {
    color: #0056b3; /* رنگ تیره‌تر فیروزه‌ای در hover */
}

.report-month-nav:disabled {
    color: #ccc; /* رنگ خاکستری برای غیرفعال */
    cursor: not-allowed;
}

.prev-month {
    right: 0; /* چسباندن به لبه راست */
}

.next-month {
    left: 0; /* چسباندن به لبه چپ */
    transform:  rotate(180deg); /* جابجایی 3 پیکسل پایین + چرخش */
}

h3 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
}








/* =========================================================
   بخش: تقویم گزارش‌ها
   توضیح: این بخش استایل‌های مربوط به تقویم انتخاب تاریخ در بخش گزارش‌ها را تعریف می‌کند.
   ========================================================= */
.report-calendar-popup {
    position: absolute;
    z-index: 1000;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 10px;
    width: 250px; /* کوچک‌تر از داشبورد */
    top: calc(100% + 5px);
    right: 0;
}

.report-calendar {
    width: 100%;
}

.report-calendar-title {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-bottom: 8px;
    position: relative; /* برای موقعیت‌دهی مطلق دکمه‌ها */
    padding: 0 24px; /* فاصله 24px از چپ و راست کادر تقویم */
}

.report-month-nav {
    background: transparent;
    border: none;
    color: var(--primary); /* استفاده از رنگ اصلی تم */
    font-size: 1.5rem; /* اندازه یکسان برای فلش‌ها */
    padding: 4px;
    cursor: pointer;
    transition: color 0.3s;
    line-height: 1;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.report-month-nav:hover:not(:disabled) {
    color: #0ea5b3; /* رنگ hover مشابه تقویم */
}

.report-month-nav:disabled {
    color: #ccc; /* رنگ خاکستری برای غیرفعال */
    cursor: not-allowed;
}

.report-month-nav.prev-month {
    right: 0; /* چسباندن به لبه راست */
}

.report-month-nav.next-month {
    left: 0; /* چسباندن به لبه چپ */
    transform: translateY(-50%) rotate(180deg); /* چرخش 180 درجه برای نوک به سمت چپ */
}

.report-calendar-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-weight: 600;
    color: #444;
    margin-bottom: 8px;
    font-size: 0.8rem; /* 20% کوچک‌تر */
}

.report-calendar-day-header {
    padding: 4px 0; /* کوچک‌تر */
}

.report-calendar-body {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px; /* 33% کوچک‌تر */
}

.report-calendar-day {
    padding: 8px 0; /* 20% کوچک‌تر */
    border-radius: 8px;
    text-align: center;
    font-weight: 500;
    font-size: 0.8rem; /* 20% کوچک‌تر */
    background: #f9fafb;
    box-shadow: inset 2px 2px 4px #d6d6d6, inset -2px -2px 4px #ffffff;
    cursor: pointer;
    transition: all 0.3s;
}

.report-calendar-day:hover:not(.report-selected) {
    background: #e7f8fa;
}

.report-friday {
    color: #ef4444 !important;
}

.report-thursday {
    color: #6b7280 !important;
}

.report-today {
    background: #b7f0fa;
    font-weight: 600;
}

.report-today-btn {
    margin-top: 8px;
    width: 100%;
    font-size: 0.8rem; /* هماهنگ با تم کوچک‌تر */
}



/* =============================== */
/* 🍽️ بخش غذا */
/* =============================== */
/* 🍽️ کارت غذا */
.dash-food-card-content {
      background:#fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
  max-width: 400px;
  margin: 0 auto;
}

/* 📦 قاب عکس با افکت 3D و border سفید */
.dash-food-image-frame {
  width: 100%;
  aspect-ratio: 12 / 9;
  background: linear-gradient(145deg, #f0f0f0, #ffffff);
  border-radius: 18px;
  border: 4px solid #ffffff; /* 🟢 قاب سفید دور عکس */
  box-shadow:
    6px 6px 12px rgba(0, 0, 0, 0.15),
    -4px -4px 10px rgba(255, 255, 255, 0.9),
    inset 0 0 8px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
  transition: all 0.25s ease;
}

/* ✨ افکت hover برای حس واقعی‌تر */
.dash-food-image-frame:hover {
  transform: translateY(-2px);
  box-shadow:
    8px 8px 16px rgba(0, 0, 0, 0.2),
    -5px -5px 12px rgba(255, 255, 255, 0.95),
    inset 0 0 6px rgba(0, 0, 0, 0.05);
}

/* 📸 عکس داخل قاب */
.dash-food-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 15px;
  display: block;
  transition: transform 0.3s ease;
}

/* 🪄 افکت زوم ملایم هنگام hover */
.dash-food-image-frame:hover .dash-food-card-image {
  transform: scale(1.03);
}

/* 🩶 تصویر جایگزین (placeholder) وقتی عکس نیست */
.dash-food-card-placeholder {
  width: 100%;
  height: 100%;
  border-radius: 15px;
  object-fit: cover;
  object-position: center;
  opacity: 0.8;
  filter: grayscale(0.2);
}

/* 🏷️ عنوان غذا */
.dash-food-card-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #333;
  margin-top: 14px;
  text-align: center;
  background: linear-gradient(145deg, #f6f7f8, #ffffff);
  border-radius: 12px;
  padding: 10px 18px;
  display: inline-block;
  box-shadow:
    3px 3px 6px rgba(0, 0, 0, 0.15),
    -3px -3px 6px rgba(255, 255, 255, 0.9);
  border-bottom: 2px solid rgba(0, 0, 0, 0.08);
}

/* ⬆️ ارتفاع کلی ثابت */
.dash-fixed-height {
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}



/* =============================== */
/* 📱 حالت تبلت و موبایل */
@media (max-width: 1200px) {
    .dash-content {
        flex-direction: column;
        align-items: center;
    }
    .dash-calendar-section,
    .dash-food-section {
        width: 100%;
    }
    .dash-food-card-content {
        max-width: 360px;
    }
    .dash-food-card-title {
        font-size: 1rem;
    }
    .dash-calendar-day {
        font-size: 0.9rem;
        padding: 8px 0;
    }
    
  /* تنظیم عرض قاب تصویر غذا */
  .dash-food-image-frame {
    width: 94%; /* عرض قاب 94% */
    aspect-ratio: 12 / 9; /* حفظ نسبت تصویر */
    background: linear-gradient(145deg, #f0f0f0, #ffffff);
    border-radius: 18px;
    border: 4px solid #ffffff;
    box-shadow:
      6px 6px 12px rgba(0, 0, 0, 0.15),
      -4px -4px 10px rgba(255, 255, 255, 0.9),
      inset 0 0 8px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
    transition: all 0.25s ease;
  }

  /* تنظیم تصویر غذا داخل قاب */
  .dash-food-card-image {
    width: 100%; /* 100% عرض قاب */
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 15px;
    display: block;
    transition: transform 0.3s ease;
  }

  /* کاهش 20% ارتفاع باکس غذا */
  .dash-food-section.dash-neumorphic-card.dash-fixed-height {
    min-height: 336px; /* کاهش 20% از ارتفاع اصلی 420px (420 * 0.8 = 336px) */
    background: #fff;
    border-radius: 20px;
    box-shadow: 6px 6px 14px #d0d0d0, -6px -6px 14px #ffffff;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  /* تنظیم کارت غذا برای هماهنگی */
  .dash-food-card-content {
    max-width: 320px; /* حفظ حداکثر عرض */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  /* تنظیم عنوان غذا برای هماهنگی */
  .dash-food-card-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #333;
    margin-top: 14px;
    text-align: center;
    background: linear-gradient(145deg, #f6f7f8, #ffffff);
    border-radius: 12px;
    padding: 10px 18px;
    display: inline-block;
    box-shadow:
      3px 3px 6px rgba(0, 0, 0, 0.15),
      -3px -3px 6px rgba(255, 255, 255, 0.9);
    border-bottom: 2px solid rgba(0, 0, 0, 0.08);
  }
}

@media (max-width: 768px) {
    .dash-container {
        padding: 12px;
    }
    .dash-calendar-day {
        font-size: 0.8rem;
        padding: 6px 0;
    }
    .dash-food-card-content {
        max-width: 320px;
    }
    .dash-food-card-title {
        font-size: 0.95rem;
    }
}

@media (max-width: 480px) {
    .dash-calendar-header {
        font-size: 0.8rem;
    }
    .dash-calendar-day {
        font-size: 0.75rem;
        padding: 5px 0;
    }
    .dash-food-card-content {
        max-width: 280px;
    }
}







/* =========================================================
   استایل اختصاصی برای بخش رزرو غذا - تقویم و دکمه‌ها (dash-style)
   ========================================================= */
/* هدر کلی */
.foodresv-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 10px;
  gap: 10px;
  border-bottom: 1px solid #ddd;
}

/* بخش کنترل ماه و عنوان */
.foodresv-controls {
  display: flex;
  align-items: center; /* تراز عمودی دقیق */
  justify-content: center; /* همه عناصر وسط‌چین در یک خط */
  gap: 8px; /* فاصله کمتر برای فشردگی بهتر */
  height: 56px; /* ارتفاع ثابت برای تراز دقیق */
}

/* دکمه‌های prev و next */
.foodresv-btn-prev,
.foodresv-btn-next {
  background: none;
  border: none;
  color: var(--primary); /* رنگ فیروزه‌ای مشابه داشبورد (#0ea5b7) */
  font-size: 1.75rem; /* 30% کوچیک‌تر از 2.5rem */
  cursor: pointer;
  padding: 0; /* حذف padding برای کنترل دقیق‌تر */
  line-height: 1; /* تراز عمودی با فونت */
  transition: color 0.3s; /* فقط رنگ تغییر کنه */
  height: 56px; /* حفظ ارتفاع ثابت */
  width: 40px; /* حفظ عرض ثابت */
  display: flex; /* تراز دقیق‌تر */
  align-items: center; /* متن رو وسط‌چین عمودی */
  justify-content: center; /* متن رو وسط‌چین افقی */
}

/* hover فقط رنگ تغییر کند */
.foodresv-btn-prev:hover:not(:disabled),
.foodresv-btn-next:hover:not(:disabled) {
  color: var(--primary-dark); /* رنگ تیره‌تر فیروزه‌ای مشابه داشبورد (#0b8f96) */
}

/* دکمه disabled */
.foodresv-btn-prev:disabled,
.foodresv-btn-next:disabled {
  color: #ccc; /* خاکستری برای غیرفعال */
  cursor: not-allowed;
}

/* ترازبندی prev و next با عنوان */
.foodresv-btn-prev {
  order: 1; /* سمت چپ */
  align-self: center; /* تراز با بقیه عناصر */
  transform: translateY(2px); /* جابجایی ثابت 2 پیکسل به پایین */
}

.foodresv-title {
  order: 2;
  font-size: 22px;
  font-weight: 600;
  white-space: nowrap;
  color: #222;
  text-align: center;
  margin: 0; /* حذف margin برای تراز دقیق */
  line-height: 1; /* تراز عمودی دقیق با دکمه‌ها */
  display: flex; /* همسان با دکمه‌ها */
  align-items: center; /* تراز عمودی با دکمه‌ها */
}

.foodresv-btn-next {
  order: 3; /* سمت راست */
  align-self: center; /* تراز با بقیه عناصر */
  transform: rotate(180deg); /* فقط چرخش بدون جابجایی */
}

/* دکمه‌های اکشن */
.foodresv-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.foodresv-action-btn {
  font-size: 28px;
  padding: 6px 10px;
  background: none;
  border: none;
  cursor: pointer;
}

/* موبایل */
@media (max-width: 768px) {
  .foodresv-controls {
    gap: 6px;
    height: 56px; /* حفظ ارتفاع ثابت */
  }

  .foodresv-title {
    font-size: 18px;
  }

  .foodresv-btn-prev,
  .foodresv-btn-next {
    font-size: 23.8px; /* 30% کوچیک‌تر از 34px */
  }

  .foodresv-action-btn {
    font-size: 24px;
  }
}




@media (max-width: 768px) {
    .table-wrapper {
        display: block !important;
        overflow-x: auto;
    }
}


@media (max-width: 768px) {


    .btn-primary.btn-sm {
        background: var(--primary);
        color: #fff;
    }

    .btn-danger.btn-sm {
        background: var(--danger);
        color: #fff;
    }

    .btn-success.btn-sm {
        background: var(--success);
        color: #fff;
    }

    .btn-sm:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    /* تنظیم خاص برای hover دکمه‌ها */
    .btn-primary.btn-sm:hover {
        background: var(--primary-dark);
    }

    .btn-danger.btn-sm:hover {
        background: #dc2626; /* تیره‌تر از var(--danger) */
    }

    .btn-success.btn-sm:hover {
        background: #0f9b6e; /* تیره‌تر از var(--success) */
    }
}















/* =========================================================
   بخش: تغییرات در کارت‌های غذا در دراپ‌داون رزرو و پاپ‌آپ انتخاب غذا
   توضیح: این بخش استایل‌های مربوط به تصاویر غذا در دراپ‌داون‌های رزرو غذا (وقتی رزرو شده‌اند) و پاپ‌آپ انتخاب غذا را در حالت موبایل اصلاح می‌کند.
   ========================================================= */
@media (max-width: 768px) {
  /* تنظیمات تصویر غذا در دراپ‌داون رزرو غذا (وقتی رزرو شده) */
  .reserve-mobile-food {
    display: flex;
    flex-direction: column; /* چیدمان ستونی برای قرار گرفتن نام زیر تصویر */
    align-items: center;
    gap: 8px;
    padding: 8px 0;
  }

  /* تصویر غذا در دراپ‌داون وقتی رزرو شده */
  .reserve-mobile-food img {
    width: 94%; /* 100% عرض دراپ‌داون */
    height:124px;
    aspect-ratio: 19 / 9; /* نسبت تصویر 19:9 */
    border-radius: 10px;
    object-fit: cover;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  }

  /* اطلاعات غذا در دراپ‌داون */
  .reserve-mobile-food-info {
    text-align: center;
    width: 100%;
  }

  .reserve-mobile-food-info h4 {
    font-size: 1rem;
    font-weight: 500;
    color: inherit;
    margin: 0;
  }

  .reserve-mobile-food-info p {
    font-size: 0.85rem;
    color: var(--muted);
    margin: 0;
  }

  /* تنظیم تصویر در پاپ‌آپ انتخاب غذا (modal) */
  .modal .food-card-image {
    width: 94%;
    height: 144px; /* کاهش 40% از ارتفاع اصلی 140px (140 * 0.6 = 84px) */
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }

  /* دکمه‌های تأیید و لغو در پاپ‌آپ */
  .modal .flex.gap-2.mt-4 {
    position: sticky;
    bottom: 10px;
    right: 10px;
    justify-content: left; /* دکمه‌ها به سمت راست (در RTL سمت چپ) */
    z-index: 10;
    width: 100%;
    padding: 10px 0;
  }
.modal .food-card-container {
    width: 94%;
    
}

.flexleft .gap-2 .justify-start .mt-4{
        margin-left:auto;
            justify-content: left;
}
  .modal .btn-primary {
    background: var(--primary);
    color: #fff;
    border-radius: 10px;
    padding: 0.6rem 1rem;
    font-size: 0.95rem;
    margin-left:auto;
  }

  .modal .btn-cancel {
    background: var(--cancel);
    color: #fff;
    border-radius: 10px;
    padding: 0.6rem 1rem;
    font-size: 0.95rem;
        margin-left:auto;
  }

  /* اطمینان از رنگ متن دکمه‌ها در روزهای تعطیل */
  .reserve-mobile-day.holiday-friday .btn,
  .reserve-mobile-day.holiday-thursday .btn {
    color: #fff !important;
  }
  
    .no-food-text {
    font-size: 0.9rem;
    color: var(--muted);
    text-align: center; /* وسط‌چین افقی */
    display: flex; /* استفاده از flex برای کنترل دقیق‌تر */
    justify-content: center; /* وسط‌چین افقی */
    align-items: center; /* وسط‌چین عمودی */
    width: 100%; /* اطمینان از پر کردن عرض */
    padding: 10px 0;
    margin: 0; /* حذف حاشیه‌های اضافی */
  }
}










/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++




/* =========================================================
   بخش: اصلاح دکمه‌های Edit و Delete در جدول‌های مدیریت در نمای موبایل
   توضیح: این بخش استایل‌های سلول‌های جدول را اصلاح می‌کند تا دکمه‌های Edit و Delete در نمای موبایل به زیر ستون سمت راست منتقل نشوند و در سلول خودشان وسط‌چین و در یک خط بمانند.
   ========================================================= */
@media (max-width: 768px) {
  /* اطمینان از نمایش جدول در موبایل */
  .table-wrapper {
    display: block !important;
    overflow-x: auto;
    width: 100%;
    box-sizing: border-box;
  }

  /* تنظیم جدول برای رفتار صحیح */
  .table-wrapper table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed; /* ثابت کردن عرض ستون‌ها */
  }

  /* تنظیم سلول‌های جدول */
  .table-wrapper table tbody td {
    padding: 0.4rem;
    min-width: 100px; /* حداقل عرض برای سلول‌ها */
    vertical-align: middle; /* وسط‌چین عمودی */
    text-align: center; /* وسط‌چین افقی */
  }

  /* تنظیم سلول حاوی دکمه‌ها */
  .table-wrapper table tbody td:last-child {
    display: flex;
    flex-wrap: nowrap; /* جلوگیری از wrap شدن دکمه‌ها */
    justify-content: center; /* وسط‌چین افقی */
    align-items: center; /* وسط‌چین عمودی */
    gap: 6px; /* فاصله بین دکمه‌ها */
    padding: 0.4rem;
    min-width: 120px; /* فضای کافی برای دکمه‌ها */
  }

  /* تنظیم دکمه‌های Edit و Delete */
  .table-wrapper table tbody td .btn.btn-sm {
    padding: 0.3rem 0.6rem; /* پدینگ کمتر برای فشردگی */
    font-size: 0.75rem; /* فونت کوچکتر */
    border-radius: 6px; /* گوشه‌های کوچکتر */
    min-width: 48px; /* حداقل عرض برای خوانایی */
    line-height: 1.2; /* کاهش ارتفاع خط */
    flex-shrink: 0; /* جلوگیری از کوچک شدن */
    white-space: nowrap; /* جلوگیری از شکستن متن */
  }

  /* تنظیم خاص برای دکمه‌های Edit و Delete */
  .table-wrapper table tbody td .btn-primary,
  .table-wrapper table tbody td .btn-danger {
    flex-shrink: 0; /* جلوگیری از کوچک شدن دکمه‌ها */
  }
}




/* حفظ استایل‌های دسکتاپ در رزولوشن‌های پایین */
@media (min-width: 769px) {
  .table-wrapper {
    display: block !important;
    overflow-x: auto;
    min-width: 524px; /* حداقل عرض جدول */
    width: 100%;
  }

  .table-wrapper table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed; /* ثابت کردن عرض ستون‌ها */
    background: var(--surface);
    border-radius: var(--radius);
  }

  .table-wrapper table tbody td {
    padding: 0.5rem;
    display: table-cell; /* حفظ رفتار جدول در دسکتاپ */
    text-align: center;
    vertical-align: middle;
  }

  .table-wrapper table tbody td:last-child {
    display: table-cell; /* رفتار عادی سلول در دسکتاپ */
  }

  .table-wrapper table tbody td .btn.btn-sm {
    padding: 0.5rem 1rem;
    font-size: var(--font-size-base);
    border-radius: var(--radius);
    min-width: 60px;
  }

  /* مخفی کردن نمای موبایل در دسکتاپ */
  .mobile-only {
    display: none !important;
  }
}

/* اعمال استایل‌های موبایل فقط برای دستگاه‌های لمسی */
@media (max-width: 768px) and (hover: none) {
  .table-wrapper {
    display: block !important;
    overflow-x: auto;
    width: 100%;
  }

  .table-wrapper table tbody td:last-child {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
    min-width: 120px;
  }
}



@media (max-width: 768px) {
  /* مخفی کردن عناصر با کلاس hideme در موبایل */
  .hideme {
    display: none !important; /* مخفی کردن عناصر */
  }
  
  .btn-ghost {
  background: #e5e7eb;
  border: none;
  color: var(--muted);
  padding: var(--btn-padding);
  font-size: var(--font-size-base);
  line-height: 1.5;
  width: 70PX;
  height: 40PX;
  margin-bottom:14px;
}

}




@media (max-width: 768px) {
  /* تنظیم کانتینر دکمه‌های تأیید و لغو در مودال با انتخاب‌گر مشخص‌تر */
  .modal .flex.gap-2.mt-4 {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important; /* وسط‌چین برای حالت پایدار */
    align-items: center !important;
    gap: 8px !important;
    position: absolute !important;
    bottom: 10px !important;
    left: 50% !important;
    transform: translateX(-50%) !important; /* وسط‌چین دقیق */
    right: auto !important;
    width: auto !important;
    padding: 10px !important;
    z-index: 1000 !important;
    direction: rtl !important;
  }

  /* تنظیم دکمه‌های تأیید و لغو */
  .modal .flex.gap-2.mt-4 .btn-primary,
  .modal .flex.gap-2.mt-4 .btn-cancel {
    padding: 0.6rem 1rem !important;
    font-size: 0.95rem !important;
    border-radius: 10px !important;
    min-width: 80px !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }

  /* تنظیم خاص برای دکمه تأیید */
  .modal .flex.gap-2.mt-4 .btn-primary {
    background: var(--primary) !important;
    color: #fff !important;
  }

  /* تنظیم خاص برای دکمه لغو */
  .modal .flex.gap-2.mt-4 .btn-cancel {
    background: var(--cancel) !important;
    color: #fff !important;
  }

  /* اطمینان از رنگ متن دکمه‌ها در روزهای تعطیل */
  .reserve-mobile-day.holiday-friday .modal .flex.gap-2.mt-4 .btn,
  .reserve-mobile-day.holiday-thursday .modal .flex.gap-2.mt-4 .btn {
    color: #fff !important;
  }

  /* گزینه برای چسباندن به چپ واقعی (force-left) */
  .modal .flex.gap-2.mt-4.force-left {
    justify-content: flex-start !important; /* در RTL به چپ واقعی */
    left: 10px !important;
    right: auto !important;
    transform: none !important;
  }
}


@media (max-width: 768px) {
  .modal .form-grid {
    grid-template-columns: 1fr; /* یک ستون در موبایل */
  }
}

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++


/* =========================================================
   بخش: مدیریت آرشیو (Archive)
   توضیح: استایل‌های اختصاصی برای بخش آرشیو با پیشوند arc_
   ========================================================= */
.arc_card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem;
  margin-bottom: 1.5rem;
}

.arc_h2 {
  font-size: var(--font-size-title);
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--text);
}

.arc_upload-section {
  position: relative;
}

.arc_button-container {
  padding: 0;
  background: none;
  border: none;
  margin-top: 1rem;
  display: flex;
  justify-content: flex-end;
}

.arc_form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
}

.arc_form-group label {
  font-weight: 700;
  margin-bottom: 0.5rem;
  font-size: var(--font-size-base);
}

.arc_input {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  font-size: var(--font-size-base);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.arc_input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(14, 165, 183, 0.2);
}

.arc_date-input-wrapper {
  position: relative;
}

.arc_date-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 1.2rem;
  z-index: 1;
}

.arc_form-grid {
  display: grid;
  gap: 1rem;
  margin-bottom: 1rem;
  grid-template-columns: repeat(2, 1fr);
}

.arc_report-controls {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.arc_date-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  direction: rtl;
  margin-top: 0.5rem;
}

.arc_table-wrapper {
  overflow-x: auto;
  margin-top: 1rem;
  max-height: 400px; /* ارتفاع ثابت برای اسکرول */
  overflow-y: auto; /* اسکرول عمودی فعال */
}

.arc_table-wrapper::-webkit-scrollbar {
  width: 8px; /* عرض اسکرول‌بار */
}

.arc_table-wrapper::-webkit-scrollbar-track {
  background: var(--surface); /* پس‌زمینه اسکرول‌بار */
}

.arc_table-wrapper::-webkit-scrollbar-thumb {
  background-color: rgba(200, 200, 200, 0.5); /* رنگ توسی روشن‌تر */
  border-radius: 4px; /* گوشه‌های گرد */
}

.arc_table-wrapper::-webkit-scrollbar-thumb:hover {
  background-color: rgba(180, 180, 180, 0.7); /* رنگ روشن‌تر موقع هورور */
}

.arc_table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border-radius: var(--radius);
}

.arc_thead th {
  background: rgba(14, 165, 183, 0.06);
  color: var(--primary-dark);
  padding: 0.75rem;
  font-weight: 700;
  text-align: center;
}

.arc_tbody td {
  padding: 0.65rem;
  text-align: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.arc_btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: var(--radius);
  border: none;
  font-weight: 600;
  font-size: var(--font-size-base);
  cursor: pointer;
  line-height: 1.5;
  margin-left: 2px;
  margin-right: 2px;
}

.arc_btn-primary {
  background: var(--primary);
  color: #fff;
}

.arc_btn-primary:hover {
  background: var(--primary-dark);
}

.arc_btn-ghost {
  background: var(--cancel);
  color: #fff;
}

.arc_btn-ghost:hover {
  background: #8f96a3;
}

.arc_btn-success {
  background: var(--success);
  color: #fff;
}

.arc_btn-success:hover {
  background: #0f9b6e;
}

.arc_btn-warning {
  background: #f59e0b;
  color: #fff;
}

.arc_btn-warning:hover {
  background: #d97706;
}

.arc_btn-danger {
  background: var(--danger);
  color: #fff;
}

.arc_btn-danger:hover {
  background: #dc2626;
}

.arc_modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* کم‌نور کردن صفحه */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.arc_modal {
  background: var(--surface);
  padding: 1.5rem;
  border-radius: var(--radius);
  width: 90%;
  max-width: 400px;
  box-shadow: var(--shadow);
  position: relative;
}

.arc_modal h2 {
  font-size: var(--font-size-title);
  margin-bottom: 1rem;
  color: var(--text);
}

@media (max-width: 768px) {
  .arc_form-group {
    width: 100%;
  }

  .arc_date-controls {
    flex-direction: column;
    align-items: stretch;
  }

  .arc_table-wrapper {
    display: block !important;
    overflow-x: auto;
  }

  .arc_table tbody td:last-child {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
    min-width: 120px;
  }
}


/* -------------------------------------------------------



  /* رنگ خاکستری برای روزهای تعطیل */
  .reserve-mobile-day.holiday-friday,
  .reserve-mobile-container .reserve-mobile-day.holiday-friday {
    background: #0E2D34 !important; /* خاکستری تیره برای جمعه */
    color: #fff !important;
  }

  .reserve-mobile-day.holiday-thursday,
  .reserve-mobile-container .reserve-mobile-day.holiday-thursday {
    background: #1F6373 !important; /* خاکستری روشن‌تر برای پنج‌شنبه */
    color: #fff !important;
  }



/* نمای دسکتاپ */
.table-wrapper table tbody tr.holiday-friday {
    background: #0E2D34 !important; /* رنگ تیره برای جمعه */
    color: #fff !important; /* متن سفید */
}

.table-wrapper table tbody tr.holiday-thursday {
    background: #1F6373 !important; /* رنگ روشن‌تر برای پنج‌شنبه */
    color: #fff !important; /* متن سفید */
}

/* اطمینان از اینکه سلول‌های داخل ردیف‌ها رنگ پس‌زمینه ردیف را به ارث می‌برند */
.table-wrapper table tbody tr.holiday-friday td,
.table-wrapper table tbody tr.holiday-thursday td {
    background: inherit !important;
    color: #fff !important;
}







/* --------------------------------------------------------
/* --------------------------------------------------------*/





 
/* --------------------------------------------------------
/* =========================================================
   بخش: کوچک کردن 10% اجزای دسکتاپ (به جز sidebar و body)
   توضیح: فقط برای دسکتاپ، ارتفاع sidebar و عرض body ثابت می‌مونه
   ========================================================= */
@media (min-width: 769px) {
  
  /* 🔒 حفظ عرض body و ارتفاع sidebar */
  .main-content {
    width: 94% !important; /* عرض body ثابت 94% */
  }
  
  .sidebar {
    height: calc(100vh - 2rem) !important; /* ارتفاع sidebar ثابت */
  }
  
  .content-header {
    width: calc(94% - 4.2rem) !important; /* تنظیم هدر متناسب با body */
    right: calc(var(--sidebar-width) + 2.8rem) !important;
  }
  
  /* 📏 کوچک کردن 10% همه اجزای دیگه */
  
  /* فونت‌ها */
  :root {
    --font-size-base: 0.855rem; /* 0.95 * 0.9 = 0.855 */
    --font-size-title: 1.26rem; /* 1.4 * 0.9 = 1.26 */
    --font-size-sidebar-title: 1.35rem; /* 1.5 * 0.9 = 1.35 */
    --font-size-sidebar-subtitle: 0.99rem; /* 1.1 * 0.9 = 0.99 */
  }
  
  /* کارت‌ها */
  .card {
    padding: 0.9rem !important; /* 1rem * 0.9 */
    margin-bottom: 0.9rem !important;
    border-radius: 9px !important; /* 10px * 0.9 */
  }
  
  /* فرم‌ها و input ها */
  .form-grid {
    gap: 0.675rem !important; /* 0.75rem * 0.9 */
    grid-template-columns: repeat(auto-fit, minmax(198px, 1fr)) !important; /* 220px * 0.9 */
  }
  
  input, select, textarea, .input {
    padding: 0.63rem 0.765rem !important; /* 0.7rem و 0.85rem * 0.9 */
    font-size: 0.855rem !important;
    border-radius: 9px !important;
  }
  
  /* دکمه‌ها */
  .btn {
    padding: 0.45rem 0.9rem !important; /* 0.5rem و 1rem * 0.9 */
    font-size: 0.855rem !important;
    border-radius: 9px !important;
    margin-left: 1.8px !important; /* 2px * 0.9 */
    margin-right: 1.8px !important;
  }
  
  /* جداول */
  thead th, tbody td {
    padding: 0.585rem !important; /* 0.65rem * 0.9 */
  }
  
  thead th {
    padding: 0.675rem !important; /* 0.75rem * 0.9 */
  }
  
  /* مودال‌ها */
  .modal, .confirm-modal, .edit-modal {
    padding: 1.35rem !important; /* 1.5rem * 0.9 */
    width: 540px !important; /* 600px * 0.9 */
    border-radius: 9px !important;
  }
  
  /* کارت‌های غذا */
  .food-card {
    padding: 0.9rem !important;
    border-radius: 14.4px !important; /* 16px * 0.9 */
  }
  
  .food-card-image {
    height: 126px !important; /* 140px * 0.9 */
    border-radius: 10.8px !important; /* 12px * 0.9 */
  }
  
  /* داشبورد */
  .dash-container {
    padding: 18px !important; /* 20px * 0.9 */
    gap: 18px !important;
    border-radius: 14.4px !important; /* 16px * 0.9 */
  }
  
  .dash-neumorphic-card {
    padding: 18px !important; /* 20px * 0.9 */
    border-radius: 18px !important; /* 20px * 0.9 */
  }
  
  /* هدر محتوا */
  .content-header {
    padding: 0 1.35rem !important; /* 1.5rem * 0.9 */
    height: var(--header-height) !important; /* ارتفاع هدر ثابت */
    border-radius: 9px !important;
  }
  
  .content-header h1 {
    font-size: 1.26rem !important; /* 1.4rem * 0.9 */
  }
  
  /* محتوای اصلی */
  .main-content {
    padding: calc(var(--header-height) + 13.5px) 1.35rem 1.35rem 1.35rem !important; /* 15px و 1.5rem * 0.9 */
  }
  
  /* سایدبار (فقط padding کوچک بشه، ارتفاع ثابت بمونه) */
  .sidebar {
    padding: 1.35rem !important; /* 1.5rem * 0.9 */
  }
  
  .sidebar-header {
    padding: 0.9rem !important;
    border-radius: 10.8px !important; /* 12px * 0.9 */
    margin-bottom: 0.9rem !important;
  }
  
  .sidebar-content button {
    padding: 0.63rem 0.72rem !important; /* 0.7rem و 0.8rem * 0.9 */
    border-radius: 7.2px !important; /* 8px * 0.9 */
  }
  
  /* Rating chart */
  .ratings-grid-joined {
    border-radius: 9px !important;
  }
  
  .rating-row {
    padding: 0.72rem 0.9rem !important; /* 0.8rem و 1rem * 0.9 */
  }
  
  .rating-bar {
    height: 10.8px !important; /* 12px * 0.9 */
    border-radius: 5.4px !important; /* 6px * 0.9 */
  }
  
  /* ستاره‌ها */
  .star-rating {
    gap: 0.36rem !important; /* 0.4rem * 0.9 */
  }
  
  .star {
    font-size: 1.35rem !important; /* 1.5rem * 0.9 */
  }
  
  /* لوگو سایدبار (فقط در صورت نیاز) */
  .sidebar-logo {
    width: 262.8px !important; /* 292px * 0.9 */
    height: 216.9px !important; /* 241px * 0.9 */
  }
  
  /* دکمه‌های پرینت */
  .print-btn {
    padding: 0.54rem 1.08rem !important; /* 0.6rem و 1.2rem * 0.9 */
  }
  
  /* Toast */
  .toast {
    padding: 0.9rem 1.8rem !important; /* 1rem و 2rem * 0.9 */
  }
}





/* تنظیمات ریسپانسیو برای موبایل */
@media (max-width: 768px) {
  .container {
    zoom: 1; /* زوم رو توی موبایل به حالت عادی (100%) برمی‌گردونه */
    width: 100%;
    max-width: 100%;
    overflow-x: hidden; /* جلوگیری از اسکرول افقی توی موبایل */
  }
}







.content-header {
  position: fixed;
  top: 15px;
  right: calc(var(--sidebar-width) + 2.8rem); /* فاصله از سایدبار در سمت راست */
  left: 15px; /* فاصله 24px از لبه چپ */
  width: calc(100% - var(--sidebar-width) - 2.8rem - 17px); /* عرض دقیق با کسر فاصله‌ها */
  background: var(--surface);
  height: var(--header-height);
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
  justify-content: space-between;
  border-radius: var(--radius);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  z-index: 6;
}

@media (min-width: 769px) {
  .content-header {
    width: calc(100% - var(--sidebar-width) - 2.8rem - 17px) !important; /* عرض دقیق */
    right: calc(var(--sidebar-width) + 2.8rem) !important; /* فاصله از سایدبار */
    left: 15px !important; /* فاصله 24px از چپ */
  }
}



/* =========================================================
   بخش: اصلاح هدر برای نمای موبایل
   توضیح: این بخش اطمینان می‌دهد که هدر در نمای موبایل کل عرض صفحه را پوشش می‌دهد.
   ========================================================= */
@media (max-width: 768px) {
  :root {
    --header-height: 60px;
  }

  .header-mask {
    width: 100%;
    left: 0;
    right: 0;
  }

  .content-header {
    width: calc(100% - 2rem); /* تنظیم عرض هدر برای موبایل */
    right: 1rem;
    left: 1rem;
    z-index:6;
  }
   .content-header h1 {
    text-align: center; /* وسط‌چین کردن عنوان در هدر */
  }

  .menu-toggle {
    top: calc((var(--header-height) - 26px) / 2 + 15px); /* وسط هدر جدید */
  }
}


@media (max-width: 768px) {
  .modal .food-card-container {
    grid-template-columns: repeat(2, 1fr); /* دو کارت در هر ردیف */
    gap: 0.75rem; /* نصف فاصله اصلی (1.5rem * 0.5) */
    width: 94%;
    padding: 0.5rem;
    max-height: 70vh;
    overflow-y: auto;
    scrollbar-width: none;
  }

  .modal .food-card-container::-webkit-scrollbar {
    display: none;
  }

  .modal .food-card {
    width: 100%; /* عرض کامل نسبت به ستون */
    padding: 0.5rem; /* نصف پدینگ اصلی (1rem * 0.5) */
    border-radius: 8px; /* نصف شعاع اصلی (16px * 0.5) */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* سایه متناسب با اندازه کوچکتر */
  }

  .modal .food-card-image {
    width: 94%;
    height: 72px; /* نصف ارتفاع اصلی (144px * 0.5) */
    border-radius: 6px; /* نصف شعاع اصلی (12px * 0.5) */
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); /* سایه متناسب */
  }

  .modal .food-card-title {
    font-size: 1rem; /* نصف فونت اصلی (1.1rem * 0.5) */
  }

  .modal .food-card-type {
    font-size: 0.7rem; /* نصف فونت اصلی (0.9rem * 0.5) */
  }

  .modal .flex.gap-2.mt-4 {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    position: absolute !important;
    bottom: 10px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    right: auto !important;
    width: auto !important;
    padding: 10px !important;
    z-index: 1000 !important;
    direction: rtl !important;
  }

  .modal .flex.gap-2.mt-4 .btn-primary,
  .modal .flex.gap-2.mt-4 .btn-cancel {
    padding: 0.6rem 1rem !important;
    font-size: 0.95rem !important;
    border-radius: 10px !important;
    min-width: 80px !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }
}









/* استایل برای چک‌باکس در جدول دسکتاپ */
.dinner-checkbox-cell {
  text-align: center;
  padding: 0.65rem;
}

.dinner-checkbox-cell input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--primary); /* رنگ چک‌باکس هنگام انتخاب */
  cursor: pointer;
  border: 1px solid var(--border);
  border-radius: 4px;
  transition: all 0.2s ease;
}

.dinner-checkbox-cell input[type="checkbox"]:disabled {
  accent-color: var(--muted);
  cursor: not-allowed;
}

/* استایل برای چک‌باکس در موبایل */
.dinner-checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}

.dinner-checkbox label {
  display: flex;
  align-items: center;
  font-size: var(--font-size-base);
  color: var(--text);
  cursor: pointer;
}

.dinner-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-left: 8px;
  accent-color: var(--primary);
  border: 1px solid var(--border);
  border-radius: 4px;
  transition: all 0.2s ease;
}

.dinner-checkbox input[type="checkbox"]:disabled + label {
  color: var(--muted);
  cursor: not-allowed;
}

/* انیمیشن برای چک‌باکس */
.dinner-checkbox input[type="checkbox"]:checked {
  background-color: var(--primary);
  border-color: var(--primary-dark);
}


































/* CSS اختصاصی برای popup انتخاب غذا */
.food-modal {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 20px;
    width: 70%; /* ۷۰٪ عرض کل صفحه */
    max-width: none; /* محدودیت max-width رو برداشتم */
    margin: 0 auto; /* فقط افقی مرکز */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 2002;
    height: 70%; /* ۶۰٪ ارتفاع صفحه */
    overflow-y: auto; /* اسکرول عمودی */
    display: flex;
    flex-direction: column;
}

.din_modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2001;
}

.food-modal .food-modal-content {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* ۴ کارت توی هر ردیف */
    gap: 16px;
    flex: 1; /* محتوا فضای موجود رو پر کنه */
    overflow-y: auto; /* اسکرول جدا برای محتوا */
}

.food-card-large {
    height: 200px; /* کارت‌ها بزرگ‌تر */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.food-card-large img {
    height: 120px; /* تصویر بزرگ‌تر */
    width: 100%;
    object-fit: cover;
    margin-bottom: 10px;
}

.food-card-large h3 {
    margin: 5px 0;
    font-size: 1rem;
}

.food-card-large p {
    margin: 0;
    font-size: 0.9rem;
}

.button-container {
    text-align: right;
    padding: 10px 0;
    background-color: #ffffff; /* background برای دکمه */
    position: sticky; /* ثابت بمونه توی پایین */
    bottom: 0;
    z-index: 2003; /* بالاتر از food card‌ها */
    border-top: 2px solid #ffffff; /* نوار بالای دکمه با رنگ popup */
}

.button-container .btn {
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
}

.button-container .btn-ghost {
    background-color: transparent;
    border: 1px solid #ccc;
    color: #333;
}
.arc_btn-disabled {
    background-color: #ccc !important; /* خاکستری */
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
    color: #666 !important; /* متن خاکستری */
}

























/* کانتینر تب برای کارت غذا */
.tab {
    display: flex;
    justify-content: flex-end; /* تب‌ها به سمت راست کانتینر بچسبند */
    position: relative;        /* موقعیت دکمه‌ها نسبی به این کانتینر */
    width: 100%;
    margin-bottom: -10px;       /* فاصله از کارت غذا */
    height: 50px;
    z-index:0;
    padding-left:4px;
}

/* دکمه‌های تب */
.tablinks {
    background-color: #f1f1f1;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 8px 16px;
    font-size: 14px;
    border-radius: 10px 10px 0 0;  /* گردی فقط بالای دکمه */
    box-shadow: 0 -3px 6px rgba(0, 0, 0, 0.15);
    margin-left: 2px;             /* فاصله بین تب‌ها */
    z-index: 0;                    /* روی کارت باشند */
}

/* افکت hover */
.tablinks:hover {
    background-color: #e6e6e6;
    transform: translateY(-2px);
    box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.25);
}

/* تب فعال */
.tablinks.active {
    background-color: #ffffff;
    color: #333;
    box-shadow: 0 -6px 12px rgba(0, 0, 0, 0.25);
        z-index: 4;
}





/* dashboard.css */
.page-container {
    position: relative;
}

.tab-container {
    position: relative;
    z-index: 2; /* بالای dash-container */
    
}

.tablinks {
    position: relative;
    z-index: 1; /* دکمه‌های غیر فعال */
}

.tablinks.active {
    position: relative; /* داخل flow */
    z-index: 5; /* بالاتر از dash-container */
}

.dash-container {
    position: relative;
    z-index: 2; /* زیر تب‌ها */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* فقط پایین سایه */
}

















/* excel-upload-modal.css */

/* مودال اصلی */
.excel-upload-modal {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* پس‌زمینه تیره با شفافیت */
    z-index: 2000; /* بالاتر از سایر مودال‌ها */
    direction: rtl; /* جهت راست‌به‌چپ */
}

/* محتوای مودال */
.excel-upload-modal-content {
    background: #ffffff;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 480px; /* عرض ثابت برای زیبایی */
    text-align: right; /* متن راست‌چین */
    animation: slideIn 0.3s ease-out; /* انیمیشن ورود */
}

/* انیمیشن ورود مودال */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* عنوان مودال */
.excel-upload-modal-content h3 {
    font-size: 1.6rem;
    font-weight: 700;
    color: #1f2937; /* خاکستری تیره */
    margin-bottom: 20px;
    text-align: right;
}

/* گرید فرم */
.excel-upload-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* دو ستون */
    gap: 16px;
    margin-bottom: 24px;
}

/* گروه چک‌باکس */
.excel-upload-form-group {
    display: flex;
    flex-direction: column; /* چک‌باکس‌ها زیر هم */
    gap: 12px;
}

/* لیبل چک‌باکس */
.excel-upload-form-group label {
    display: flex;
    align-items: center;
    font-size: 1rem;
    color: #374151; /* خاکستری متوسط */
    cursor: pointer;
}

/* چک‌باکس */
.excel-upload-form-group input[type="checkbox"] {
    appearance: none; /* حذف استایل پیش‌فرض */
    width: 18px;
    height: 18px;
    border: 2px solid #4b5563; /* خاکستری تیره برای حاشیه */
    border-radius: 4px;
    margin-left: 8px;
    cursor: pointer;
    position: relative;
    background: transparent; /* بدون پس‌زمینه */
}

/* استایل چک‌باکس انتخاب‌شده */
.excel-upload-form-group input[type="checkbox"]:checked {
    background: #06b6d4; /* رنگ فیروزه‌ای برای چک‌باکس انتخاب‌شده */
    border-color: #06b6d4;
}

/* علامت تیک در چک‌باکس */
.excel-upload-form-group input[type="checkbox"]:checked::after {
    content: '✔';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    font-size: 12px;
}

/* دکمه‌ها */
.excel-upload-modal-content .excel-upload-btn-container {
    display: flex;
    justify-content: center;
    gap: 16px;
}

/* دکمه تأیید */
.excel-upload-modal-content .btn-primary {
    background: #06b6d4; /* فیروزه‌ای */
    color: #ffffff;
    padding: 10px 24px;
    font-size: 1rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.excel-upload-modal-content .btn-primary:hover {
    background: #0891b2; /* فیروزه‌ای تیره‌تر */
}

/* دکمه لغو */
.excel-upload-modal-content .btn-secondary {
    background: #e5e7eb; /* خاکستری روشن */
    color: #374151;
    padding: 10px 24px;
    font-size: 1rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.excel-upload-modal-content .btn-secondary:hover {
    background: #d1d5db; /* خاکستری کمی تیره‌تر */
}

/* پاسخ‌گویی برای موبایل */
@media (max-width: 480px) {
    .excel-upload-modal-content {
        max-width: 90%;
        padding: 16px;
    }

    .excel-upload-form-grid {
        grid-template-columns: 1fr; /* تک‌ستونی در موبایل */
        gap: 12px;
    }

    .excel-upload-modal-content h3 {
        font-size: 1.4rem;
    }
}





/* استایل برای فیکس کردن فوتر دکمه‌ها در پایین مدال */
.confirm-modal-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px 20px;
    background: #fff; /* یا رنگ پس‌زمینه مدال */
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    box-sizing: border-box;
}

.confirm-modal {
    position: relative; /* برای کار کردن absolute در فوتر */
    min-height: 150px; /* حداقل ارتفاع برای جلوگیری از برش محتوا */
    display: flex;
    flex-direction: column;
}

.confirm-modal-content {
    flex: 1;
    padding: 20px;
    overflow-y: auto; /* اسکرول اگر محتوا زیاد باشه */
}






/* استایل برای مدال‌ها */
.modal {
    position: relative;
    background: white;
    border-radius: 8px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    min-height: 200px;
}
.modal-content {
    flex: 1;
    overflow-y: auto; /* اسکرول‌پذیری محتوا */
    -ms-overflow-style: none; /* مخفی کردن اسکرول‌بار در IE/Edge */
    scrollbar-width: none; /* مخفی کردن اسکرول‌بار در Firefox */
}
.modal-content::-webkit-scrollbar {
    display: none; /* مخفی کردن اسکرول‌بار در Chrome/Safari */
}
.modal-footer {
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px 20px;
    background: #fff;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    box-sizing: border-box;
    height:60px;
}
.modal-footer button {
    width: 100%; /* هم‌سایز کردن دکمه‌ها */
    height:50px;
    padding: 10px; /* یکنواخت کردن پدینگ */
    text-align: center;
}
/* تنظیم عرض برای موبایل (94%) */
@media (max-width: 768px) {
    .modal {
        width: 94% !important;
        max-width: 94% !important;
    }
}

/* استایل دکمه‌های ماه */
.month-btn {
    background: white !important;
    color: #333 !important;
    border: 1px solid #ccc;
    padding: 8px 16px;
    font-size: 14px;
}

.month-btn.disabled {
    background: #f0f0f0 !important;
    color: #999 !important;
    cursor: not-allowed;
    border: 1px solid #ddd;
}

.month-btn-text {
    font-weight: bold;
}

/* استایل dropdown */
.month-dropdown {
    padding: 8px 16px;
    font-size: 14px;
    border: 1px solid #fff;
    border-radius: 24px;
    background: white;
    cursor: pointer;
    width: 124px; /* عرض ثابت برای ظاهر بهتر */
}

.month-dropdown:disabled {
    background: #f0f0f0;
    color: #999;
    cursor: not-allowed;
}






/* =========================================================
   بخش: فیکس تصاویر غذا برای ویندوز 10
   توضیح: رفع مشکل full-size شدن عکس در ویندوز 10
   ========================================================= */

/* کلاس اصلی (همون استایل‌های قبلی) */
.food-image-win10-fix {
  width: 100% !important;
  height: 8rem !important;     /* h-32 */
  object-fit: cover !important;
  margin-bottom: 0.5rem !important; /* mb-2 */
  border-radius: 0.5rem !important; /* rounded */
  display: block !important;
  background: #f3f4f6 !important; /* fallback */
}

/* هاور (اختیاری) */
.food-image-win10-fix:hover {
  transform: scale(1.02);
  transition: transform 0.2s ease;
}

/* 
   تشخیص ویندوز 10 با CSS (از طریق user-agent sniffing نیست، اما با ویژگی‌های گرافیکی)
   استفاده از @supports + fallback برای مرورگرهای قدیمی
*/
@supports (object-fit: cover) {
  /* مرورگرهای مدرن (ویندوز 11) */
  .food-image-win10-fix {
    object-fit: cover;
  }
}

@supports not (object-fit: cover) {
  /* مرورگرهای قدیمی یا باگ‌دار (ویندوز 10) */
  .food-image-win10-fix {
    object-fit: contain !important;
    height: auto !important;
    max-height: 8rem !important;
    width: 100% !important;
    object-position: center !important;
    background: #f3f4f6 center center no-repeat !important;
    background-size: contain !important;
    padding: 0.5rem !important;
    box-sizing: border-box !important;
  }
}

/* 
   فیکس نهایی برای ویندوز 10 با تشخیص ویژگی‌های گرافیکی
   (بعضی مرورگرهای ویندوز 10 object-fit رو ساپورت می‌کنن ولی اجرا نمی‌کنن)
*/
@media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  /* فقط Edge Legacy در ویندوز 10 */
  .food-image-win10-fix {
    height: 8rem !important;
    width: 100% !important;
    object-fit: fill !important;
    clip-path: inset(0);
  }
}

/* فیکس برای Chrome در ویندوز 10 با تنظیمات خاص */
@media screen and (min-resolution: 120dpi) and (max-width: 1920px) {
  .food-image-win10-fix {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}




.confirm-modal-backdrop {
    z-index: 1001 !important;
}
.modal-backdrop {
    z-index: 1000 !important;
}









html.dark {
  filter: invert(0.9) hue-rotate(180deg) brightness(1.15) contrast(0.95);
}

html.dark img,
html.dark video,
html.dark canvas,
html.dark iframe,
html.dark svg {
  filter: invert(1) hue-rotate(180deg) brightness(1);
}

html {
  transition: filter 0.25s ease;
}







/* =========================================================
   بخش: Scrollbars
   توضیح: این بخش اسکرول‌بارها را مخفی می‌کند اما امکان اسکرول را فعال نگه می‌دارد.
   ========================================================= */
html, body, .main-content {
  overflow-y: scroll;
  scrollbar-width: none;
  
      background-image: url("img/bg.png");
    background-repeat: repeat;               /* tile the image in both directions */
    background-position: 0 0;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
.main-content::-webkit-scrollbar {
  display: none;
}