/**
 * اصلاحات کوچک روی CSS استاتیک Metronic که این اپ سلف‌هاست می‌کند
 * (بدون بیلد زنده Tailwind — یعنی کلاس‌های خودمان اینجا اضافه می‌شوند،
 * نه در فایل‌های .tsx).
 */

/* محتوای صفحات پنل — تمام‌عرض ناحیه اصلی، بدون max-width ثابت demo6 */
.admin-page-container {
  width: 100%;
  max-width: none !important;
  margin-inline: 0 !important;
  padding-inline: clamp(0.75rem, 1.5vw, 1.25rem);
}

/*
 * اسکرول ناحیه اصلی — body در دسکتاپ overflow:hidden دارد؛ فقط
 * #scrollable_content باید اسکرول بخورد. بدون min-h-0 روی زنجیره flex،
 * ظرف اسکرول با محتوا کش می‌آید و عملاً هیچ‌جا اسکرول نمی‌شود.
 */
#root {
  min-height: 0;
}

#scrollable_content {
  min-height: 0;
  overscroll-behavior: contain;
}

/* منوی سایدبار — نشانگر فعال (نوار سمت راست در RTL) */
#sidebar_primary_menu .kt-menu-item.active > .kt-menu-link {
  position: relative;
  background: var(--background);
  border-color: var(--border);
  font-weight: 600;
}

#sidebar_primary_menu .kt-menu-item.active > .kt-menu-link::before {
  content: '';
  position: absolute;
  top: 0.35rem;
  bottom: 0.35rem;
  inset-inline-start: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--primary);
}

#sidebar_primary_menu .kt-menu-item.here > .kt-menu-link,
#sidebar_primary_menu .kt-menu-item.show > .kt-menu-link {
  background: color-mix(in oklab, var(--primary) 6%, var(--background));
  border-color: color-mix(in oklab, var(--primary) 18%, var(--border));
}

#sidebar_primary_menu .kt-menu-accordion .kt-menu-item.active > .kt-menu-link::before {
  inset-inline-start: 0.25rem;
  width: 2px;
}
@media (min-width: 1024px) {
  .admin-page-container {
    padding-inline: clamp(1rem, 2vw, 1.5rem);
  }
}

/* خط جداکننده بین ستون‌های جدول — استایل خود Metronic وقتی جدول داخل
   kt-card-table باشد border را صفر می‌کند (برای دیتاتیبل‌های KTUI که
   جداکننده را با JS اضافه می‌کنند)؛ چون اینجا از آن اسکریپت استفاده
   نمی‌کنیم، این override آن رفتار را برای همه جدول‌های پنل برمی‌گرداند. */
.kt-card-table .kt-table-border {
  border-width: 1px;
}
.kt-card-table .kt-table-border td,
.kt-card-table .kt-table-border th {
  border-inline-end-style: solid;
  border-inline-end-width: 1px;
  border-color: var(--border);
}
.kt-card-table .kt-table-border td:last-child,
.kt-card-table .kt-table-border th:last-child {
  border-inline-end-width: 0;
}

/* بدنه ویرایشگر متن پیشرفته (RichTextEditor.tsx) — عمداً از kt-input
   استفاده نمی‌شود، چون آن کلاس یک ورودی تک‌خطی با ارتفاع ثابت (۳۴px)
   و بدون overflow:hidden است؛ محتوای بلوکی (پاراگراف، تصویر بزرگ) از
   کادرش بیرون می‌زد. این کلاس معادل بصری kt-input است اما یک جعبه
   بلوکی واقعی با حداقل‌ارتفاع است. */
.rich-text-editor-body {
  display: block;
  width: 100%;
  min-height: 260px;
  border: 1px solid var(--input);
  border-radius: calc(var(--radius) - 2px);
  background-color: var(--background);
  color: var(--foreground);
  padding: 0.75rem 1rem;
  font-size: 0.8125rem;
  line-height: 1.6;
}
.rich-text-editor-body:focus {
  outline: none;
  border-color: var(--primary);
}
.rich-text-editor-body img,
.rich-text-editor-body video {
  max-width: 100%;
}
.rich-text-editor-body p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  color: var(--muted-foreground);
  float: right;
  height: 0;
  pointer-events: none;
}

