@font-face {
  font-family: 'Dana';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/dana/Dana-Regular.woff2') format('woff2'),
       url('../fonts/dana/Dana-Regular.woff') format('woff');
}
@font-face {
  font-family: 'Dana';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/dana/Dana-Medium.woff2') format('woff2'),
       url('../fonts/dana/Dana-Medium.woff') format('woff');
}
@font-face {
  font-family: 'Dana';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/dana/Dana-DemiBold.woff2') format('woff2'),
       url('../fonts/dana/Dana-DemiBold.woff') format('woff');
}
@font-face {
  font-family: 'Dana';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/dana/Dana-Bold.woff2') format('woff2'),
       url('../fonts/dana/Dana-Bold.woff') format('woff');
}
@font-face {
  font-family: 'Dana';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../fonts/dana/Dana-Black.woff2') format('woff2'),
       url('../fonts/dana/Dana-Black.woff') format('woff');
}

:root {
  --cyan: #2DE2FF;
  --green: #39FF6A;
  --amber: #FFC93C;
  --red: #FF5F5F;
  --white-accent: #FFFFFF;
  --text: #F2F4FF;
  --muted: #9CA3C4;
  --faint: #6B7099;
  --bg1: #16113a;
  --bg2: #0a0716;
  --bg3: #060509;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  /* پایه تیره — رنگ اصلی را لایه bokeh می‌سازد؛ این فقط برای overscroll است */
  background: #2b1547;
  color: var(--text);
  font-family: 'Dana', 'Vazirmatn', sans-serif;
}

/* ---- افکت Bokeh (CSS خالص از CodePen — Mamboleoo/BxMQYQ) ----
   ۲۰ دایرهٔ رنگی محو که با چرخش ملایم شناورند. بدون تصویر، بدون JS و بدون blur
   سنگین؛ انیمیشن فقط transform است که روی GPU اجرا می‌شود و برای گوشی سبک است. */
.background {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #3E1E68;
  pointer-events: none;
}

