/* ============================================================
   مدار | Orbit Calendar — استایل پایه
   فونت‌ها کاملاً لوکال هستند (assets/fonts)
   ============================================================ */

@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/Vazirmatn.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/JetBrainsMono.woff2') format('woff2');
  font-weight: 100 800;
  font-display: swap;
  font-style: normal;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; max-width: 100%; }

/* جلوگیری از انتخاب متن در کل سایت (حس اپ) + حذف های‌لایت لمس */
* {
  -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none;
}
input, textarea, select, [contenteditable="true"] {
  -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text;
}
body {
  font-family: 'Vazirmatn', 'Inter', system-ui, sans-serif;
  background: var(--bg, #F6F1EA);
  color: var(--ink, #211C16);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body[dir="ltr"] { font-family: 'Inter', 'Vazirmatn', system-ui, sans-serif; }

a { color: inherit; }
input, textarea, button, select { font-family: inherit; outline: none; }
::selection { background: var(--accent, #E0602B); color: #fff; }

/* اعداد و کدها با فونت مونو */
.mono { font-family: 'JetBrains Mono', 'Vazirmatn', monospace; }

/* انیمیشن‌ها */
@keyframes ocspin   { to { transform: rotate(360deg); } }
@keyframes ocspinr  { to { transform: rotate(-360deg); } }
@keyframes ocfade   { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes ocfadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes ocpop    { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }
@keyframes ocpulse  { 0%,100% { box-shadow: 0 0 0 0 var(--accent-soft, rgba(224,96,43,.4)); } 50% { box-shadow: 0 0 0 9px rgba(0,0,0,0); } }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .05ms !important; }
}

/* اسکرول‌بار */
.ocs::-webkit-scrollbar { width: 7px; height: 7px; }
.ocs::-webkit-scrollbar-thumb { background: var(--line, rgba(0,0,0,.14)); border-radius: 8px; }
.ocs::-webkit-scrollbar-track { background: transparent; }

/* کلاس‌های مشترک */
.surface {
  background: var(--surface, rgba(255,255,255,.72));
  border: 1px solid var(--line, rgba(33,28,22,.1));
  backdrop-filter: blur(var(--blur, 14px));
  -webkit-backdrop-filter: blur(var(--blur, 14px));
  box-shadow: var(--shadow, 0 14px 44px -16px rgba(80,50,25,.22));
}
.btn-accent {
  background: var(--accent, #E0602B); color: var(--accent-ink, #fff);
  border: none; border-radius: 13px; font-weight: 700; cursor: pointer;
  box-shadow: var(--glow, none); transition: filter .2s, transform .2s;
}
.btn-accent:hover { filter: brightness(1.08); }
.btn-accent:active { transform: scale(.98); }
.btn-ghost {
  background: transparent; border: 1px solid var(--line, rgba(33,28,22,.12));
  color: var(--ink, #211C16); border-radius: 12px; cursor: pointer; transition: all .2s;
}
.btn-ghost:hover { border-color: var(--accent, #E0602B); color: var(--accent, #E0602B); }

.field {
  width: 100%; padding: 12px 14px; border-radius: 13px;
  border: 1px solid var(--line, rgba(33,28,22,.14));
  background: var(--bg2, #FBF8F3); color: var(--ink, #211C16);
  font-size: 14px; transition: border-color .2s, box-shadow .2s;
}
.field:focus { border-color: var(--accent, #E0602B); box-shadow: 0 0 0 3px var(--accent-soft, rgba(224,96,43,.13)); }

:focus-visible { outline: 2px solid var(--accent, #E0602B); outline-offset: 2px; }

/* مودال */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(20,12,6,.42); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  animation: ocfade .25s ease;
}
.modal-card {
  width: min(440px, 94vw); border-radius: 26px; padding: 30px 28px;
  background: var(--surface-solid, #fff); border: 1px solid var(--line, rgba(33,28,22,.1));
  box-shadow: 0 30px 80px -24px rgba(40,20,8,.5);
  animation: ocpop .3s cubic-bezier(.2,.7,.3,1); max-height: 94vh; overflow-y: auto;
}

.toast-wrap { position: fixed; bottom: 96px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast {
  padding: 11px 18px; border-radius: 14px; font-size: 13px; font-weight: 600;
  background: var(--surface-solid, #fff); border: 1px solid var(--line, rgba(0,0,0,.1));
  box-shadow: 0 12px 36px -12px rgba(0,0,0,.4); animation: ocfade .25s ease;
}
.toast.err { border-color: #d6517e; color: #d6517e; }
.toast.ok  { border-color: var(--accent, #E0602B); color: var(--accent, #E0602B); }

/* واکنش‌گرایی برای موبایل */
@media (max-width: 760px) {
  .hide-mobile { display: none !important; }

  /* هدر: کاربر و برند در یک ردیف، انتخابگرها در ردیف بعدی تمام‌عرض */
  .oc-header {
    display: flex !important; flex-wrap: wrap; gap: 10px 8px !important;
    padding: 12px 14px !important; justify-content: space-between;
  }
  .oc-header > div:nth-child(1) { order: 1; }   /* کاربر/ورود */
  .oc-header > div:nth-child(3) { order: 2; }   /* برند */

  /* در موبایل انتخابگرهای وسطِ هدر و ناوبریِ دسکتاپ پنهان می‌شوند */
  .oc-head-selectors { display: none !important; }
  .oc-nav-desktop { display: none !important; }
  .oc-mobile-controls { display: flex !important; }

  /* فوتر و دکمه‌هایش در موبایل جمع‌وجورتر */
  .oc-footer { padding: 6px 10px 10px !important; gap: 6px !important; justify-content: center !important; }
  .oc-footer-side { display: none !important; }   /* تم و زبان در موبایل به پروفایل منتقل می‌شوند */
  .oc-only-mobile { display: flex !important; }
  .oc-dock { padding: 6px !important; gap: 4px !important; }
  .oc-dock button { padding: 8px 11px !important; font-size: 12px !important; }
  .oc-theme-bar { gap: 4px !important; padding: 5px !important; }
  .oc-theme-bar button { width: 27px !important; height: 27px !important; }
  .oc-theme-bar button span { width: 14px !important; height: 14px !important; }
  .oc-lang-bar { gap: 3px !important; padding: 5px !important; }
  .oc-lang-bar button { min-width: 30px !important; height: 27px !important; font-size: 12px !important; }

  /* صفحه‌های اسکرولی: پدینگ پایینِ معمولی (فوتر دیگر شناور نیست) */
  main.ocs { padding: 14px 16px 20px !important; }

  /* پاپ‌آپ و مودال درون عرض صفحه */
  .modal-card { max-width: 94vw !important; width: 94vw !important; padding: 18px !important; }
}

/* صفحه‌های خیلی باریک */
@media (max-width: 400px) {
  .oc-header > div:nth-child(3) span:first-child { font-size: 16px !important; }
  .oc-dock button span:last-child { font-size: 11px !important; }
  .oc-dock button span:first-child { display: none; } /* فقط آیکون در صفحه‌های خیلی باریک */
}


/* ===== جلوگیری از سرریز و مهار محتوای برنامه ===== */
#app { position: relative; height: 100vh; height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }
#app, #app * { box-sizing: border-box; }
/* صفحه‌هایی که ممکن است بلند شوند، داخل خودشان اسکرول دارند نه کل صفحه */
.oc-scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* ===== فوترِ پایین (تم · داک · زبان) — در جریان، چسبیده به ته ===== */
.oc-footer { background: linear-gradient(to top, var(--bg2, rgba(251,248,243,.96)) 60%, transparent); }
.oc-only-mobile { display: none; }   /* فقط در موبایل نمایش داده می‌شود */

/* ===== میوپ: تقویم دوستونی در دسکتاپ (باکس روز سمت چپ، گرید سمت راست) ===== */
@media (min-width: 761px) {
  .oc-mewp-cal { flex-direction: row !important; align-items: flex-start; gap: 22px !important; }
  .oc-mewp-grid { flex: 0 0 360px; }
  .oc-mewp-daybox { flex: 1; min-width: 0; position: sticky; top: 0; }
}
.oc-mewp-cal { max-width: 820px; }

/* ===== ستون‌های ساعت‌چین: بدون اسکرول‌بار ===== */
.oc-tpcol { scrollbar-width: none; -ms-overflow-style: none; }
.oc-tpcol::-webkit-scrollbar { display: none; }
.oc-noscroll { scrollbar-width: none; -ms-overflow-style: none; }
.oc-noscroll::-webkit-scrollbar { display: none; width: 0; height: 0; }
.oc-p2col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 860px) { .oc-p2col { grid-template-columns: 1fr !important; } }
.oc-scroll-soft { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--accent) transparent; }
.oc-scroll-soft::-webkit-scrollbar { width: 8px; }
.oc-scroll-soft::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
.oc-scroll-soft::-webkit-scrollbar-track { background: transparent; }
.oc-scroll-x { scrollbar-width: thin; scrollbar-color: var(--accent) transparent; }
.oc-scroll-x::-webkit-scrollbar { height: 7px; }
.oc-scroll-x::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
.oc-hub { transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease; }
.oc-hub:hover { transform: translate(-50%, -50%) scale(1.035); box-shadow: var(--shadow), 0 14px 36px -14px rgba(224,96,43,.5); }
.oc-hub:active { transform: translate(-50%, -50%) scale(.97); transition-duration: .08s; }
.oc-hub .oc-hub-hint { transition: opacity .2s ease; }
.oc-hub:hover .oc-hub-hint { opacity: 1; }

/* ===== پنل مدیریت: گرید رویدادها روی موبایل ===== */
@media (max-width: 720px) { .oc-adm-events { grid-template-columns: 1fr !important; } }
@media (max-width: 880px) { .oc-adm-settings { grid-template-columns: 1fr !important; } }
.oc-scrollbox { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--accent) transparent; }
.oc-scrollbox::-webkit-scrollbar { width: 9px; height: 9px; }
.oc-scrollbox::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 9px; border: 2px solid transparent; background-clip: padding-box; }
.oc-scrollbox::-webkit-scrollbar-thumb:hover { background: var(--accent); }
.oc-scrollbox::-webkit-scrollbar-track { background: transparent; }
.oc-scrollbox thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-solid, #fff); }

/* ===== پری‌لودر ===== */
#oc-preloader {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg2, #FBF8F3);
  transition: opacity .45s ease;
}
#oc-preloader.hide { opacity: 0; pointer-events: none; }
.oc-pre-orbit {
  position: relative; width: 78px; height: 78px; border-radius: 50%;
  border: 1.5px solid var(--accent, #E0602B);
}
.oc-pre-orbit::before {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: var(--accent, #E0602B); box-shadow: 0 0 16px rgba(224,96,43,.55);
}
.oc-pre-orbit::after {
  content: ''; position: absolute; top: -4px; left: 50%;
  width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%;
  background: var(--accent, #E0602B);
  transform-origin: 4.5px 43px; animation: ocspin 1.5s linear infinite;
}

/* ===== ستون کناری داشبورد ===== */
:root { --oc-banner-h: 0px; }
body.has-extbanner { --oc-banner-h: 46px; }
.oc-aside {
  position: fixed; inset-inline-start: 18px; top: calc(92px + var(--oc-banner-h)); width: 290px;
  max-width: calc(100vw - 36px); max-height: calc(100vh - 180px - var(--oc-banner-h));
  overflow-y: auto; z-index: 15;
  display: flex; flex-direction: column; gap: 14px;
}
.oc-aside-left {
  position: fixed; inset-inline-end: 18px; top: calc(92px + var(--oc-banner-h)); width: 268px;
  max-width: calc(100vw - 36px); max-height: calc(100vh - 180px - var(--oc-banner-h));
  overflow-y: auto; z-index: 15;
  display: flex; flex-direction: column; gap: 12px;
}
@media (max-width: 1024px) { .oc-aside, .oc-aside-left, .oc-clock { display: none !important; } }

/* ===== انیمیشن‌های زندهٔ آب‌وهوا ===== */
@keyframes ocWxSpin { to { transform: rotate(360deg); } }
@keyframes ocWxDrift { 0%,100% { transform: translateX(-1px); } 50% { transform: translateX(1.6px); } }
@keyframes ocWxPass { 0% { transform: translateX(-30px); opacity:0; } 18%,82% { opacity:.45; } 100% { transform: translateX(30px); opacity:0; } }
@keyframes ocWxRain { 0% { transform: translateY(-3px); opacity:0; } 30% { opacity:1; } 100% { transform: translateY(7px); opacity:0; } }
@keyframes ocWxSnow { 0% { transform: translateY(-3px); opacity:0; } 30% { opacity:1; } 100% { transform: translateY(7px); opacity:0; } }
@keyframes ocWxFlash { 0%,90%,100% { opacity:.95; } 92% { opacity:.15; } 94% { opacity:1; } 96% { opacity:.3; } 98% { opacity:1; } }
@keyframes ocWxBreeze { 0% { transform: translateX(-12px); opacity:0; } 45% { opacity:.85; } 100% { transform: translateX(16px); opacity:0; } }
.oc-wx-rays   { transform-box: view-box; transform-origin: 12px 12px; animation: ocWxSpin 9s linear infinite; }
.oc-wx-rays-s { transform-box: view-box; transform-origin: 8px 8px; animation: ocWxSpin 9s linear infinite; }
.oc-wx-drift  { transform-box: fill-box; transform-origin: center; animation: ocWxDrift 4s ease-in-out infinite; }
.oc-wx-pass   { transform-box: fill-box; animation: ocWxPass 7s ease-in-out infinite; }
.oc-wx-rdrop  { transform-box: fill-box; animation: ocWxRain 1.1s linear infinite; }
.oc-wx-sflake { transform-box: fill-box; animation: ocWxSnow 1.9s linear infinite; }
.oc-wx-bolt   { animation: ocWxFlash 3.2s ease-in-out infinite; }
.oc-wx-breeze { transform-box: fill-box; animation: ocWxBreeze 2.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .oc-wx-rays,.oc-wx-rays-s,.oc-wx-drift,.oc-wx-pass,.oc-wx-rdrop,.oc-wx-sflake,.oc-wx-bolt,.oc-wx-breeze { animation: none !important; }
}