/* ریست Tailwind اندازه/وزن تیترها را صفر می‌کند؛ اینجا برشان می‌گردانیم
   وگرنه انتخاب «تیتر ۱..۶» هیچ تغییر دیداری روی متن نمی‌داد. */
.rich-text-editor-body h1 { font-size: 1.875rem; font-weight: 700; margin: 0.6em 0 0.3em; }
.rich-text-editor-body h2 { font-size: 1.5rem; font-weight: 700; margin: 0.6em 0 0.3em; }
.rich-text-editor-body h3 { font-size: 1.25rem; font-weight: 600; margin: 0.6em 0 0.3em; }
.rich-text-editor-body h4 { font-size: 1.125rem; font-weight: 600; margin: 0.6em 0 0.3em; }
.rich-text-editor-body h5 { font-size: 1rem; font-weight: 600; margin: 0.6em 0 0.3em; }
.rich-text-editor-body h6 { font-size: 0.9rem; font-weight: 600; margin: 0.6em 0 0.3em; }
.rich-text-editor-body p { margin: 0.4em 0; }
.rich-text-editor-body ul { list-style: disc; padding-inline-start: 1.5rem; margin: 0.4em 0; }
.rich-text-editor-body ol { list-style: decimal; padding-inline-start: 1.5rem; margin: 0.4em 0; }
.rich-text-editor-body blockquote {
  border-inline-start: 3px solid var(--border);
  padding-inline-start: 0.75rem;
  color: var(--secondary-foreground);
  margin: 0.5em 0;
}
.rich-text-editor-body a { color: var(--primary); text-decoration: underline; }
.rich-text-editor-body strong { font-weight: 700; }
.rich-text-editor-body em { font-style: italic; }
.rich-text-editor-body u { text-decoration: underline; }
.rich-text-editor-body s { text-decoration: line-through; }
.rich-text-editor-body mark { background: #fef08a; padding: 0 0.15em; }
/* تصویر/ویدیوی شناور نباید از کادر ویرایشگر بیرون بزند */
.rich-text-editor-body::after { content: ''; display: block; clear: both; }

/* نوار پیشرفت آپلود (ویدیو/فایل) — HotelMediaTab */
.upload-progress-track {
  height: 8px;
  border-radius: 999px;
  background-color: var(--border);
  overflow: hidden;
}
.upload-progress-fill {
  height: 100%;
  border-radius: 999px;
  background-color: var(--primary);
  transition: width 0.15s ease;
}
.upload-progress-fill.is-indeterminate {
  width: 35% !important;
  animation: upload-progress-slide 1.1s ease-in-out infinite;
}
@keyframes upload-progress-slide {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(320%); }
}

/* بنر هشدار هتل — پیش‌نمایش تب هشدار در پنل ادمین */
.hotel-warning-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background: #fff9f0;
  border-inline-end: 4px solid #a0522d;
  border-radius: 0.5rem;
  color: #8b4513;
  font-size: 0.875rem;
  line-height: 1.75;
  text-align: start;
}
.hotel-warning-alert svg {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.125rem;
  color: #a0522d;
}

.neshan-map-picker {
  height: 360px;
  width: 100%;
  border-radius: 0.75rem;
  overflow: hidden;
  border: 1px solid var(--border);
}

/* پیش‌نمایش تصاویر گالری هتل — HotelMediaTab
   Metronic کلاس object-cover ندارد؛ بدون object-fit تصویر در قاب کش می‌آید. */
.hotel-media-preview {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  background-color: var(--muted);
}
.hotel-media-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hotel-media-preview__remove {
  position: absolute;
  top: 0.25rem;
  inset-inline-start: 0.25rem;
  z-index: 1;
}

.hotel-media-upload-row {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 0.75rem;
}
.hotel-media-upload-row__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.hotel-media-upload-row__remove {
  flex-shrink: 0;
  margin-top: 0.125rem;
}
.hotel-media-upload-modal {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.hotel-media-upload-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-height: 420px;
  overflow-y: auto;
}
.hotel-media-upload-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}
.hotel-media-upload-thumb {
  flex-shrink: 0;
  overflow: hidden;
  width: 120px;
  aspect-ratio: 4 / 3;
  border-radius: 0.375rem;
  border: 1px solid var(--border);
  background-color: var(--muted);
}
.hotel-media-upload-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hotel-media-upload-filename {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.75rem;
  color: var(--secondary-foreground);
  font-family: ui-monospace, monospace;
}