.background span {
  width: 20vmin;
  height: 20vmin;
  border-radius: 20vmin;
  backface-visibility: hidden;
  position: absolute;
  animation-name: move;
  animation-duration: 6s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.background span:nth-child(1) {
  color: #FFACAC;
  top: 8%;
  left: 50%;
  animation-duration: 13.1s;
  animation-delay: -12.6s;
  transform-origin: 25vw 1vh;
  box-shadow: -40vmin 0 12.1562073135vmin currentColor;
}
.background span:nth-child(2) {
  color: #E45A84;
  top: 45%;
  left: 100%;
  animation-duration: 14.5s;
  animation-delay: -9.8s;
  transform-origin: -5vw 23vh;
  box-shadow: -40vmin 0 8.163422075vmin currentColor;
}
.background span:nth-child(3) {
  color: #583C87;
  top: 100%;
  left: 48%;
  animation-duration: 15s;
  animation-delay: -14.9s;
  transform-origin: -19vw -16vh;
  box-shadow: -40vmin 0 8.9506069664vmin currentColor;
}
.background span:nth-child(4) {
  color: #583C87;
  top: 88%;
  left: 6%;
  animation-duration: 12.8s;
  animation-delay: -8.6s;
  transform-origin: -12vw -14vh;
  box-shadow: -40vmin 0 7.2657898668vmin currentColor;
}
.background span:nth-child(5) {
  color: #FFACAC;
  top: 65%;
  left: 8%;
  animation-duration: 10.1s;
  animation-delay: -3.4s;
  transform-origin: -9vw -14vh;
  box-shadow: 40vmin 0 8.5979130521vmin currentColor;
}
.background span:nth-child(6) {
  color: #FFACAC;
  top: 77%;
  left: 45%;
  animation-duration: 10.5s;
  animation-delay: -6.3s;
  transform-origin: -11vw 5vh;
  box-shadow: 40vmin 0 6.3649535155vmin currentColor;
}
.background span:nth-child(7) {
  color: #583C87;
  top: 25%;
  left: 30%;
  animation-duration: 13.7s;
  animation-delay: -12.3s;
  transform-origin: -1vw 12vh;
  box-shadow: -40vmin 0 11.2512616853vmin currentColor;
}
.background span:nth-child(8) {
  color: #FFACAC;
  top: 33%;
  left: 25%;
  animation-duration: 11s;
  animation-delay: -13.6s;
  transform-origin: 20vw 8vh;
  box-shadow: -40vmin 0 9.2356719592vmin currentColor;
}
.background span:nth-child(9) {
  color: #583C87;
  top: 87%;
  left: 15%;
  animation-duration: 14.6s;
  animation-delay: -2.2s;
  transform-origin: 24vw 9vh;
  box-shadow: 40vmin 0 13.2698244584vmin currentColor;
}
.background span:nth-child(10) {
  color: #583C87;
  top: 24%;
  left: 10%;
  animation-duration: 12.7s;
  animation-delay: -15.4s;
  transform-origin: 25vw 9vh;
  box-shadow: 40vmin 0 8.6829197959vmin currentColor;
}
.background span:nth-child(11) {
  color: #FFACAC;
  top: 57%;
  left: 24%;
  animation-duration: 13.5s;
  animation-delay: -11.7s;
  transform-origin: -7vw 21vh;
  box-shadow: 40vmin 0 11.0421432995vmin currentColor;
}
.background span:nth-child(12) {
  color: #FFACAC;
  top: 29%;
  left: 39%;
  animation-duration: 13s;
  animation-delay: -13.2s;
  transform-origin: -15vw -3vh;
  box-shadow: 40vmin 0 9.6990467872vmin currentColor;
}
.background span:nth-child(13) {
  color: #E45A84;
  top: 5%;
  left: 19%;
  animation-duration: 12.1s;
  animation-delay: -0.1s;
  transform-origin: -12vw -12vh;
  box-shadow: 40vmin 0 6.626483606vmin currentColor;
}
.background span:nth-child(14) {
  color: #583C87;
  top: 41%;
  left: 41%;
  animation-duration: 13.8s;
  animation-delay: -5.9s;
  transform-origin: -7vw 14vh;
  box-shadow: 40vmin 0 12.9599575002vmin currentColor;
}
.background span:nth-child(15) {
  color: #FFACAC;
  top: 21%;
  left: 29%;
  animation-duration: 15.6s;
  animation-delay: -1.5s;
  transform-origin: 22vw 9vh;
  box-shadow: -40vmin 0 9.2303969381vmin currentColor;
}
.background span:nth-child(16) {
  color: #E45A84;
  top: 55%;
  left: 94%;
  animation-duration: 11.2s;
  animation-delay: -13.8s;
  transform-origin: -4vw 9vh;
  box-shadow: -40vmin 0 10.5956617032vmin currentColor;
}
.background span:nth-child(17) {
  color: #E45A84;
  top: 28%;
  left: 21%;
  animation-duration: 14.9s;
  animation-delay: -0.2s;
  transform-origin: 18vw -11vh;
  box-shadow: 40vmin 0 11.7718293662vmin currentColor;
}
.background span:nth-child(18) {
  color: #E45A84;
  top: 8%;
  left: 29%;
  animation-duration: 14.8s;
  animation-delay: -8.4s;
  transform-origin: -12vw 9vh;
  box-shadow: -40vmin 0 12.6045479306vmin currentColor;
}
.background span:nth-child(19) {
  color: #583C87;
  top: 11%;
  left: 83%;
  animation-duration: 12.1s;
  animation-delay: -2.4s;
  transform-origin: 16vw -13vh;
  box-shadow: -40vmin 0 11.3036266789vmin currentColor;
}
.background span:nth-child(20) {
  color: #583C87;
  top: 21%;
  left: 54%;
  animation-duration: 15.5s;
  animation-delay: -0.3s;
  transform-origin: 21vw 22vh;
  box-shadow: -40vmin 0 14.9304079505vmin currentColor;
}

@keyframes move {
  100% {
    transform: translate3d(0, 0, 1px) rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .background span { animation: none; }
}

#app { min-height: 100vh; position: relative; z-index: 1; }

input, textarea, select, button {
  font-family: inherit;
  color: var(--text);
}
/* رفع باگ نمایش نادرست ظاهر بومی دکمه/فیلد متنی در سافاری موبایل (پس‌زمینه سفید ناخواسته)
   — چک‌باکس/رادیو عمدا مستثنی شده‌اند چون استایل خودشان (accent-color) به این ریست نیاز ندارد
   و با آن نامرئی می‌شوند. */
input:not([type="checkbox"]):not([type="radio"]), textarea, select, button {
  -webkit-appearance: none;
  appearance: none;
}

::placeholder { color: var(--faint); opacity: 1; }

::selection { background: rgba(45,226,255,0.35); }

a { color: inherit; }

.wrap { max-width: 720px; margin: 0 auto; padding: 0 20px; position: relative; z-index: 1; }

/* کارت‌های شیشه‌ای تیره — بدون backdrop-filter (گران روی گوشی) و با پس‌زمینه تقریبا مات
   تا روی پس‌زمینه خوانا بمانند */
.glass {
  background: rgba(13, 18, 44, 0.78);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 0 0 1px rgba(255,255,255,0.04),
    0 10px 30px -12px rgba(0,0,0,0.55);
}

/* ---- RGB cursor-glass spotlight ----
   Any element with .rgb-glass gets a colorful light that follows the mouse
   and looks like it is reflecting off the glass surface. Position is driven
   by --mx/--my custom properties updated in JS (see initSpotlight in app.js). */
.rgb-glass {
  position: relative;
  overflow: hidden;
}
.rgb-glass > * { position: relative; z-index: 1; }

/* header */
.header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(13, 18, 44, 0.85);
  border-bottom: 1px solid rgba(255,255,255,0.09);
}
.header-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header-left { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.header-left > div { min-width: 0; }
.header-title { font-size: 15px; font-weight: 700; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.header-sub { font-size: 11px; color: var(--muted); margin: 2px 0 0; }

.icon-btn {
  width: 40px; height: 40px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.icon-btn:hover { background: rgba(255,255,255,0.12); transform: translateY(-1px); }
.icon-btn svg { width: 20px; height: 20px; color: var(--muted); position: relative; z-index: 1; }

/* دکمه «خروج از حساب» در هدر — قرمز و همیشه کنار دکمه تنظیمات */
.logout-header-btn {
  border: 1px solid rgba(255,95,95,0.5);
  background: rgba(255,95,95,0.16);
  color: #ff8b8b;
  border-radius: 999px;
  padding: 8px 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease, transform .15s ease;
}
.logout-header-btn:hover { background: rgba(255,95,95,0.28); transform: translateY(-1px); }
.logout-header-btn svg { width: 15px; height: 15px; position: relative; z-index: 1; }

.logo-badge {
  width: 44px; height: 44px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(45,226,255,0.2), rgba(255,255,255,0.12));
  box-shadow: 0 0 18px rgba(45,226,255,0.3);
}
.logo-badge svg { width: 22px; height: 22px; color: var(--cyan); }

/* لوگوی جدید یک «وردمارک» پهن است (نسبت حدود ۲.۶ به ۱) و داخل قاب مربعی ۴۴ پیکسلی
   جا نمی‌شود. پس وقتی خود لوگو داخل قاب هدر است، قاب به یک پیل با عرض خودکار تبدیل
   می‌شود تا لوگو کامل و خوانا دیده شود. */
.logo-badge-wordmark {
  width: auto; height: 40px;
  padding: 0 13px;
  border-radius: 14px;
}
.logo-badge-wordmark .dash-logo { height: 22px; }

/* buttons */
.btn {
  border: none; border-radius: 12px; cursor: pointer;
  font-weight: 700; font-size: 13px;
  padding: 10px 16px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  transition: transform .12s ease, box-shadow .12s ease, background .15s ease;
}
.btn:active { transform: scale(0.98); }
/* دکمه‌های اصلی (ورود / ثبت‌نام / ثبت رکورد / ثبت سالن‌دار / ثبت روزانه و مشابه):
   پیش‌فرض سفید یکدست با متن تیره، و هنگام hover شیشه‌ای/نیمه‌شفاف با متن سفید */
.btn-primary {
  background: #FFFFFF;
  color: #0a0716;
  border: 1px solid rgba(255,255,255,0.9);
  box-shadow: 0 0 20px rgba(255,255,255,0.22);
}
.btn-primary:hover {
  background: rgba(255,255,255,0.12);
  color: #FFFFFF;
  border-color: rgba(255,255,255,0.5);
  box-shadow: 0 10px 26px -10px rgba(255,255,255,0.22), 0 0 20px rgba(255,255,255,0.12);
  transform: translateY(-1px);
}
.btn-primary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}
.btn-ghost {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--text);
}
.btn-ghost:hover { background: rgba(255,255,255,0.12); }
.btn-outline-white {
  background: rgba(13, 18, 44, 0.6);
  border: 1px solid rgba(255,255,255,0.35);
  color: #fff;
}
.btn-outline-white:hover { box-shadow: 0 0 16px rgba(255,255,255,0.25); transform: translateY(-1px); }
.btn-danger {
  background: rgba(255,95,95,0.14);
  border: 1px solid rgba(255,95,95,0.4);
  color: var(--red);
}
/* دکمه‌های انصراف — همیشه با رنگ قرمز */
.btn-cancel {
  background: rgba(255,95,95,0.1);
  border: 1px solid rgba(255,95,95,0.35);
  color: var(--red);
}
.btn-cancel:hover { background: rgba(255,95,95,0.18); }
/* دکمه‌های تمام‌عرض به‌صورت مینیمال‌تر: عرض کامل نگیرند و کمی فاصله زیرشان باشد */
.btn-block {
  width: auto;
  align-self: center;
  min-width: 220px;
  max-width: 100%;
  margin: 4px auto 10px;
}

/* forms */
.field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; min-width: 0; }
.field-label { color: var(--muted); font-size: 13px; }
.input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  border-radius: 10px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  outline: none;
  transition: box-shadow .15s ease, border-color .15s ease;
  /* حیاتی: اگر فونت اینپوت زیر ۱۶px باشد، سافاری موبایل هنگام فوکوس صفحه را زوم می‌کند
     و بعد از رفتن به داشبورد هم زوم‌شده باقی می‌ماند. ۱۶px دقیقا آستانه امنِ این باگ است. */
  font-size: 16px;
}
.input:focus { border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(45,226,255,0.4), 0 0 16px rgba(45,226,255,0.25); }
textarea.input { resize: none; }
.grid { display: grid; gap: 12px; min-width: 0; }
.grid > * { min-width: 0; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 640px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* menu grid with entrance + hover animation */
.menu-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 20px; }
.menu-btn {
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(13, 18, 44, 0.72);
  border-radius: 20px;
  padding: 22px 14px;
  min-height: 128px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  text-align: center;
  cursor: pointer;
  font-weight: 700; font-size: 14px;
  color: var(--text);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.16),
    inset 0 0 0 1px rgba(255,255,255,0.04),
    0 10px 26px -12px rgba(0,0,0,0.55);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
  opacity: 0;
  animation: menuIn .45s ease forwards;
}
.menu-btn:nth-child(1) { animation-delay: .03s; }
.menu-btn:nth-child(2) { animation-delay: .09s; }
.menu-btn:nth-child(3) { animation-delay: .15s; }
.menu-btn:nth-child(4) { animation-delay: .21s; }
.menu-btn:nth-child(5) { animation-delay: .27s; }
.menu-btn:hover {
  transform: translateY(-3px);
  border-color: rgba(45,226,255,0.5);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.2),
    0 12px 32px -10px rgba(45,226,255,0.28),
    0 0 26px rgba(255,80,220,0.14);
  background: rgba(255,255,255,0.08);
}
.menu-btn:active { transform: translateY(-1px) scale(0.98); }
.menu-icon {
  width: 48px; height: 48px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
}
.menu-icon svg { width: 24px; height: 24px; }
.menu-btn span { white-space: nowrap; max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* ---- روی موبایل، فونت متن دکمه‌های منو کوچک‌تر می‌شود تا هرگز به دو خط نشکند ---- */
@media (max-width: 480px) {
  .menu-btn { font-size: 12.5px; padding: 18px 8px; min-height: 116px; }
  .menu-icon { width: 42px; height: 42px; }
  .menu-icon svg { width: 21px; height: 21px; }
}
@media (max-width: 360px) {
  .menu-btn { font-size: 11px; padding: 16px 6px; }
}

@keyframes menuIn {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.end-period-btn {
  width: 100%;
  margin-top: 10px;
  border-radius: 18px;
  padding: 16px;
  border: 1px dashed rgba(255,95,95,0.55);
  background: rgba(13, 18, 44, 0.72);
  color: var(--red);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: background .15s ease, transform .15s ease;
}
.end-period-btn:hover { background: rgba(255,95,95,0.16); transform: translateY(-1px); }

/* hero */
.hero {
  margin-top: 22px;
  border-radius: 24px;
  padding: 30px 26px;
  position: relative;
  overflow: hidden;
}
.hero-value {
  font-size: 52px;
  font-weight: 900;
  margin: 4px 0 0;
  letter-spacing: -1px;
  text-shadow: 0 0 12px currentColor, 0 0 28px currentColor;
}
.hero-meta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; font-size: 12px; color: var(--muted); }

/* stat cards */
.stat-card { padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.stat-icon { width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.stat-icon svg { width: 16px; height: 16px; }
.stat-label { font-size: 12px; color: var(--muted); }
.stat-value { font-size: 20px; font-weight: 700; margin-top: 2px; }
.stat-unit { font-size: 10px; color: var(--faint); }

/* chips */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 999px; font-size: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(13, 18, 44, 0.55);
  color: #C7CBE6;
  cursor: pointer;
  transition: all .15s ease;
}
.chip svg { width: 14px; height: 14px; }
.chip.active {
  background: rgba(45,226,255,0.15);
  border-color: var(--cyan);
  color: var(--cyan);
  box-shadow: 0 0 10px rgba(45,226,255,0.35);
}
.chip.other-active {
  background: rgba(255,255,255,0.14);
  border-color: #fff;
  color: #fff;
  box-shadow: 0 0 10px rgba(255,255,255,0.25);
}
.chip-wrap { display: flex; flex-wrap: wrap; gap: 8px; }

/* table / list */
.table-head, .table-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
  gap: 8px;
  padding: 10px 16px;
  font-size: 13px;
  align-items: center;
}
.table-head { color: var(--muted); font-size: 12px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.table-row { border-bottom: 1px solid rgba(255,255,255,0.05); }
.table-row:last-child { border-bottom: none; }
/* رفع باگ: بدون min-width:0 روی خانه‌های grid، متن بلند (مثل «علت» هزینه) عرض ستون را
   بیشتر از سهم واقعی‌اش می‌کند و چون .log-table دارای overflow:hidden است، متن به‌طور
   نامرئی برش می‌خورد. min-width:0 به هر خانه اجازه می‌دهد به‌درستی جمع و کوتاه شود. */
.table-head > *, .table-row > * { min-width: 0; }
.empty-state {
  text-align: center; padding: 40px 20px; font-size: 14px; color: var(--faint);
  border-style: dashed;
}

.trash-btn { background: none; border: none; cursor: pointer; color: var(--faint); padding: 2px; }
.trash-btn:hover { color: var(--red); }
.trash-btn svg { width: 14px; height: 14px; }

/* category breakdown */
.cat-row { padding: 16px; margin-bottom: 10px; }
.cat-row-top { display: flex; align-items: center; justify-content: space-between; font-size: 14px; }
.cat-bar-bg { height: 6px; border-radius: 999px; background: rgba(255,255,255,0.1); overflow: hidden; margin-top: 8px; }
.cat-bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--cyan), #fff); }
.cat-pct { font-size: 11px; color: var(--faint); margin-top: 4px; }

/* notes */
.note-item {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px; padding: 10px 14px; font-size: 14px; margin-bottom: 8px;
}
.note-date { font-size: 11px; color: var(--muted); margin-bottom: 2px; }

/* modal overlay */
.overlay {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(6,5,9,0.7);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
/* پنجره تاییدیه حذف باید همیشه روی بقیه پنجره‌ها (مثل «مدیریت سالن‌ها») بیاید */
.overlay.overlay-top { z-index: 70; }

.hall-row-actions { display: flex; gap: 10px; align-items: center; }

/* ---- چک‌باکس دسترسی سالن‌دار (اجازه ثبت میانگین وزن گله) ---- */
.perm-toggle {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 11px 13px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.03);
  font-size: 12.5px; color: var(--text); line-height: 1.5;
}
.perm-toggle input { width: 17px; height: 17px; accent-color: var(--cyan); cursor: pointer; flex-shrink: 0; }
.perm-toggle-sm { margin-top: 8px; padding: 7px 10px; font-size: 11.5px; }
.perm-toggle-sm input { width: 15px; height: 15px; }

/* آیکون ویرایش (مداد) دقیقا هم‌اندازه و هم‌سبک با دکمه سطل زباله */
.pencil-btn { background: none; border: none; cursor: pointer; color: var(--faint); padding: 2px; }
.pencil-btn:hover { color: var(--cyan); }
.pencil-btn svg { width: 14px; height: 14px; }

.modal {
  width: 100%; max-width: 400px;
  border-radius: 20px;
  padding: 24px;
}
.modal-title { font-size: 16px; font-weight: 700; margin: 0 0 8px; }
.modal-text { font-size: 13px; color: var(--muted); margin: 0 0 20px; line-height: 1.7; }
.modal-actions { display: flex; gap: 10px; }
.modal-actions .btn { flex: 1; }

/* auth screen */
.auth-screen {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 40px 20px; position: relative; overflow: hidden;
}

/* کارت ورود شیشه‌ای‌تر و روشن‌تر نسبت به سایر کارت‌های .glass تیره برنامه */
.auth-card {
  width: 100%; max-width: 400px; border-radius: 24px; padding: 28px; position: relative; z-index: 1;
  background: rgba(28, 24, 64, 0.42);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
}
.auth-brand { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 22px; }
.auth-brand-logo { width: min(300px, 76vw); height: auto; filter: drop-shadow(0 0 22px rgba(45,226,255,0.35)); }
.auth-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.auth-logo .logo-badge { width: 52px; height: 52px; }
.auth-logo .logo-badge svg { width: 26px; height: 26px; }
.auth-title { font-size: 18px; font-weight: 700; margin: 0; }
.auth-sub { font-size: 12px; color: var(--muted); margin: 2px 0 0; }
.auth-desc { font-size: 12px; color: var(--muted); margin: 14px 0 0; line-height: 1.7; }
.auth-tabs { display: flex; gap: 7px; margin: 18px 0 4px; }
/* هر سه تب دقیقا هم‌عرض و هم‌ارتفاع، و متن هرکدام حتما در یک سطر (بدون شکستن) جا می‌شود.
   flex:1 1 0 + min-width:0 یعنی عرض تب‌ها به طول متنشان وابسته نیست و همیشه یک‌اندازه‌اند. */
.auth-tab {
  flex: 1 1 0; min-width: 0;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 9px 4px; border-radius: 10px;
  font-size: 11.5px; font-weight: 700; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-height: 38px;
  cursor: pointer; border: 1px solid rgba(255,255,255,0.1); color: var(--muted);
  transition: all .15s ease;
}
.auth-tab.active { background: rgba(45,226,255,0.14); border-color: var(--cyan); color: var(--cyan); }
.error-text { color: var(--red); font-size: 12px; margin-top: 6px; min-height: 16px; }

.dash-logo { height: 26px; width: auto; display: block; }

.loader-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.spinner {
  width: 26px; height: 26px; border-radius: 999px;
  border: 3px solid rgba(45,226,255,0.25); border-top-color: var(--cyan);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.section-title {
  display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: #EAF0FF;
  margin: 24px 0 12px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
.section-title svg { width: 16px; height: 16px; }

.mt-6 { margin-top: 24px; }
.mt-4 { margin-top: 16px; }
.hide { display: none !important; }

.period-card { padding: 16px; margin-bottom: 10px; }
.period-card-top { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); }
.period-card-stats { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: 13px; }

/* ---- reminder banner (age-based reminders like vaccination) ---- */
.reminder-banner {
  padding: 16px 18px;
  border-color: rgba(255,201,60,0.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 10px 30px -12px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,201,60,0.12);
}
.reminder-banner + .reminder-banner { margin-top: 10px; }
.reminder-text { margin: 0; font-size: 13.5px; line-height: 1.8; color: var(--text); display: flex; gap: 8px; align-items: flex-start; }
.reminder-text svg { flex-shrink: 0; margin-top: 2px; color: var(--amber); }
.reminder-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 12px; }
.reminder-check { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); cursor: pointer; }
.reminder-check input { width: 16px; height: 16px; accent-color: var(--amber); cursor: pointer; }