/* تب‌های فرم هتل/اتاق — خط جداکننده تمام‌عرض کارت */
.kt-card-header:has(> .hotel-form-tabs) {
  display: block;
  padding: 0;
  border-bottom: none;
  min-height: 0;
}
.hotel-form-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  width: 100%;
  box-sizing: border-box;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  font-family: 'IranYekan', ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.hotel-form-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--secondary-foreground);
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.hotel-form-tab:hover:not(:disabled):not(.is-active) {
  background: var(--muted);
  color: var(--foreground);
}
.hotel-form-tab.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground);
  font-weight: 600;
}
.hotel-form-tab:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.hotel-form-tab .ki-filled {
  font-size: 1.05rem;
  line-height: 1;
  opacity: 0.92;
}
.hotel-form-tab span {
  white-space: nowrap;
}

/* فرم تور — تب‌های اسکرول‌شونده، بنر راهنما، بخش‌بندی فیلدها */
.tour-form-card {
  overflow: hidden;
}
.tour-form-setup-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  margin: 1rem 1rem 0;
  padding: 0.875rem 1rem;
  border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--border));
  border-radius: 0.625rem;
  background: color-mix(in srgb, var(--primary) 8%, var(--card));
  color: var(--foreground);
  font-size: 0.875rem;
  line-height: 1.55;
}
.tour-form-setup-banner > .ki-filled {
  flex-shrink: 0;
  margin-top: 0.125rem;
  font-size: 1.25rem;
  color: var(--primary);
}
.tour-form-setup-banner strong {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 600;
}
.tour-form-setup-banner p {
  margin: 0;
  color: var(--secondary-foreground);
}
.tour-form-tabs-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--card);
}
.tour-form-tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.5rem;
}
.tour-form-tab {
  flex-shrink: 0;
  min-height: 2.5rem;
}
.tour-form-tab.is-locked {
  opacity: 0.72;
  border-style: dashed;
  border-color: var(--border);
}
.tour-form-tab.is-locked:not(.is-active):hover {
  background: color-mix(in srgb, var(--muted) 80%, transparent);
}
.tour-form-tab__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 12%, transparent);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1;
}
.tour-form-tab.is-active .tour-form-tab__step {
  background: color-mix(in srgb, var(--primary-foreground) 22%, transparent);
}
.tour-form-tab__label {
  white-space: nowrap;
}
.tour-form-tab__lock {
  font-size: 0.75rem;
  opacity: 0.75;
}
.tour-form-basic {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.25rem 1.25rem 1.5rem;
}
.tour-form-section {
  margin: 0;
  padding: 1rem 1rem 1.125rem;
  border: 1px solid var(--border);
  border-radius: 0.625rem;
  background: color-mix(in srgb, var(--muted) 35%, var(--card));
}
.tour-form-section legend {
  padding: 0 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--foreground);
}
.tour-form-basic__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.625rem;
  padding-top: 0.25rem;
}
.tour-form-tab-panel {
  display: flex;
  flex-direction: column;
  min-height: 18rem;
}
.tour-form-tab-panel__header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--muted) 40%, var(--card));
}
.tour-form-tab-panel__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--foreground);
}
.tour-form-tab-panel__desc {
  margin: 0.375rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--secondary-foreground);
}
.tour-form-tab-panel__body {
  padding: 1.25rem;
}
.tour-form-tab-panel__body > .flex.flex-col {
  padding: 0 !important;
}
.tour-form-tab-panel__body .tour-data-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
}
.tour-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}
.tour-data-table th,
.tour-data-table td {
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid var(--border);
  text-align: right;
  vertical-align: middle;
}
.tour-data-table th {
  background: var(--muted);
  font-weight: 600;
  color: var(--secondary-foreground);
  white-space: nowrap;
}
.tour-data-table tr:last-child td {
  border-bottom: none;
}
.tour-form-tab-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.jalali-date-picker.is-disabled .jalali-date-picker-trigger {
  opacity: 0.6;
  cursor: not-allowed;
}
.jalali-date-picker-panel {
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.14);
}

/* ورودی مبلغ تومان — عدد LTR، پسوند «تومان» سمت چپ (inline-end در RTL) */
.toman-input-wrap {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
}
.toman-input-field {
  flex: 1;
  width: 100%;
  direction: ltr;
  text-align: right;
  font-variant-numeric: tabular-nums;
  /* «تومان» visually on the left — pad left only; right pad was causing empty gap */
  padding-left: 4.25rem !important;
  padding-right: 0.75rem !important;
}
.toman-input-suffix {
  position: absolute;
  left: 0.75rem;
  right: auto;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.75rem;
  color: var(--secondary-foreground);
  pointer-events: none;
  white-space: nowrap;
}

/* عملیات ردیف جدول — گروه‌بندی و فاصله برای تشخیص آسان */
.table-row-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
}
.table-row-actions-group {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
}
.table-row-actions-sep {
  flex-shrink: 0;
  width: 1px;
  height: 1.625rem;
  background: var(--border);
  margin-inline: 0.125rem;
}
.table-row-actions .kt-btn-sm {
  gap: 0.375rem;
  white-space: nowrap;
}
.table-row-actions-danger {
  border-color: rgb(254 202 202);
  color: rgb(185 28 28);
  background: rgb(254 242 242);
}
.table-row-actions-danger:hover {
  border-color: rgb(248 113 113);
  background: rgb(254 226 226);
  color: rgb(153 27 27);
}
.table-row-actions-muted {
  color: var(--secondary-foreground);
}