/* ---- toast notifications ---- */
.toast-wrap {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 360px;
  padding: 0 16px;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  box-shadow: 0 10px 30px -10px rgba(0,0,0,0.6);
  animation: toastIn .25s ease forwards;
}
.toast-success {
  background: rgba(9, 28, 14, 0.97);
  border: 1px solid rgba(57,255,106,0.6);
  color: var(--green);
}
.toast-error {
  background: rgba(35, 8, 8, 0.97);
  border: 1px solid rgba(255,95,95,0.6);
  color: var(--red);
}
.toast-info {
  background: rgba(6, 22, 28, 0.97);
  border: 1px solid rgba(45,226,255,0.55);
  color: var(--cyan);
}
/* روی موبایل، پیغام‌ها را پایین‌تر از هدر می‌آوریم تا روی متن نام سالن نیفتد؛
   پس‌زمینه غیرشیشه‌ای بالا هم به‌عنوان محافظ دوم، خوانایی را در هر حالتی تضمین می‌کند. */
@media (max-width: 640px) {
  .toast-wrap { top: 76px; }
}
@keyframes toastIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---- notes: tidier layout ---- */
.note-list { display: flex; flex-direction: column; gap: 8px; }
.note-item {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px; padding: 12px 14px; font-size: 13.5px; margin-bottom: 0;
}
.note-item-body { min-width: 0; flex: 1; }
.note-date {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; color: var(--cyan);
  background: rgba(45,226,255,0.1); border: 1px solid rgba(45,226,255,0.25);
  border-radius: 999px; padding: 3px 10px; margin-bottom: 6px;
}
.note-text { margin: 0; line-height: 1.7; color: var(--text); word-break: break-word; }