/* مودال تأیید حذف */
.confirm-dialog-root {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  font-family: 'IranYekan', ui-sans-serif, system-ui, sans-serif;
}
.confirm-dialog-backdrop {
  position: absolute;
  inset: 0;
  border: none;
  background: rgb(15 23 42 / 0.45);
  backdrop-filter: blur(2px);
  cursor: pointer;
  animation: confirm-dialog-fade-in 0.2s ease-out;
}
.confirm-dialog-card {
  position: relative;
  z-index: 1;
  width: min(100%, 26rem);
  border-radius: 1rem;
  border: 1px solid var(--border);
  background: var(--background);
  box-shadow: 0 24px 48px rgb(15 23 42 / 0.18);
  padding: 1.5rem 1.5rem 1.25rem;
  text-align: center;
  animation: confirm-dialog-scale-in 0.24s ease-out;
}
.confirm-dialog-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  margin-inline: auto;
  margin-bottom: 0.875rem;
  border-radius: 9999px;
  background: rgb(254 242 242);
  color: rgb(220 38 38);
}
.confirm-dialog-icon svg {
  width: 1.625rem;
  height: 1.625rem;
}
.confirm-dialog-title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--foreground);
  line-height: 1.5;
}
.confirm-dialog-message {
  margin: 0.625rem 0 0;
  font-size: 0.875rem;
  line-height: 1.75;
  color: var(--secondary-foreground);
}
.confirm-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.625rem;
  margin-top: 1.25rem;
}
.confirm-dialog-btn-danger {
  background: rgb(220 38 38);
  border-color: rgb(220 38 38);
  color: #fff;
  gap: 0.375rem;
}
.confirm-dialog-btn-danger:hover {
  background: rgb(185 28 28);
  border-color: rgb(185 28 28);
  color: #fff;
}
@keyframes confirm-dialog-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes confirm-dialog-scale-in {
  from {
    opacity: 0;
    transform: scale(0.94) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* اعلان عملیات — گوشه بالا چپ */
.operation-alert {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  max-width: min(22rem, calc(100vw - 2rem));
  padding: 0.875rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid transparent;
  box-shadow: 0 10px 30px rgb(15 23 42 / 0.12);
  font-family: 'IranYekan', ui-sans-serif, system-ui, sans-serif;
  font-size: 0.875rem;
  line-height: 1.6;
  animation: operation-alert-in 0.28s ease-out;
}
.operation-alert--success {
  background: #ecfdf5;
  border-color: #6ee7b7;
  color: #065f46;
}
.operation-alert--error {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #991b1b;
}
.operation-alert-icon {
  display: flex;
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.125rem;
}
.operation-alert-text {
  margin: 0;
  flex: 1;
  font-weight: 500;
}
.operation-alert-close {
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: inherit;
  opacity: 0.65;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.operation-alert-close:hover {
  opacity: 1;
}
@keyframes operation-alert-in {
  from {
    opacity: 0;
    transform: translateY(-0.5rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* مودال — z-index و backdrop پررنگ‌تر تا دکمه‌های absolute صفحه پشت دیده نشوند */
.kt-modal.open {
  z-index: 1000;
}
.kt-modal-backdrop {
  z-index: 0;
  background-color: rgb(0 0 0 / 0.55) !important;
}
.kt-modal-content {
  position: relative;
  z-index: 1;
}

/* ─── لودینگ حرفه‌ای پنل ─── */
#root {
  width: 100%;
  min-height: 100vh;
  flex-direction: column;
}

.panel-page-loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100vh;
  padding: 2rem 1rem;
  box-sizing: border-box;
  background: color-mix(in oklab, var(--background) 88%, var(--muted));
}
.panel-page-loader-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.875rem;
  width: min(100%, 320px);
  padding: 2rem 1.5rem;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: var(--background);
  box-shadow: 0 10px 40px rgb(0 0 0 / 0.06);
  animation: panel-loader-in 0.35s ease;
}
.panel-page-loader-brand {
  position: relative;
  width: 4rem;
  height: 4rem;
  display: grid;
  place-items: center;
}
.panel-page-loader-logo {
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border-radius: 9999px;
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: 1.25rem;
  font-weight: 700;
  z-index: 1;
}
.panel-page-loader-ring {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  border: 2px solid transparent;
  border-top-color: var(--primary);
  border-right-color: color-mix(in oklab, var(--primary) 35%, transparent);
  animation: panel-loader-spin 0.85s linear infinite;
}
.panel-page-loader-title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--foreground);
}
.panel-page-loader-sub {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--secondary-foreground);
}
.panel-page-loader-bars {
  display: flex;
  gap: 0.375rem;
  width: 100%;
  margin-top: 0.25rem;
}
.panel-page-loader-bars span {
  flex: 1;
  height: 0.375rem;
  border-radius: 9999px;
  background: var(--muted);
  animation: panel-loader-bar 1.1s ease-in-out infinite;
}
.panel-page-loader-bars span:nth-child(2) {
  animation-delay: 0.15s;
}
.panel-page-loader-bars span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes panel-loader-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes panel-loader-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes panel-loader-bar {
  0%,
  100% {
    opacity: 0.45;
    transform: scaleY(0.85);
  }
  50% {
    opacity: 1;
    transform: scaleY(1);
  }
}

/* اسکلتون جدول */
.table-skeleton-row td {
  padding-block: 0.875rem !important;
}
.table-skeleton-cell {
  display: block;
  height: 0.75rem;
  border-radius: 0.375rem;
  background: linear-gradient(
    90deg,
    var(--muted) 0%,
    color-mix(in oklab, var(--muted) 65%, var(--background)) 50%,
    var(--muted) 100%
  );
  background-size: 200% 100%;
  animation: table-skeleton-shimmer 1.25s ease-in-out infinite;
}
@keyframes table-skeleton-shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

/* نوار پیشرفت هنگام refetch فیلتر */
.kt-card-table {
  position: relative;
}
.kt-card-table.is-fetching::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 2px;
  z-index: 2;
  background: linear-gradient(
    90deg,
    transparent,
    var(--primary),
    transparent
  );
  background-size: 200% 100%;
  animation: panel-fetch-bar 1s linear infinite;
  pointer-events: none;
}
@keyframes panel-fetch-bar {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* دکمه حذف فیلتر */
.clear-filters-btn {
  align-self: flex-end;
  white-space: nowrap;
  color: var(--destructive);
  border-color: color-mix(in oklab, var(--destructive) 35%, var(--border));
}
.clear-filters-btn:hover {
  background: color-mix(in oklab, var(--destructive) 8%, var(--background));
  border-color: var(--destructive);
  color: var(--destructive);
}

/* ── فرم اتاق — هم‌تراز با فرم هتل (Metronic / kt-input استاندارد) ── */
.room-form-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem;
  width: 100%;
  box-sizing: border-box;
}