/* ---- no-active-period dashboard (after ending a period) ---- */
.no-period-actions { display: flex; gap: 10px; margin-top: 20px; }
.no-period-actions .btn { flex: 1; }
.start-period-btn {
  width: 100%;
  margin-top: 12px;
  border-radius: 18px;
  padding: 16px;
  border: 1px dashed rgba(57,255,106,0.55);
  background: rgba(13, 18, 44, 0.72);
  color: var(--green);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: background .15s ease, transform .15s ease;
}
.start-period-btn:hover { background: rgba(57,255,106,0.16); transform: translateY(-1px); }

/* ---- auth screen: switch link between owner / barn-keeper login ---- */
.auth-switch-link {
  display: block; width: 100%; text-align: center; background: none; border: none;
  color: var(--cyan); font-size: 12.5px; margin-top: 16px; cursor: pointer; padding: 4px;
}
.auth-switch-link:hover { text-decoration: underline; }

/* ---- تیک نئونی «مرا به خاطر بسپار» ---- */
.remember-me-row {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  width: fit-content;
  margin-top: 6px; /* فاصلهٔ بیشتر از فیلد رمز عبور بالای آن */
  -webkit-tap-highlight-color: transparent;
}
/* چک‌باکس واقعی کاملاً نامرئی و بدون ظاهر بومی مرورگر است — فقط برای گرفتن تیک/کلیک
   استفاده می‌شود؛ ظاهر قابل‌مشاهده کاملاً توسط .remember-me-box (دو خط پایین‌تر) ساخته
   می‌شود. appearance:none این‌جا مشخصاً برای همین چک‌باکس اعمال شده (برخلاف ریست عمومی
   بالای فایل که چک‌باکس‌ها را مستثنی می‌کند) تا هیچ عنصر بومی اضافه‌ای زیر آن روی
   سافاری موبایل نمایش داده نشود. */