.room-form-section-full {
  width: 100%;
}

.room-form-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 1024px) {
  .room-form-split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }
}

.room-form-alert {
  margin: 0;
  padding: 0.625rem 0.875rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--muted) 40%, var(--background));
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--secondary-foreground);
}

.room-form-section {
  border: 1px solid var(--border);
  border-radius: 0.625rem;
  background: var(--background);
  overflow: hidden;
}

.room-form-section-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  border-bottom: 1px solid var(--border);
  background: color-mix(in oklab, var(--muted) 45%, var(--background));
}

.room-form-section-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
  border-radius: 0.375rem;
  background: var(--background);
  border: 1px solid var(--border);
  color: var(--primary);
}

.room-form-section-icon .ki-filled {
  font-size: 0.875rem;
  line-height: 1;
}

.room-form-section-heading {
  min-width: 0;
  flex: 1;
}

.room-form-section-title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--foreground);
}

.room-form-section-desc {
  margin: 0.15rem 0 0;
  font-size: 0.8438rem;
  line-height: 1.7;
  color: var(--secondary-foreground);
}

.room-form-section-body {
  padding: 1rem;
}

.room-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  width: 100%;
}

@media (min-width: 640px) {
  .room-form-grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .room-form-grid-cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .room-form-grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .room-form-grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .room-form-grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.room-form-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  min-width: 0;
}

.room-form-field-full {
  grid-column: 1 / -1;
}

.room-form-control {
  width: 100%;
}

.room-form-control .kt-input,
.room-form-control select.kt-input,
.room-form-control .toman-input-wrap {
  width: 100%;
}

.room-form-label {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--secondary-foreground);
  line-height: 1.35;
}

.room-form-required {
  margin-inline-start: 0.15rem;
  color: var(--destructive);
}

.room-form-hint {
  margin: 0;
  font-size: 0.8438rem;
  line-height: 1.7;
  color: var(--secondary-foreground);
}

.room-form-error {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--destructive);
}

.room-form-check-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--muted) 35%, var(--background));
}

.room-form-check-row label {
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--secondary-foreground);
  cursor: pointer;
}

.room-form-discount-box {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding: 0.875rem;
  border-radius: 0.5rem;
  border: 1px dashed var(--border);
  background: color-mix(in oklab, var(--muted) 30%, var(--background));
}

@media (min-width: 640px) {
  .room-form-discount-box {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .room-form-discount-box {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.room-form-preview {
  margin: 0;
  padding: 0.625rem 0.875rem;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  background: color-mix(in oklab, var(--primary) 8%, var(--background));
  color: var(--primary);
  border: 1px solid color-mix(in oklab, var(--primary) 20%, var(--border));
}

.room-form-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--border);
  background: var(--background);
}

.room-form-footer-error {
  flex: 1;
  align-self: center;
  margin: 0;
  font-size: 0.8125rem;
  color: var(--destructive);
}

.hotel-context-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding: 0.75rem 1rem;
  border-radius: 0.625rem;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--muted) 30%, var(--background));
  font-size: 0.875rem;
  line-height: 1.45;
}

.hotel-context-bar-muted {
  color: var(--secondary-foreground);
  background: var(--muted);
  border-color: var(--border);
}

.hotel-context-bar-main {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  min-width: 0;
  flex: 1;
}

.hotel-context-bar-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  border-radius: 0.375rem;
  background: var(--background);
  border: 1px solid var(--border);
  color: var(--primary);
}

.hotel-context-bar-icon .ki-filled {
  font-size: 0.9375rem;
  line-height: 1;
}

.hotel-context-bar-text {
  min-width: 0;
}

.hotel-context-bar-name {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--foreground);
}

.hotel-context-bar-caption {
  margin: 0.2rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--secondary-foreground);
}