.remember-me-row input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}
.remember-me-box {
  width: 22px; height: 22px; border-radius: 7px; flex-shrink: 0;
  border: 1.5px solid rgba(45,226,255,0.45);
  background: rgba(13, 18, 44, 0.65);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.remember-me-box svg {
  display: block;
  width: 13px; height: 13px; color: #06121a;
  opacity: 0; transform: scale(0.4);
  transition: opacity .15s ease, transform .15s ease;
  pointer-events: none;
}
.remember-me-row input:checked ~ .remember-me-box {
  background: var(--cyan);
  border-color: var(--cyan);
  box-shadow: 0 0 4px rgba(45,226,255,0.9), 0 0 16px rgba(45,226,255,0.7);
}
.remember-me-row input:checked ~ .remember-me-box svg { opacity: 1; transform: scale(1); }
.remember-me-row:hover .remember-me-box { border-color: var(--cyan); }
.remember-me-label { font-size: 12.5px; color: var(--muted); font-weight: 600; }

/* ---- کارت ورود سریع (وقتی اطلاعات ورود قبلا با «مرا به خاطر بسپار» ذخیره شده) ---- */
.quick-login-name { font-size: 15px; font-weight: 800; color: #EAF0FF; margin: 14px 0 2px; text-align: center; }
.quick-login-hint { font-size: 12px; color: var(--muted); text-align: center; margin: 0 0 18px; }

/* ---- دکمه بازگشت به منوی اصلی: زیر وسط همه بخش‌ها ---- */
.back-home-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 26px auto 44px;
  padding: 12px 30px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.4);
  background: rgba(13, 18, 44, 0.72);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 8px 24px -10px rgba(0,0,0,0.5);
  transition: background .15s ease, transform .15s ease;
}
.back-home-btn svg { width: 16px; height: 16px; color: var(--cyan); }
.back-home-btn:hover { background: rgba(13, 18, 44, 0.9); transform: translateY(-1px); }
.back-home-btn:active { transform: scale(0.98); }

/* =========================================================
   افزوده‌های سامانه مرغیار (مرحله نهایی UI/UX)
   ========================================================= */

/* ---- انیمیشن نرم محو/پدیدار شدن برای کل صفحات و پنل‌ها ---- */
@keyframes screenFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.screen-fade { animation: screenFadeIn .38s ease both; }
@media (prefers-reduced-motion: reduce) {
  .screen-fade { animation: none; }
}