.hotel-context-bar-id-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
  flex-shrink: 0;
  padding: 0.5rem 0.875rem;
  border-radius: 0.625rem;
  background: var(--background);
  border: 1px solid var(--border);
  box-shadow: 0 1px 3px color-mix(in oklab, var(--foreground) 5%, transparent);
}

.hotel-context-bar-id-label {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--secondary-foreground);
  white-space: nowrap;
}

.hotel-context-bar-id {
  font-family: inherit;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.1;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  color: var(--foreground);
  unicode-bidi: plaintext;
  padding-inline: 0.125rem;
}

.hotel-context-bar-loading {
  justify-content: center;
}

.hotel-context-bar-skeleton {
  display: block;
  width: min(100%, 28rem);
  height: 2.75rem;
  margin-inline: auto;
  border-radius: 0.5rem;
  background: color-mix(in oklab, var(--muted) 80%, var(--background));
  animation: pulse 1.5s ease-in-out infinite;
}

.room-page-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 14rem;
  padding: 3rem 1.5rem;
}

.room-page-loading-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.875rem;
  width: 100%;
  max-width: 24rem;
  margin-inline: auto;
  text-align: center;
}

.room-page-loading-spinner {
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  border: 3px solid color-mix(in oklab, var(--primary) 18%, var(--border));
  border-top-color: var(--primary);
  animation: room-page-spin 0.75s linear infinite;
}

.room-context-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding: 0.75rem 1rem;
  margin-bottom: 0.75rem;
  border-radius: 0.625rem;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--muted) 30%, var(--background));
}

.room-context-bar-name {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--foreground);
}

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

.room-list-search {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
}

.room-list-search .kt-input {
  max-width: none;
}

/* ویرایشگر توضیحات — تمام‌عرض */
.room-form-section-full .room-form-section-body > .flex.flex-col {
  width: 100%;
}

.room-form-section-full .rich-text-editor-body,
.room-form-section-full .ProseMirror {
  min-height: 10rem;
  font-size: 0.875rem;
  line-height: 1.6;
}

/* دکمه سبز — تایید هتل ثبت‌شده توسط هتل‌دار. قالب Metronic نسخه success ندارد. */
.kt-btn-success {
  border-color: var(--color-green-500);
  background-color: var(--color-green-500);
  color: var(--color-white);
}
.kt-btn-success:hover {
  background-color: var(--color-green-600, var(--color-green-500));
  border-color: var(--color-green-600, var(--color-green-500));
}

.room-form-tab-panel {
  min-height: 8rem;
  padding: 0 1.25rem 1.25rem;
}

/* ══════════════════════════════════════════════════════════════
   کف اندازهٔ متن — خوانایی فارسی
   ──────────────────────────────────────────────────────────────
   خط فارسی در اندازهٔ یکسان ریزتر از لاتین دیده می‌شود؛ نقطه‌ها و
   کشیدگی‌ها در ارتفاع کم گم می‌شوند. مقیاس پیش‌فرض Tailwind
   (۱۲ و ۱۴ پیکسل) برای متن فارسی این پنل خیلی کوچک بود، پس
   پله‌های کوچک بالا برده شده و ارتفاع خطشان بازتر شده است.
   ══════════════════════════════════════════════════════════════ */
.text-\[10px\],
.text-\[11px\],
.text-2xs {
  font-size: 0.8125rem !important; /* ۱۳ پیکسل */
  line-height: 1.7 !important;
}

.text-xs {
  font-size: 0.8438rem !important; /* ۱۳.۵ پیکسل */
  line-height: 1.7 !important;
}

.text-sm {
  font-size: 0.9375rem !important; /* ۱۵ پیکسل */
  line-height: 1.65 !important;
}

/* اندازهٔ متن نسخهٔ کوچک اجزای Metronic — ۱۱/۱۲ پیکسل برای فارسی کم بود */
.kt-badge-sm,
.kt-btn-sm,
.kt-menu-item-sm .kt-menu-title {
  font-size: 0.8125rem !important; /* ۱۳ پیکسل */
  line-height: 1.5 !important;
}

.kt-badge-xs,
.kt-btn-xs {
  font-size: 0.78rem !important; /* ۱۲.۵ پیکسل */
  line-height: 1.45 !important;
}