/* ---- فاصله بین آیکون تنظیمات و دکمه خروج در هدر ---- */
.header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* ---- منوی تنظیمات: چهار دکمه سبز (عرض محدود و وسط‌چین تا خیلی گشاد نباشند) ---- */
.settings-actions { margin: 4px auto 0; max-width: 360px; }
.btn-settings-action {
  border: 1px solid rgba(57,255,106,0.4);
  background: rgba(57,255,106,0.1);
  color: var(--green);
  border-radius: 14px;
  padding: 14px 12px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  text-align: center;
  line-height: 1.4;
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.btn-settings-action svg { width: 15px; height: 15px; flex-shrink: 0; }
.btn-settings-action:hover {
  background: rgba(57,255,106,0.2);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -12px rgba(57,255,106,0.45);
}
.btn-settings-action:active { transform: scale(0.98); }

/* ---- روی موبایل، دکمه‌های پنل تنظیمات (ویرایش تعداد/تلفات کل گله و...) در دو ستون جا
   نمی‌شوند و متن‌شان به دو خط می‌شکند؛ در یک ستون کامل نمایش داده می‌شوند تا متن هرکدام
   در یک خط جا شود ---- */
@media (max-width: 480px) {
  .settings-actions { grid-template-columns: 1fr; }
  .btn-settings-action { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* ---- مودال عریض‌تر (برای ثبت سالن‌دار) ---- */
.modal-wide { max-width: 460px; }

/* ---- نمایش پیام ارسال‌شده به پشتیبانی (نسخه فعلی: فقط نمایشی، بدون ثبت در سرور) ---- */
.support-sent-box {
  background: rgba(57,255,106,0.08);
  border: 1px solid rgba(57,255,106,0.3);
  border-radius: 14px;
  padding: 14px 16px;
  margin-top: 4px;
}
.support-sent-subject { font-size: 13px; font-weight: 800; color: var(--green); margin: 0 0 8px; }
.support-sent-message { font-size: 13.5px; color: var(--text); line-height: 1.8; margin: 0; white-space: pre-wrap; word-break: break-word; }

/* ---- ویجت فشرده قیمت مرغ زنده بالای داشبورد ---- */
.price-widget {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  margin: 4px auto 0;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,201,60,0.55);
  background: linear-gradient(135deg, rgba(255,201,60,0.34), rgba(255,201,60,0.12));
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  color: #fff;
  cursor: pointer;
  font-size: 12px;
  box-shadow: 0 8px 22px -12px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.2);
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.price-widget:hover {
  transform: translateY(-1px);
  border-color: rgba(255,201,60,0.8);
  background: linear-gradient(135deg, rgba(255,201,60,0.42), rgba(255,201,60,0.16));
}
.price-widget svg { width: 14px; height: 14px; color: #fff; flex-shrink: 0; }

/* ---- خانه «علت» در جدول ثبت روزانه: متن + دکمه حذف، با کوتاه‌شدن ایمن متن ---- */
.log-reason-cell { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; }
.log-reason-text {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- جدول ثبت‌های روزانه: نمای کارتی واکنش‌گرا در صفحات کوچک ---- */
@media (max-width: 640px) {
  .log-table .table-head { display: none; }
  .log-table .table-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
  }
  .log-table .table-row > span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
    width: 100%;
  }
  .log-table .table-row > span[data-label]::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 700;
    flex-shrink: 0;
  }
  .log-table .table-row > span.log-reason-cell { align-items: center; }
  .log-table .table-row > span.log-reason-cell .log-reason-text { text-align: left; }
}

/* ---- تب‌های ورود در صفحات خیلی باریک ---- */
@media (max-width: 380px) {
  .auth-tab { font-size: 10.5px; padding: 8px 2px; }
  .auth-tabs { gap: 5px; }
}

/* ---- ویدیوی پس‌زمینه صفحه ورود (اگر فایل branding/video/login-bg.mp4 موجود باشد) ----
   پیش‌فرض همیشه پنهان است؛ فقط وقتی body کلاس «show-login-bg» (صفحه ورود) و «video-ready»
   (بارگذاری موفق ویدیو، طبق app.js) را همزمان داشته باشد نمایش داده می‌شود؛ در غیر این
   صورت افکت Bokeh فعلی بدون هیچ خطایی جایگزین آن باقی می‌ماند. */
.login-bg-video {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
  filter: brightness(0.5) saturate(1.15);
  pointer-events: none;
}
body.show-login-bg.video-ready .login-bg-video { display: block; }
body.show-login-bg.video-ready .background { display: none; }

/* ==========================================================================
   افزوده‌های سامانه مرغیار (بازطراحی مرحله دوم UI/UX)
   ========================================================================== */

/* ---- کارت‌های شیشه‌ای صورتیِ کم‌رنگ برای نمایش مقادیر در مرحله تایید نهایی
   ویزارد شروع دوره — کاملا نمایشی هستند و رفتار دکمه (hover/cursor) ندارند ---- */
.review-chip {
  padding: 13px 16px;
  border-radius: 14px;
  background: rgba(255, 138, 186, 0.10);
  border: 1px solid rgba(255, 138, 186, 0.28);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  color: #FFDCEA;
  font-size: 13.5px;
  font-weight: 700;
  text-align: center;
}

/* ---- دکمه نهایی «شروع مدیریت گله»: کرمیِ متمایل به صورتی با متن شیشه‌ای تیره،
   و روی hover رنگ‌ها برعکس می‌شوند (پس‌زمینه شیشه‌ای، متن کرمی-صورتی) ---- */
.btn-flock-start {
  background: #F3D9CF;
  color: #0a0716;
  border: 1px solid rgba(243, 217, 207, 0.9);
  box-shadow: 0 0 20px rgba(243, 217, 207, 0.25);
}
.btn-flock-start:hover {
  background: rgba(243, 217, 207, 0.14);
  color: #F3D9CF;
  border-color: rgba(243, 217, 207, 0.55);
  box-shadow: 0 10px 26px -10px rgba(243, 217, 207, 0.25), 0 0 20px rgba(243, 217, 207, 0.12);
  transform: translateY(-1px);
}
.btn-flock-start:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

/* ---- دکمه طلایی «رفتن به سالن دیگر»: عریض ولی کوتاه، بالای همه‌ی دکمه‌های منو ---- */
.switch-hall-btn {
  width: 100%;
  max-width: 420px;
  margin: 0 0 16px;
  border-radius: 16px;
  padding: 12px 16px;
  border: 1px solid rgba(255, 201, 60, 0.5);
  background: rgba(255, 201, 60, 0.1);
  color: var(--amber);
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.switch-hall-btn svg { width: 18px; height: 18px; }
.switch-hall-btn:hover {
  background: rgba(255, 201, 60, 0.18);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -12px rgba(255, 201, 60, 0.35);
}

/* ---- کارت نام سالن که ویجت قیمت مرغ هم داخل همان جای گرفته (به‌جای پخش‌شدگی) ---- */
.hall-price-card {
  margin-top: 20px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  width: 100%;
}
.hall-name-text {
  font-size: 14px;
  font-weight: 800;
  color: #EAF0FF;
  padding-right: 6px;
}
.price-chip-inline {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,201,60,0.55);
  background: linear-gradient(135deg, rgba(255,201,60,0.34), rgba(255,201,60,0.12));
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  color: #fff;
  cursor: pointer;
  font-size: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.price-chip-inline:hover { transform: translateY(-1px); border-color: rgba(255,201,60,0.8); background: linear-gradient(135deg, rgba(255,201,60,0.42), rgba(255,201,60,0.16)); }
.price-chip-inline svg { width: 13px; height: 13px; color: #fff; flex-shrink: 0; }

/* ---- متن دو خطی داخل ویجت فشرده قیمت مرغ: خط اول قیمت، خط دوم نام استان ---- */
.price-chip-inline-text { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.price-chip-inline-row { display: flex; align-items: center; gap: 6px; }
.price-chip-inline-province { font-size: 9.5px; color: rgba(255,255,255,0.75); font-weight: 600; }

/* ---- سیستم تیکتینگ پشتیبانی ---- */
.ticket-list { display: flex; flex-direction: column; gap: 8px; max-height: 340px; overflow-y: auto; margin-bottom: 4px; }
.ticket-list-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%;
  background: linear-gradient(135deg, rgba(255,201,60,0.16), rgba(255,201,60,0.05));
  border: 1px solid rgba(255,201,60,0.4);
  border-radius: 14px;
  padding: 12px 14px;
  cursor: pointer;
  text-align: right;
  font-family: inherit;
  color: inherit;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.ticket-list-item:hover {
  transform: translateY(-1px);
  border-color: rgba(255,201,60,0.7);
  background: linear-gradient(135deg, rgba(255,201,60,0.24), rgba(255,201,60,0.09));
}
.ticket-list-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.ticket-list-subject { font-size: 13.5px; font-weight: 800; color: var(--amber); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticket-list-meta { font-size: 11px; color: rgba(255,201,60,0.65); }
.ticket-status-badge {
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid currentColor;
  background: rgba(255,255,255,0.04);
  white-space: nowrap;
}
.ticket-thread { display: flex; flex-direction: column; gap: 10px; max-height: 320px; overflow-y: auto; padding: 4px 2px; }
.ticket-bubble-row { display: flex; }
.ticket-bubble-row.row-user { justify-content: flex-end; }
.ticket-bubble-row.row-admin { justify-content: flex-start; }
.ticket-bubble {
  max-width: 82%;
  border-radius: 16px;
  padding: 10px 14px;
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
}
.ticket-bubble-text { margin: 0; font-size: 13.5px; line-height: 1.8; color: var(--text); white-space: pre-wrap; word-break: break-word; }
/* پیام کاربر: سبز شیشه‌ای */
.ticket-bubble.bubble-user {
  background: rgba(57, 255, 106, 0.16);
  border: 1px solid rgba(57, 255, 106, 0.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
  border-bottom-left-radius: 4px;
}
/* پاسخ ادمین: قرمز شیشه‌ای */
.ticket-bubble.bubble-admin {
  background: rgba(255, 95, 95, 0.16);
  border: 1px solid rgba(255, 95, 95, 0.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
  border-bottom-right-radius: 4px;
}

/* ---- منوی سفارشی انتخاب استان (جایگزین select بومی که پس‌زمینه/متن سفید و ناخوانا داشت) ---- */
.province-dropdown { position: relative; }
.province-dropdown-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: rgba(10, 8, 24, 0.85);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 12px;
  padding: 12px 14px;
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.province-dropdown-toggle:hover { border-color: rgba(45,226,255,0.5); }
.province-dropdown-toggle svg { width: 16px; height: 16px; color: var(--muted); flex-shrink: 0; transition: transform .2s ease; }
.province-dropdown.open .province-dropdown-toggle svg { transform: rotate(180deg); color: var(--cyan); }
.province-dropdown-list {
  position: absolute;
  z-index: 30;
  top: calc(100% + 8px);
  right: 0;
  left: 0;
  max-height: 0;
  overflow-y: auto;
  opacity: 0;
  transform: translateY(-6px) scaleY(0.96);
  transform-origin: top;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: rgba(10, 8, 24, 0.97);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 14px;
  padding: 0;
  box-shadow: 0 20px 44px -16px rgba(0,0,0,0.7);
  transition: max-height .22s ease, opacity .18s ease, transform .18s ease, padding .22s ease;
}
.province-dropdown.open .province-dropdown-list {
  max-height: 280px;
  opacity: 1;
  transform: translateY(0) scaleY(1);
  pointer-events: auto;
  padding: 8px;
}
.province-option {
  background: linear-gradient(135deg, rgba(255,201,60,0.22), rgba(255,201,60,0.08));
  border: 1px solid rgba(255,201,60,0.35);
  border-radius: 9px;
  text-align: right;
  padding: 9px 10px;
  margin-bottom: 4px;
  color: #fff;
  font-size: 13px;
  cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.province-option:last-child { margin-bottom: 0; }
.province-option:hover { background: linear-gradient(135deg, rgba(255,201,60,0.34), rgba(255,201,60,0.14)); border-color: rgba(255,201,60,0.6); color: #fff; }
.province-option.active { background: linear-gradient(135deg, rgba(255,201,60,0.42), rgba(255,201,60,0.18)); border-color: var(--amber); color: #fff; font-weight: 700; }

/* ---- حذف افکت درخشندگی (glow) از عدد قیمت مرغ / تعداد گله زنده / مجموع هزینه‌ها ---- */
.price-no-glow, .hero-no-glow { text-shadow: none; }

/* رنگ طلایی عدد «تعداد گله زنده» (بدون درخشندگی) */
.hero-gold { color: #FFC93C; text-shadow: none; }

/* عدد «مجموع هزینه‌ها»: سفید معمولی و بدون درخشندگی */
.hero-expense { color: #FFFFFF; text-shadow: none; font-size: 40px; }
.hero-expense .hero-unit { font-size: 16px; }

/* ---- پیام «دوره فعالی ندارید» با رنگ قرمز هشدار ---- */
.no-period-warning {
  color: var(--red);
  border-color: rgba(255,95,95,0.35);
  font-weight: 700;
}

/* =========================================================
   اطلاعیه‌های همگانی مدیریت سایت
   ========================================================= */

/* ---- اطلاعیه پنجره‌ای (Popup): یک‌بار نمایش داده می‌شود تا کاربر «متوجه شدم» را بزند ---- */
.announcement-modal .modal-title { display: flex; align-items: center; gap: 8px; color: var(--amber); }
.announcement-modal .modal-text {
  color: var(--text);
  font-size: 14px;
  line-height: 1.9;
  white-space: pre-wrap;
  word-break: break-word;
  margin-bottom: 22px;
}

/* ---- اطلاعیه دائمی (Banner): زیر منوی اصلی می‌ماند تا مدیر حذفش کند — با نور سفید
   چشمک‌زن دور کادر تا در میان بقیه بخش‌ها بلافاصله توجه را جلب کند ---- */
.announcement-banner {
  position: relative;
  padding: 16px 18px;
  margin-bottom: 14px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.5);
  animation: announcementGlow 2.2s ease-in-out infinite;
}
.announcement-banner + .announcement-banner { margin-top: 0; }
.announcement-banner-text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--text);
  display: flex;
  gap: 8px;
  align-items: flex-start;
  white-space: pre-wrap;
  word-break: break-word;
}
.announcement-banner-text svg { flex-shrink: 0; margin-top: 2px; color: var(--white-accent); }
@keyframes announcementGlow {
  0%, 100% { box-shadow: 0 0 6px 0 rgba(255,255,255,0.25), inset 0 1px 0 rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.35); }
  50% { box-shadow: 0 0 22px 4px rgba(255,255,255,0.55), inset 0 1px 0 rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.9); }
}
@media (prefers-reduced-motion: reduce) {
  .announcement-banner { animation: none; box-shadow: 0 0 14px 2px rgba(255,255,255,0.4); }
}

/* ==================== کامل بودن اطلاعات (روزهای جاافتاده / ثبت‌نام از وسط دوره) ====================
   هدف این بخش: کاربر هیچ‌وقت یک عدد اشتباه را بدون توضیح نبیند و فکر نکند سایت خراب است. */

/* ---- کارت وضعیت داده، بالای منوی اصلی ---- */
.data-status {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px; padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
}
.data-status-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.data-status-title { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 800; }
.data-status-title svg { width: 15px; height: 15px; flex-shrink: 0; }
.data-status-sub { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--muted); line-height: 1.7; }
.data-status-sub svg { width: 12px; height: 12px; flex-shrink: 0; }
.data-status.is-warn { border-color: rgba(255,95,95,0.4); background: rgba(255,95,95,0.08); }
.data-status.is-warn .data-status-title { color: var(--red); }
.data-status.is-today { border-color: rgba(255,201,60,0.4); background: rgba(255,201,60,0.08); }
.data-status.is-today .data-status-title { color: var(--amber); }
.data-status.is-ok { border-color: rgba(57,255,106,0.3); background: rgba(57,255,106,0.06); }
.data-status.is-ok .data-status-title { color: var(--green); }
.data-status-btn {
  padding: 9px 18px; border-radius: 999px; cursor: pointer;
  font-size: 12.5px; font-weight: 800; white-space: nowrap;
  color: #fff; background: rgba(255,255,255,0.09);
  border: 1px solid rgba(255,255,255,0.35);
  transition: background .15s ease;
}
.data-status-btn:hover { background: rgba(255,255,255,0.18); }

/* ---- نشانه «امروز ثبت نشده» روی کارت ثبت روزانه ---- */
.menu-btn.needs-today { border-color: rgba(255,201,60,0.55) !important; }
.today-flag {
  position: absolute; top: 6px; left: 6px;
  padding: 3px 8px; border-radius: 999px;
  font-size: 9.5px; font-weight: 800;
  color: #1a1405; background: var(--amber);
  z-index: 2;
}

/* ---- نوار کامل بودن اطلاعات در صفحه آمار ---- */
.completeness {
  padding: 14px 16px; margin-bottom: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
}
.completeness.is-warn { border-color: rgba(255,201,60,0.42); background: rgba(255,201,60,0.07); }
.completeness.is-ok { border-color: rgba(57,255,106,0.3); background: rgba(57,255,106,0.06); }
.completeness-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.completeness-title { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 800; }
.completeness-title svg { width: 15px; height: 15px; flex-shrink: 0; }
.completeness.is-warn .completeness-title { color: var(--amber); }
.completeness.is-ok .completeness-title { color: var(--green); }
.completeness-count { font-size: 11.5px; color: var(--muted); }
.completeness-bar {
  height: 6px; border-radius: 999px; margin: 10px 0 0;
  background: rgba(255,255,255,0.08); overflow: hidden;
}
.completeness-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--green); transition: width .3s ease; }
.completeness.is-warn .completeness-bar > span { background: var(--amber); }
.completeness-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex-wrap: wrap; margin-top: 12px;
  font-size: 12px; color: #D6DEF2; line-height: 1.9;
}
.completeness-action {
  padding: 7px 15px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  font-size: 11.5px; font-weight: 800;
  color: var(--cyan); background: rgba(45,226,255,0.12);
  border: 1px solid rgba(45,226,255,0.45);
}
.completeness-action:hover { background: rgba(45,226,255,0.22); }
.completeness-note { margin: 12px 0 0; font-size: 11px; color: var(--faint); line-height: 1.9; }

/* ---- کارت آماری با اطلاعات ناقص + دکمه «این عدد از کجا آمد؟» ---- */
.stat-card.is-incomplete { border-color: rgba(255,201,60,0.32); }
.stat-warn { display: inline-flex; vertical-align: middle; margin-inline-start: 5px; color: var(--amber); }
.stat-warn svg { width: 12px; height: 12px; }
.stat-explain {
  margin-top: 8px; padding: 0; cursor: pointer;
  background: none; border: none;
  font-size: 10.5px; font-weight: 700; color: var(--cyan);
  text-decoration: underline; text-underline-offset: 3px;
}
.stat-explain:hover { color: #fff; }

/* ---- پنجره «این عدد از کجا آمد؟» ---- */
.explain-box {
  margin-top: 6px; padding: 12px 14px; border-radius: 14px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
}
.explain-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-size: 12.5px; line-height: 2.1; color: #D6DEF2;
}
.explain-row.is-muted { color: var(--red); }
.explain-row > span:last-child { font-weight: 700; direction: ltr; }
.explain-sep { height: 1px; background: rgba(255,255,255,0.09); margin: 8px 0; }
.explain-formula {
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.09);
  font-size: 13px; color: #EAF0FF; direction: ltr; text-align: right;
}
.explain-formula b { color: var(--cyan); font-size: 15px; }
.explain-warn {
  margin: 10px 0 0; font-size: 11.5px; line-height: 1.9;
  color: var(--amber);
}

/* ---- پنجره جبران روزهای جاافتاده ---- */
.modal-head-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.catchup-dates { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
.catchup-date {
  padding: 5px 11px; border-radius: 999px;
  font-size: 11px; color: var(--muted);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
}
.catchup-warn {
  margin: 14px 0 0; padding: 11px 13px; border-radius: 12px;
  font-size: 11.5px; line-height: 1.95; color: #D6DEF2;
  background: rgba(45,226,255,0.07);
  border: 1px solid rgba(45,226,255,0.28);
}
.catchup-form { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.catchup-preview {
  margin: -4px 0 0; font-size: 11.5px; color: var(--cyan); line-height: 1.8;
}

/* ---- توضیح مرحله «مصرف تا امروز» در ویزارد شروع دوره ---- */
.wizard-note {
  padding: 12px 14px; border-radius: 12px; margin-bottom: 4px;
  font-size: 12px; line-height: 2; color: #D6DEF2;
  background: rgba(255,201,60,0.08);
  border: 1px solid rgba(255,201,60,0.32);
}
.wizard-note b { color: var(--amber); }
.wizard-hint { margin: -4px 0 0; font-size: 11.5px; color: var(--muted); line-height: 1.8; }

/* ---- رکورد «توزیع‌شده» در جدول ثبت‌های روزانه ---- */
.log-estimated-flag {
  display: inline-block; margin-inline-start: 6px;
  padding: 2px 7px; border-radius: 999px;
  font-size: 9.5px; font-weight: 700;
  color: var(--amber); background: rgba(255,201,60,0.13);
  border: 1px solid rgba(255,201,60,0.35);
}