/* WS Clinic Booking Core — پورتالِ فرانتِ پرسنل (دکتر/اپتومتر/منشی)
   زبانِ بصری از پلاگینِ رزروِ پیلاتس الگو گرفته شده. این پوسته زیرِ قالبِ سایتِ خودش رندر می‌شود
   (portal-template.php هیچ header.php/footer.php ای صدا نمی‌زند، ولی wp_head() هنوز استایل‌شیتِ خودِ
   قالب را لود می‌کند) — خیلی از قالب‌ها روی تگ‌های عمومی مثل table/td/button/input/a استایلِ اختصاصیِ
   خودشان را می‌گذارند و چون بارگذاری‌شان می‌تواند بعد از این فایل باشد رویِ همه‌چیز اینجا غالب می‌شوند؛
   دقیقاً به همین دلیل (هم‌الگوی pilates-booking-core/assets/css/portal.css) تقریباً همه‌جایِ این فایل
   !important دارد. کامپوننت‌های پایه (کارت/فیلد/دکمه/pill/سوییچ/تقویمِ شمسی) هم‌نامِ متغیرها و هم‌نامِ
   کلاس‌های assets/css/admin.css اند — چون همان توابعِ PHP رندرِ بدنه بدونِ هیچ تغییری اینجا هم صدا زده
   می‌شوند. رنگ‌ها/فونتِ قابل‌تنظیمِ فرانت با یک <style> درون‌خطی بعد از این فایل اضافه می‌شود
   (wsc_build_frontend_theme_css). */

/* از وقتی /panel/ با قالبِ مستقلِ خودش رندر می‌شود، این حاشیه روی خودِ body باید فاصله‌ی لازم را از
   لبه‌های واقعیِ صفحه تامین کند — وگرنه نوارِ بالا (که گوشه‌های بالاییِ گرد دارد) دقیقاً چسبیده به لبه‌ی
   مرورگر/گوشی دیده می‌شود و آن گردی اصلاً به چشم نمی‌آید. */
body.wsc-portal-page-body {
    margin: 0 !important;
    padding: 20px !important;
    background: #f8fafc !important;
    box-sizing: border-box;
}
@media (max-width: 900px) {
    body.wsc-portal-page-body { padding: 10px !important; }
}

.wsc-portal-wrap {
    direction: rtl;
    text-align: right;
    --wsc-primary: var(--wsc-fe-primary, #2271b1);
    --wsc-primary-dark: var(--wsc-fe-primary-dark, #195a8d);
    --wsc-ink: var(--wsc-fe-text, #0f172a);
    --wsc-muted: #64748b;
    --wsc-text-strong: #334155;
    --wsc-border: var(--wsc-fe-border, #e2e8f0);
    --wsc-border-soft: #f1f5f9;
    --wsc-form-border: #cbd5e1;
    --wsc-bg: #f8fafc;
    --wsc-surface: var(--wsc-fe-bg, #ffffff);
    --wsc-success: var(--wsc-fe-success, #1e7b1e);
    --wsc-success-bg: #ecfdf5;
    --wsc-danger: var(--wsc-fe-danger, #c0392b);
    --wsc-danger-bg: #fef2f2;
    --wsc-warning: #96590a;
    --wsc-warning-bg: #fff7ed;
    --wsc-empty-bg: #ecfdf5;
    --wsc-empty-border: #a7f3d0;
    --wsc-held-bg: #fff7ed;
    --wsc-held-border: #fdba74;
    --wsc-held-text: #b45309;
    --wsc-noshow-bg: #fef2f2;
    /* عمداً مقدارِ ثابت نیست — اگر رنگِ اصلیِ فرانت از تنظیمات عوض شود، این هاور باید هم‌خانواده بماند
       وگرنه متنِ رنگیِ رویش کم‌کنتراست می‌شود (باگی که در نسخه‌ی خواهر کشف شد). */
    --wsc-hover-bg: color-mix(in srgb, var(--wsc-primary) 15%, var(--wsc-surface));
    --wsc-radius-lg: 16px;
    --wsc-radius-md: 12px;
    --wsc-radius-sm: 8px;
    --wsc-shadow-card: 0 10px 25px -5px rgba(15, 23, 42, .06), 0 8px 10px -6px rgba(15, 23, 42, .02);
    --wsc-shadow-card-hover: 0 20px 25px -5px rgba(15, 23, 42, .08);
    font-family: var(--wsc-fe-font-family, inherit) !important;
    font-size: var(--wsc-fe-font-size, 15px) !important;
    font-weight: var(--wsc-fe-font-weight, 400) !important;
    color: var(--wsc-ink) !important;
    background: var(--wsc-bg) !important;
    min-height: calc(100vh - 40px);
}
@media (max-width: 900px) {
    .wsc-portal-wrap { min-height: calc(100vh - 20px); }
}
.wsc-portal-wrap * { box-sizing: border-box; font-family: inherit !important; }
/* عمداً بدونِ !important: این فقط رنگِ پیش‌فرضِ لینک‌های بدونِ کلاسِ خاص (مثلاً داخلِ متنِ راهنما) است.
   اگر !important می‌داشت، چون (کلاس+تگ) از (تکْ‌کلاسِ) خیلی از کامپوننت‌های دیگر (nav-link/logout/
   date-list a/week-day و ...) specificity ی بالاتری دارد، رنگِ آن‌ها را هم می‌بلعید — دقیقاً همون باگی
   که دکمه‌ی خروج را آبی‌رویِ‌آبی (ناخوانا) و تیترهای سایدبار را به‌جایِ مشکی، آبی نشان می‌داد. */
.wsc-portal-wrap a { color: var(--wsc-primary); }

/* ---------- نوارِ بالا ---------- */

.wsc-portal-topbar {
    display: flex !important; align-items: center !important; gap: 14px !important;
    background: linear-gradient(135deg, var(--wsc-primary), var(--wsc-primary-dark)) !important;
    color: #fff !important; padding: 12px 20px !important; position: sticky !important; top: 0 !important; z-index: 40 !important;
    box-shadow: 0 4px 14px rgba(0,0,0,.1) !important; margin: 0 !important; border-radius: var(--wsc-radius-lg) var(--wsc-radius-lg) 0 0 !important;
}
/* روی دسکتاپ هم این دکمه لازم است — نه فقط برایِ موبایل — چون کلیک رویش سایدبار را کاملاً جمع می‌کند
   تا فضایِ کاریِ محتوا بزرگ‌تر شود (کلاسِ wsc-portal-collapsed پایین‌تر)؛ رفتارِ کشوییِ موبایل
   (wsc-open) کاملاً جدا و فقط زیرِ همون مدیاکوئری فعال است، پس یک دکمه هر دو نقش را بدونِ تداخل بازی می‌کند. */
.wsc-portal-menu-toggle {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    background: rgba(255,255,255,.18) !important; border: none !important; color: #fff !important;
    width: 36px !important; height: 36px !important; border-radius: var(--wsc-radius-sm) !important; font-size: 18px !important; cursor: pointer !important; flex-shrink: 0;
}
.wsc-portal-menu-toggle:hover { background: rgba(255,255,255,.3) !important; }
.wsc-portal-brand { display: flex !important; align-items: center !important; gap: 10px !important; font-weight: 800 !important; font-size: 15px !important; color: #fff !important; }
.wsc-portal-brand-logo { font-size: 22px; }
.wsc-portal-user { margin-inline-start: auto; display: flex !important; align-items: center !important; gap: 14px !important; font-size: 13px !important; color: #fff !important; }
.wsc-portal-user-name { font-weight: 700 !important; color: #fff !important; }
.wsc-portal-logout { color: #fff !important; text-decoration: underline !important; opacity: .9; }
.wsc-portal-logout:hover { opacity: 1; color: #fff !important; }

/* ---------- بدنه: سایدبار + محتوا ---------- */

.wsc-portal-body { display: flex !important; align-items: flex-start !important; max-width: 1320px; margin: 0 auto !important; }
.wsc-portal-sidebar {
    width: 220px !important; flex-shrink: 0; padding: 18px 12px !important; position: sticky !important; top: 58px;
    height: calc(100vh - 58px); overflow-y: auto !important; display: flex !important; flex-direction: column !important; gap: 2px !important;
    background: transparent !important; border: none !important;
}
.wsc-portal-nav-link {
    display: flex !important; align-items: center !important; gap: 10px !important; padding: 10px 12px !important; border-radius: var(--wsc-radius-sm) !important;
    color: var(--wsc-ink) !important; text-decoration: none !important; font-size: 13px !important; font-weight: 700 !important;
    transition: background .12s ease;
}
.wsc-portal-nav-link:hover { background: var(--wsc-surface) !important; }
.wsc-portal-nav-link.active { background: var(--wsc-primary) !important; color: #fff !important; box-shadow: 0 4px 10px rgba(0,0,0,.12) !important; }
.wsc-portal-nav-icon { font-size: 16px; width: 22px; text-align: center; flex-shrink: 0; }
/* overflow-x:hidden یک شبکه‌ی امنیتیِ دوم است: اگر بچه‌ی دیگری هم در آینده از عرض بزند بیرون، فقط همان
   بخش کلیپ می‌شود نه اینکه کل صفحه اسکرولِ افقی بگیرد. برایِ position:sticky نوارِ بالا بی‌خطر است چون
   .wsc-portal-topbar یک sibling است، نه فرزندِ .wsc-portal-content. */
.wsc-portal-content { flex: 1; min-width: 0; overflow-x: hidden; padding: 20px 22px 60px !important; }
.wsc-portal-overlay { display: none; }

.wsc-portal-page-header { display: flex !important; align-items: center !important; gap: 12px !important; margin-bottom: 18px !important; }
.wsc-portal-page-icon {
    font-size: 24px !important; width: 44px !important; height: 44px !important; flex-shrink: 0; border-radius: var(--wsc-radius-md) !important;
    background: var(--wsc-surface) !important; border: 1px solid var(--wsc-border) !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
}
.wsc-portal-page-header h1 { margin: 0 !important; font-size: 18px !important; font-weight: 800 !important; color: var(--wsc-ink) !important; }
.wsc-portal-page-header p { margin: 2px 0 0 !important; font-size: 12.5px !important; color: var(--wsc-muted) !important; }

/* ---------- دیوارِ ورود / عدم‌دسترسی ---------- */

.wsc-portal-guest {
    display: flex !important; align-items: center !important; justify-content: center !important; min-height: 100vh; padding: 20px !important;
}
.wsc-portal-login-card {
    background: var(--wsc-surface) !important; border: 1px solid var(--wsc-border-soft) !important; border-radius: var(--wsc-radius-lg) !important;
    padding: 36px 32px !important; max-width: 380px; width: 100%; text-align: center !important; box-shadow: var(--wsc-shadow-card) !important;
}
.wsc-portal-login-logo { font-size: 40px; margin-bottom: 10px; }
.wsc-portal-login-card h2 { margin: 0 0 6px !important; font-size: 18px !important; font-weight: 800 !important; color: var(--wsc-ink) !important; }
.wsc-portal-login-card form { margin-top: 18px !important; text-align: start !important; }
.wsc-portal-login-card p.login-username,
.wsc-portal-login-card p.login-password { margin-bottom: 12px !important; }
.wsc-portal-login-card label { display: block !important; font-size: 12px !important; font-weight: 700 !important; margin-bottom: 6px !important; color: var(--wsc-text-strong) !important; }
.wsc-portal-login-card input[type="text"],
.wsc-portal-login-card input[type="password"] {
    width: 100% !important; border-radius: var(--wsc-radius-sm) !important; border: 1px solid var(--wsc-form-border) !important; background: var(--wsc-bg) !important;
    padding: 9px 10px !important; font-size: 13px !important; color: var(--wsc-text-strong) !important;
}
.wsc-portal-login-card p.login-submit { margin-top: 16px !important; }
.wsc-portal-login-card input[type="submit"] {
    width: 100% !important; background: var(--wsc-primary) !important; border: none !important; color: #fff !important; border-radius: var(--wsc-radius-sm) !important;
    padding: 10px !important; font-size: 13px !important; font-weight: 700 !important; cursor: pointer !important; transition: background .12s ease;
}
.wsc-portal-login-card input[type="submit"]:hover { background: var(--wsc-primary-dark) !important; }
.wsc-portal-login-card p.login-remember { font-size: 12px !important; margin-top: 10px !important; text-align: center !important; }
.wsc-portal-btn {
    display: inline-block !important; background: var(--wsc-primary) !important; color: #fff !important; text-decoration: none !important;
    border-radius: var(--wsc-radius-sm) !important; padding: 9px 20px !important; font-size: 13px !important; font-weight: 700 !important;
}

/* ================= کامپوننت‌های مشترک (عیناً از admin.css، فقط اسکوپِ کلاسِ ریشه فرق دارد) ================= */

/* شبکه‌ی امنیتیِ عمومی: تم‌هایِ ووکامرسی مثلِ وودمارت یک قانونِ سراسری از این جنس دارند:
   :is(.btn,.button,button,[type=submit],[type=button]) { min-height: ...px !important; ... }
   — که چون رویِ کلِ سایت (نه فقط دکمه‌هایِ خودِ تم) اثر می‌گذارد، هر <button>/[type=submit] داخلِ
   همین پلاگین هم بلند/بزرگ می‌شود. اینجا عمداً فقط داخلِ .wsc-portal-wrap اسکوپ شده — یعنی فقط رویِ
   دکمه‌هایِ خودِ پلاگین اثر می‌گذارد و به هیچ دکمه‌ی دیگری در بقیه‌ی سایت/تم دست نمی‌زند. */
.wsc-portal-wrap :is(.btn, .button, button, [type="submit"], [type="button"]) {
    min-height: 0 !important; max-height: none !important;
}

/* تمِ سایت (مثلاً ووکامرسی‌هایی مثلِ وودمارت) معمولاً کلاسِ عمومیِ .button را در کلِ سایت با
   min-height/line-height/text-transform/letter-spacing/box-sizing خودش بازطراحی می‌کند — چون این نام‌ها
   ژنریک و مشترک‌اند، دکمه‌های خودِ پلاگین هم قربانی می‌شوند و خیلی بلندتر/بزرگ‌تر از چیزی که اینجا تعریف
   شده دیده می‌شوند. این پراپرتی‌هایِ اضافه (که تا الان اصلاً ست نمی‌شدند و جا برایِ تمِ سایت باز می‌گذاشتند)
   صریحاً ریست می‌شوند تا دکمه‌ها مستقل از قالبِ سایت همیشه یک‌شکل بمانند. */
.wsc-portal-wrap .button,
.wsc-portal-wrap .button-secondary {
    display: inline-block !important; border-radius: var(--wsc-radius-sm) !important; border: 1px solid var(--wsc-form-border) !important; background: var(--wsc-border-soft) !important;
    color: var(--wsc-text-strong) !important; box-shadow: none !important; padding: 7px 14px !important; height: auto !important; min-height: 0 !important; max-height: none !important;
    line-height: 2 !important; font-size: 13px !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: normal !important; box-sizing: border-box !important;
    vertical-align: middle !important; margin: 0 !important; width: auto !important; min-width: 0 !important;
    cursor: pointer !important; text-decoration: none !important; transition: transform .1s ease, border-color .12s ease, background .12s ease;
}
.wsc-portal-wrap .button:hover,
.wsc-portal-wrap .button-secondary:hover { border-color: var(--wsc-primary) !important; color: var(--wsc-primary) !important; background: var(--wsc-surface) !important; }
.wsc-portal-wrap .button:active { transform: translateY(1px); }
.wsc-portal-wrap .button.button-primary {
    background: var(--wsc-primary) !important; border: none !important; color: #fff !important; padding: 8px 16px !important; font-weight: 700 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,.15) !important;
}
.wsc-portal-wrap .button.button-primary:hover { background: var(--wsc-primary-dark) !important; color: #fff !important; transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,.2) !important; }
.wsc-portal-wrap .button.button-primary:disabled,
.wsc-portal-wrap .button.button-primary[disabled] { color: #fff !important; }
.wsc-portal-wrap .button:disabled,
.wsc-portal-wrap .button[disabled] { opacity: .5 !important; cursor: not-allowed !important; transform: none; }
/* شبکه‌ی محافظ: چند دکمه (مثلِ لغوِ نهایی در «لغو همگانی») اول با متنِ خالی و display:none رندر
   می‌شوند و فقط بعدِ یک پاسخِ AJAX با jQuery .text().show() پر/نمایان می‌شوند — این قانون همیشه چنین
   دکمه‌ای را (تا وقتی واقعاً متنی داشته باشد) مخفی نگه می‌دارد. */
/* :not(input) حیاتی است — <input> یک تگِ void است و همیشه با :empty مچ می‌شود؛ بدونِ این استثنا، این
   قانون خودِ دکمه‌ی ورودِ wp_login_form() (روی دیوارِ ورودِ پورتال، یک <input type="submit"> است) را هم
   کاملاً مخفی می‌کرد — یک باگِ واقعی که در نسخه‌ی خواهر (base plugin) کشف و رفع شده بود. */
.wsc-portal-wrap .button:empty:not(input) { display: none !important; }
/* min-height/max-height/box-sizing/line-height صریح لازم است — این‌ها هر دو معمولاً <button> هستند
   (نه <a>)، پس هم اندازه‌ی پیش‌فرضِ نیتیوِ فرم‌کنترل‌هایِ مرورگر هم قانونِ سراسریِ تمِ سایت رویِ
   button (مثلِ :is(...,button,...) در وودمارت) رویشان اثر می‌گذارد. */
.wsc-portal-wrap .button-link-delete {
    color: var(--wsc-danger) !important; text-decoration: none !important; font-size: 12px !important; font-weight: 600 !important; border-radius: 6px !important; padding: 2px 8px !important; background: none !important; border: none !important; cursor: pointer !important;
    min-height: 0 !important; max-height: none !important; height: auto !important; line-height: 1.6 !important; box-sizing: border-box !important; text-transform: none !important; letter-spacing: normal !important; margin: 0 !important; width: auto !important;
}
.wsc-portal-wrap .button-link-delete:hover { background: var(--wsc-danger-bg) !important; }
.wsc-portal-wrap .button-link {
    color: var(--wsc-primary) !important; text-decoration: none !important; font-size: 12px !important; font-weight: 600 !important; border-radius: 6px !important; padding: 2px 8px !important; background: none !important; border: none !important; cursor: pointer !important;
    min-height: 0 !important; max-height: none !important; height: auto !important; line-height: 1.6 !important; box-sizing: border-box !important; text-transform: none !important; letter-spacing: normal !important; margin: 0 !important; width: auto !important;
}
.wsc-portal-wrap .button-link:hover { background: var(--wsc-hover-bg) !important; }
.wsc-portal-wrap .wsc-view-toggle-btn.active { background: var(--wsc-primary) !important; color: #fff !important; border-color: var(--wsc-primary) !important; }
.wsc-portal-wrap .wsc-view-toggle-btn.active:hover { background: var(--wsc-primary-dark) !important; color: #fff !important; border-color: var(--wsc-primary-dark) !important; }

/* notice و جدولِ widefat در فرانت هیچ استایلِ پایه‌ای از هسته‌ی وردپرس نمی‌گیرند (برخلافِ wp-admin)،
   پس باید همینجا از صفر تعریف شوند وگرنه کاملاً بی‌ظاهر (فقط متنِ خام) دیده می‌شوند. */
.wsc-portal-wrap .notice {
    background: var(--wsc-surface) !important; border: 1px solid var(--wsc-border) !important; border-inline-start: 4px solid var(--wsc-muted) !important;
    border-radius: var(--wsc-radius-md) !important; padding: 12px 16px !important; margin: 0 0 16px !important; box-shadow: none !important;
}
.wsc-portal-wrap .notice p { margin: 0 !important; font-size: 13px !important; line-height: 1.9 !important; color: var(--wsc-ink) !important; }
.wsc-portal-wrap .notice-success { border-inline-start-color: var(--wsc-success) !important; background: var(--wsc-success-bg) !important; }
.wsc-portal-wrap .notice-error { border-inline-start-color: var(--wsc-danger) !important; background: var(--wsc-danger-bg) !important; }
.wsc-portal-wrap .notice-warning { border-inline-start-color: var(--wsc-warning) !important; background: var(--wsc-warning-bg) !important; }
.wsc-portal-wrap .notice-info { border-inline-start-color: var(--wsc-primary) !important; background: var(--wsc-hover-bg) !important; }
.wsc-portal-wrap .wsc-reschedule-banner.notice {
    background: var(--wsc-hover-bg) !important; border-color: var(--wsc-primary) !important;
    border-inline-start-width: 4px !important; color: var(--wsc-ink) !important;
}
.wsc-portal-wrap .wsc-reschedule-banner.notice p { color: var(--wsc-ink) !important; }
.wsc-portal-wrap .wsc-reschedule-banner.notice strong { color: var(--wsc-primary) !important; }
.wsc-portal-wrap .wsc-reschedule-banner.notice a { color: var(--wsc-primary) !important; font-weight: 700 !important; }

.wsc-portal-wrap table.widefat {
    border-collapse: separate !important; border-spacing: 0 !important; width: 100%; background: var(--wsc-surface) !important;
    border: 1px solid var(--wsc-border) !important; border-radius: var(--wsc-radius-md) !important; overflow: hidden;
}
.wsc-portal-wrap table.widefat th,
.wsc-portal-wrap table.widefat td { padding: 12px 14px !important; text-align: start !important; font-size: 13px !important; border-bottom: 1px solid var(--wsc-border-soft) !important; background: var(--wsc-surface) !important; color: var(--wsc-ink) !important; }
.wsc-portal-wrap table.widefat thead th { background: var(--wsc-bg) !important; font-weight: 700 !important; color: var(--wsc-text-strong) !important; border-bottom: 2px solid var(--wsc-border) !important; }
.wsc-portal-wrap table.widefat.striped > tbody > tr:nth-child(odd) td { background: var(--wsc-bg) !important; }
.wsc-portal-wrap table.widefat tr:last-child td { border-bottom: none !important; }
.wsc-portal-wrap table.widefat tr:hover td { background: var(--wsc-hover-bg) !important; }

/* ---------- جدولِ اپتومتری (OD/OS) — پرکاربردترین جدولِ خامِ HTML این پلاگین، پس مقاومتش در برابرِ
   استایلِ عمومیِ قالب (که اغلب رنگِ پس‌زمینه/بوردرِ دلخواهِ خودش را روی td/th می‌گذارد) حیاتی است. ---------- */
.wsc-exam-grid-wrap { overflow-x: auto; }
/* table-layout:fixed + colgroup (در page-optometry.php) لازم است — وگرنه هر ستون بر اساسِ عریض‌ترین
   محتوایِ خودش (مثلاً فیلدِ آزادِ R & G) اندازه می‌گرفت و ستون‌ها اصلاً هم‌سایز نمی‌شدند. */
.wsc-exam-grid { border-collapse: collapse !important; min-width: 700px; width: 100% !important; table-layout: fixed !important; }
/* white-space:nowrap رویِ همه‌ی th (نه فقط ردیف‌ها) لازم است — بدونش عنوانِ ستونی مثلِ «V.ACP.h» یا
   «R & G» دو خط می‌شد و چون همه‌ی سلول‌هایِ همان ردیف باید هم‌ارتفاع بمانند، کلِ آن ردیف بلندتر می‌شد. */
/* overflow:hidden + text-overflow:ellipsis لازم است — با table-layout:fixed، مقدارِ قدیمی/آزادِ
   بلندتر از عرضِ ستون به‌جایِ بیرون‌زدن از قاب، مرتب کوتاه می‌شود. */
.wsc-exam-grid th, .wsc-exam-grid td { border: 1px solid var(--wsc-border) !important; padding: 1px !important; text-align: center !important; font-size: 9px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 0; background: var(--wsc-surface) !important; color: var(--wsc-ink) !important; }
.wsc-exam-grid thead th { background: var(--wsc-bg) !important; font-weight: 700 !important; }
/* برچسبِ ردیف نباید کوتاه/بریده شود — overflow/ellipsis/max-width عمومیِ بالا اینجا خنثی می‌شود و
   به‌جایش فقط فونت کوچک‌تر می‌شود؛ اگر همین یک ستون کمی بزرگ‌تر بماند اشکالی ندارد. */
.wsc-exam-grid tbody th { background: var(--wsc-bg) !important; padding-inline: 4px !important; font-weight: 700 !important; font-size: 8px !important; white-space: nowrap !important; overflow: visible !important; text-overflow: clip !important; max-width: none !important; }
/* width:100% (نه px ثابت) لازم است — جدول حالا table-layout:fixed دارد و هر ستون از قبل عرضِ برابر
   گرفته (colgroup در page-optometry.php). */
.wsc-exam-input { width: 100% !important; box-sizing: border-box !important; border: none !important; background: transparent !important; text-align: center !important; font-size: 10.5px !important; padding: 3px 2px !important; color: var(--wsc-ink) !important; min-height: auto !important; }
.wsc-exam-input:focus { outline: 2px solid var(--wsc-primary) !important; border-radius: 4px !important; background: var(--wsc-surface) !important; }
/* Sph/Cyl/VA حالا دراپ‌داون‌اند نه فیلدِ آزاد. */
select.wsc-exam-select { appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; text-align-last: center !important; cursor: pointer !important; }

/* ---------- کارتِ ویزیتِ پزشک: سابقه، تاریخ‌ها، پیک‌لیستِ کاتالوگ ---------- */
/* طبقِ بازخوردِ دکتر («سابقه‌ی بیمار الکی بزرگه») این بخش عمداً خیلی فشرده‌تر شد — عمداً تعدادِ ستونِ
   ثابت (نه auto-fit): با auto-fit، این ۶ کارتِ سابقه (CC/PMH/...) به‌جایِ شکستن به چند ردیف، در یک
   ردیفِ عریض کنارِ هم می‌ایستادند و کارت باید افقی اسکرول می‌خورد. */
.wsc-history-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (max-width: 782px) {
    .wsc-history-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .wsc-history-grid { grid-template-columns: 1fr; }
}
/* هر دسته (CC/PMH/...) یک مینی‌کارتِ جدا با حاشیه/پس‌زمینه‌ی مختص خودش — قبلاً فقط یک برچسبِ معلق
   بالایِ چیپ‌ها بود، بدونِ هیچ مرزی که دسته‌ها را از هم جدا کند. */
.wsc-history-col {
    background: var(--wsc-bg) !important; border: 1px solid var(--wsc-border-soft) !important; border-radius: var(--wsc-radius-sm) !important;
    padding: 6px !important;
}
.wsc-history-col label {
    display: inline-flex !important; align-items: center !important; font-size: 9.5px !important; font-weight: 800 !important; letter-spacing: .2px;
    margin-bottom: 4px !important; padding: 1px 7px !important; border-radius: 999px !important; background: var(--wsc-hover-bg) !important; color: var(--wsc-primary) !important;
}
.wsc-history-chips, .wsc-selected-items { display: flex !important; flex-wrap: wrap !important; gap: 3px !important; margin-bottom: 4px !important; min-height: 18px; }
/* وقتی سابقه‌ای ثبت نشده، این جعبه به‌جایِ یک نوارِ خالیِ بی‌معنی، کاملاً جمع می‌شود. */
.wsc-history-chips:empty, .wsc-selected-items:empty { display: none !important; min-height: 0; margin-bottom: 0 !important; }
.wsc-chip {
    display: inline-flex !important; align-items: center !important; gap: 2px !important; background: var(--wsc-surface) !important; color: var(--wsc-ink) !important;
    border: 1px solid var(--wsc-border-soft) !important; border-radius: 999px !important; padding: 1px 5px !important; font-size: 9.5px !important; font-weight: 600 !important; white-space: nowrap; line-height: 1.4;
    box-shadow: 0 1px 2px rgba(15,23,42,.04); transition: opacity .15s ease;
}
/* طبقِ درخواستِ پزشک، آیتم‌هایِ سابقه‌ای که قبلاً ثبت شده‌اند با یک کلیکِ اشتباهی حذف نشوند — دکمه‌ی ×
   فقط وقتی «ویرایشِ اطلاعاتِ بیمار» باز است نشان داده می‌شود. عمداً فقط رویِ .wsc-history-chips است،
   نه .wsc-selected-items (اقلامِ همین ویزیت که باید همیشه آزادانه قابلِ حذف بمانند). */
.wsc-history-chips .wsc-chip-remove { display: none !important; }
#wsc-doctor-visit-root.wsc-history-editing .wsc-history-chips .wsc-chip-remove { display: inline-flex !important; }
/* چیپِ خوش‌بینانه (optimistic) — قبل از تاییدِ سرور کمی کم‌رنگ‌تر نشان داده می‌شود تا حسِ «در حالِ ثبت»
   بدهد، بدونِ اینکه کاربر منتظرِ رفت‌وبرگشتِ شبکه بماند تا اصلاً چیزی ببیند. */
.wsc-chip-pending { opacity: .55 !important; }
/* عمداً عرض/ارتفاعِ ثابت ندارد — یک باکسِ دقیقاً مربع (مثلاً ۱۸×۱۸) کنارِ متنِ خیلی کوتاه (یک حرف/عدد)
   باعث می‌شد کلِ چیپ تقریباً هم‌عرض و هم‌ارتفاع بشود و border-radius:999px آن را دایره‌ایِ دفورمه نشان
   بدهد؛ با padding به‌جایِ اندازه‌ی ثابت، دکمه همیشه متناسب با فونتِ خودش می‌ماند. */
.wsc-chip-remove {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    background: none !important; border: none !important; border-radius: 50% !important; padding: 2px !important;
    cursor: pointer !important; color: var(--wsc-danger) !important; font-size: 12px !important; line-height: 1 !important; flex-shrink: 0;
    transition: background .12s ease;
}
.wsc-chip-remove:hover { background: var(--wsc-danger-bg) !important; }
.wsc-history-add { display: flex !important; gap: 4px !important; position: relative; align-items: stretch !important; }
.wsc-history-add .wsc-history-input { flex: 1; border-radius: var(--wsc-radius-sm) !important; border: 1px solid var(--wsc-form-border) !important; background: var(--wsc-surface) !important; padding: 4px 7px !important; font-size: 10.5px !important; color: var(--wsc-ink) !important; box-sizing: border-box !important; }
/* دکمه‌ی «+» کنارِ فیلدِ افزودنِ سابقه، هم‌ارتفاعِ خودِ فیلد. */
.wsc-history-add-btn { padding: 4px 10px !important; font-size: 12px !important; min-height: 0 !important; max-height: none !important; height: auto !important; line-height: 1.5 !important; box-sizing: border-box !important; flex-shrink: 0; }
/* شبکه‌ی امنیتیِ عمومیِ .button رویِ margin هم صفر می‌گذارد؛ این دو دکمه اما تنها/مستقل‌اند و به یک
   فاصله‌ی صریح از عنصرِ بالایی نیاز دارند — سلکتورِ ID عمداً استفاده شده تا از آن قانونِ عمومی‌تر جلو بزند. */
#wsc-save-doctor-notes-btn { margin-top: 8px !important; }
#wsc-save-auto-backup-btn { margin-top: 10px !important; }
#wsc-start-walkin-btn { margin-top: 10px !important; }
.wsc-history-suggestions { position: absolute; top: calc(100% + 2px); inset-inline-start: 0; inset-inline-end: 0; z-index: 20; }

/* طبقِ بازخوردِ دکتر، ستونِ تاریخ‌ها هم فشرده‌تر شد تا کنارِ جدولِ اپتومتری جا بگیرد و نگاه‌کردنِ سریع
   به تاریخ‌های قبلی راحت‌تر باشد. */
/* min-width اینجا حیاتی است — قانونِ عمومیِ .wsc-two-col > div (پایین‌تر) min-width:320px می‌دهد که
   بدونِ این override، این ستون هیچ‌وقت واقعاً به ۱۷۰px جمع نمی‌شد و جدولِ اپتومتریِ کنارش را فشرده می‌کرد. */
.wsc-two-col .wsc-dates-col { flex: 0 1 170px !important; min-width: 150px !important; }
.wsc-two-col .wsc-optometry-view-col { flex: 1 1 560px !important; min-width: 320px !important; }
.wsc-date-list { list-style: none; margin: 0 !important; padding: 0 !important; max-height: 420px; overflow-y: auto; }
.wsc-date-list li { margin-bottom: 2px !important; }
.wsc-date-list a { display: block !important; padding: 5px 8px !important; border-radius: var(--wsc-radius-sm) !important; text-decoration: none !important; color: var(--wsc-ink) !important; border: 1px solid transparent !important; font-weight: 600 !important; font-size: 11.5px !important; }
.wsc-date-list a:hover { background: var(--wsc-hover-bg) !important; }
.wsc-date-list a.active { background: var(--wsc-primary) !important; color: #fff !important; }
.wsc-date-list a small { display: block !important; font-size: 9.5px !important; opacity: .8; margin-top: 1px !important; font-weight: 400 !important; }
/* بجِ «امروز» کنارِ تاریخ — وقتی چند ویزیت با تاریخِ یکسان (همان امروز) در لیست باشد، پزشک بدونِ این
   بج نمی‌توانست بفهمد کدام ردیف واقعاً «امروز» است، چون فرمتِ تاریخ برایِ همه‌شان یکی به‌نظر می‌رسید. */
.wsc-date-today-badge { margin-inline-start: 6px !important; vertical-align: middle; }
.wsc-date-list a.active .wsc-date-today-badge { background: rgba(255,255,255,.25) !important; color: #fff !important; }
.wsc-exam-grid-readonly .wsc-exam-grid td { font-size: 10px !important; }

/* دقیقاً ۲ ستون (نه auto-fit ۴تایی) — با ۴ ستونِ هم‌عرض، هر کدام آنقدر باریک می‌شد که نتیجه‌ی
   جستجو/دکمه‌های OD-OS-هردو رویِ هم می‌افتاد و ناخوانا بود؛ ۲×۲ (تشخیص+سرویس بالا، جراحی+دارو پایین،
   دقیقاً هم‌ترتیبِ فرمِ دستیِ پزشک) به هر ستون عرضِ کافی می‌دهد. */
.wsc-encounter-items-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
/* min-width:0 رویِ بچه‌ی گرید حیاتی است — بدونش این ستون هیچ‌وقت باریک‌تر از عرضِ طبیعیِ محتوایِ خودش
   نمی‌شود و کلِ کارت مجبور به اسکرولِ افقی می‌شد. */
.wsc-encounter-col { min-width: 0; overflow-x: hidden; }
@media (max-width: 900px) {
    .wsc-encounter-items-grid { grid-template-columns: 1fr; }
}
.wsc-encounter-col h4 { margin: 0 0 6px !important; font-size: 12px !important; font-weight: 800 !important; color: var(--wsc-primary) !important; }
.wsc-catalog-search-input { width: 100% !important; border-radius: var(--wsc-radius-sm) !important; border: 1px solid var(--wsc-form-border) !important; background: var(--wsc-bg) !important; padding: 6px 9px !important; font-size: 11.5px !important; margin-bottom: 5px !important; color: var(--wsc-ink) !important; }
/* طبقِ بازخوردِ دکتر («حداقل ۱۰ گزینه رو نشون بده») — با ردیف‌هایِ فشرده‌ترِ پایین، ۳۸۰px تقریباً
   ۱۰-۱۲ ردیف را بدونِ اسکرول نشان می‌دهد، نه فقط ۴-۵ تا مثلِ قبل. */
.wsc-catalog-results { max-height: 420px; overflow-y: auto; border: 1px solid var(--wsc-border-soft) !important; border-radius: var(--wsc-radius-sm) !important; margin-bottom: 6px !important; }
.wsc-catalog-results:empty { display: none; }
/* طبقِ بازخوردِ پزشک، این ردیف‌ها خیلی ریزتر شدند تا تعدادِ بیشتری آیتم بدونِ اسکرول دیده شود. */
.wsc-catalog-result-row { display: flex !important; align-items: center !important; gap: 3px !important; padding: 2px 6px !important; border-bottom: 1px solid var(--wsc-border-soft) !important; flex-wrap: wrap; min-height: 22px; }
.wsc-catalog-result-row:last-child { border-bottom: none !important; }
.wsc-catalog-result-row:hover { background: var(--wsc-bg) !important; }
.wsc-catalog-result-name { flex: 1; font-size: 10.5px !important; min-width: 80px; color: var(--wsc-ink) !important; }
.wsc-catalog-custom-row { background: var(--wsc-bg) !important; }
.wsc-star-btn { background: none !important; border: none !important; cursor: pointer !important; color: var(--wsc-form-border) !important; font-size: 12px !important; padding: 0 2px !important; }
.wsc-star-btn.active { color: #f59e0b !important; }
/* دکمه‌های OD/OS/هردو باید عرضِ ثابتِ یکسان بگیرند وگرنه هرکدام به اندازه‌ی متنِ خودشان جمع می‌شوند و
   ردیفِ نتیجه‌ی جستجو نامرتب/فشرده به‌نظر می‌رسد. */
/* باگِ واقعیِ اسپسیفیسیتی: دکمه‌ی «افزودن» (برایِ دارو) علاوه‌بر wsc-add-item-btn، کلاسِ button-primary
   هم دارد؛ .wsc-portal-wrap .button.button-primary (بالاتر) با ۳ کلاس اسپسیفیسیتیِ بیشتری از
   .wsc-add-item-btn تنها (۱ کلاس) دارد، پس حتی با !important روی هر دو، آن قانون برنده می‌شد و
   padding:8px 16px خودش را تحمیل می‌کرد — دقیقاً همان چیزی که کاربر رویِ دکمه‌های «افزودن» (نه
   OD/OS که کلاسِ button-primary ندارند) می‌دید. سلکتورِ اول اینجا عمداً هم‌ارزِ همان اسپسیفیسیتی
   ساخته شده تا با ترتیبِ قرارگیریِ بعدتر در فایل برنده شود. */
.wsc-portal-wrap .button.wsc-add-item-btn,
.wsc-add-item-btn {
    padding: var(--wsc-catalog-btn-padding-v, 1px) var(--wsc-catalog-btn-padding-h, 2px) !important; font-size: 9px !important; line-height: 1.4 !important; height: auto !important; min-height: 0 !important;
    max-height: none !important; border-radius: 4px !important; min-width: 24px !important; width: auto !important; text-align: center !important;
    text-transform: none !important; letter-spacing: normal !important; box-sizing: border-box !important; margin: 0 !important; vertical-align: middle !important;
    flex-shrink: 0;
}

/* ---------- فرمِ پذیرش ---------- */
/* این ورودی‌های قیمت داخلِ سلولِ جدول‌اند نه داخلِ .wsc-field، پس استایلِ عمومیِ فیلدها به آن‌ها نمی‌رسد. */
.wsc-reception-item-price {
    width: 130px !important; border-radius: var(--wsc-radius-sm) !important; border: 1px solid var(--wsc-form-border) !important; background: var(--wsc-bg) !important;
    padding: 6px 9px !important; font-size: 13px !important; color: var(--wsc-text-strong) !important;
}
.wsc-reception-item-price:disabled { background: var(--wsc-border-soft) !important; color: var(--wsc-muted) !important; cursor: not-allowed !important; }
#wsc-reception-total { color: var(--wsc-primary) !important; font-size: 16px !important; }

.wsc-btn { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 10px 18px !important; border-radius: var(--wsc-radius-sm) !important; font-size: 13px !important; font-weight: 700 !important; text-decoration: none !important; cursor: pointer !important; border: none !important; }
.wsc-btn-light { background: #fff !important; color: var(--wsc-primary-dark) !important; box-shadow: 0 2px 4px rgba(0,0,0,.1) !important; }

.wsc-tabs { display: flex !important; gap: 4px !important; border-bottom: 1px solid var(--wsc-border) !important; margin-bottom: 20px !important; flex-wrap: wrap; }
.wsc-tab { appearance: none; background: transparent !important; border: none !important; cursor: pointer !important; padding: 10px 16px !important; font-size: 13px !important; font-weight: 700 !important; color: var(--wsc-muted) !important; border-bottom: 2px solid transparent !important; margin-bottom: -1px !important; }
.wsc-tab:hover { color: var(--wsc-ink) !important; }
.wsc-tab.active { color: var(--wsc-primary) !important; border-bottom-color: var(--wsc-primary) !important; }
.wsc-panel[hidden] { display: none; }

/* overflow-y صریحاً visible لازم است: بدونِ آن، مرورگر overflow-y را هم خودکار auto حساب می‌کند —
   یعنی هر پاپ‌آپِ مطلق‌موقعیت‌دهی‌شده‌ای که از کارت بیرون بزند (مثلِ تقویمِ شمسی)، یک اسکرول‌بارِ
   عمودیِ ناخواسته روی کل کارت می‌ساخت، حتی وقتی محتوایِ خودِ کارت جا داشت. */
.wsc-panel-card { background: var(--wsc-surface) !important; border: 1px solid var(--wsc-border-soft) !important; border-radius: var(--wsc-radius-lg) !important; padding: 22px !important; margin-bottom: 18px !important; box-shadow: var(--wsc-shadow-card) !important; overflow-x: auto; overflow-y: visible; transition: box-shadow .25s ease; }
.wsc-panel-card:hover { box-shadow: var(--wsc-shadow-card-hover) !important; }
.wsc-panel-card-danger { border-color: #fecaca !important; background: var(--wsc-danger-bg) !important; }
.wsc-panel-card-warning { border-color: #fde68a !important; background: var(--wsc-warning-bg) !important; }
.wsc-panel-card-head { display: flex !important; align-items: center !important; gap: 10px !important; margin-bottom: 16px !important; flex-wrap: wrap; justify-content: space-between !important; }
.wsc-panel-card-head h2, .wsc-panel-card-head h3 { margin: 0 !important; font-size: 15px !important; font-weight: 800 !important; color: var(--wsc-ink) !important; }
.wsc-panel-card-head p { margin: 4px 0 0 !important; font-size: 12px !important; color: var(--wsc-muted) !important; }

.wsc-pill { display: inline-flex !important; align-items: center !important; gap: 4px !important; padding: 4px 12px !important; border-radius: 999px !important; font-size: 11px !important; font-weight: 700 !important; }
.wsc-pill-success { background: var(--wsc-success-bg) !important; color: var(--wsc-success) !important; }
.wsc-pill-muted { background: var(--wsc-border-soft) !important; color: var(--wsc-muted) !important; }
.wsc-pill-danger { background: var(--wsc-danger-bg) !important; color: var(--wsc-danger) !important; }
.wsc-pill-warning { background: var(--wsc-warning-bg) !important; color: var(--wsc-warning) !important; }
.wsc-pill-followup { background: #e0f2fe !important; color: #0369a1 !important; }
.wsc-appt-chip .wsc-pill-followup { flex: 0 0 auto !important; white-space: nowrap !important; }
.wsc-pill-reason { background: var(--wsc-hover-bg) !important; color: var(--wsc-primary) !important; }
.wsc-pill-late { background: #dbeafe !important; color: #1d4ed8 !important; }

.wsc-field { margin-bottom: 16px !important; }
.wsc-field:last-child { margin-bottom: 0 !important; }
.wsc-field > label { display: block !important; font-size: 12.5px !important; font-weight: 700 !important; color: var(--wsc-text-strong) !important; margin-bottom: 7px !important; }
/* min-height بدونِ !important یک باگِ خودش بود — رویِ سایت‌هایِ ووکامرسی (مثلِ وودمارت) که min-height
   خودشان را رویِ input/select با !important تحمیل می‌کنند، این مقدار اصلاً اعمال نمی‌شد. */
.wsc-field input[type="text"], .wsc-field input[type="number"], .wsc-field input[type="time"], .wsc-field input[type="file"],
.wsc-field select, .wsc-field textarea {
    width: 100% !important; border-radius: var(--wsc-radius-sm) !important; border: 1px solid var(--wsc-form-border) !important; padding: 6px 10px !important; font-size: 12px !important; min-height: 32px !important;
    font-family: inherit !important; background: var(--wsc-bg) !important; color: var(--wsc-text-strong) !important; box-sizing: border-box !important; line-height: normal !important;
}
.wsc-field input[type="text"]:focus, .wsc-field input[type="number"]:focus, .wsc-field input[type="time"]:focus,
.wsc-field select:focus, .wsc-field textarea:focus { outline: none !important; border-color: var(--wsc-primary) !important; background: var(--wsc-surface) !important; box-shadow: 0 0 0 3px var(--wsc-hover-bg) !important; }
/* یک باگِ شناخته‌شده در کروم/وبکیت: input[type=number] در جهتِ rtl حتی با ارثِ direction از والد،
   متن/پلیس‌هولدرش را تقریباً وسط‌چین نشان می‌دهد. ست‌کردنِ صریحِ direction/text-align مستقیم روی خودِ
   input (نه فقط ارث‌بری) این را رفع می‌کند. */
input[type="number"] { direction: rtl !important; text-align: right !important; }
.wsc-hint { margin: 6px 0 0 !important; font-size: 11.5px !important; color: var(--wsc-muted) !important; line-height: 1.7 !important; }
.wsc-message { margin-top: 10px !important; font-size: 12.5px !important; line-height: 1.8 !important; }
.wsc-message-success { color: var(--wsc-success) !important; }
.wsc-message-error { color: var(--wsc-danger) !important; }
.wsc-field-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.wsc-switch { display: flex !important; align-items: center !important; gap: 10px !important; cursor: pointer !important; font-size: 13px !important; font-weight: 600 !important; color: var(--wsc-text-strong) !important; }
.wsc-switch-track { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; }
.wsc-switch-track input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.wsc-switch-slider { position: absolute; inset: 0; background: #cbd5e1 !important; border-radius: 999px !important; pointer-events: none; transition: background .15s ease; }
.wsc-switch-slider::before { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 18px; height: 18px; background: #fff !important; border-radius: 50% !important; transition: inset-inline-start .15s ease; box-shadow: 0 1px 2px rgba(0,0,0,.25) !important; }
.wsc-switch-track input:checked + .wsc-switch-slider { background: var(--wsc-primary) !important; }
.wsc-switch-track input:checked + .wsc-switch-slider::before { inset-inline-start: 21px; }

.wsc-save-bar { position: sticky; bottom: 0; background: var(--wsc-surface) !important; border: 1px solid var(--wsc-border-soft) !important; border-radius: var(--wsc-radius-md) !important; padding: 14px 18px !important; margin-top: 8px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; box-shadow: 0 -2px 14px rgba(15,23,42,.08) !important; flex-wrap: wrap; gap: 10px !important; }
/* وقتی چند دکمه‌ی عملیاتی کنارِ هم باشند (نه فقط یکی)، باید در یک گروهِ فلکسِ جدا با gapِ کوچکِ خودشان
   بنشینند — وگرنه justify-content:space-between فاصله‌ی این دکمه‌ها از هم را هم برابرِ فاصله‌شان از
   متنِ راهنما حساب می‌کند. */
.wsc-save-bar-actions { display: flex !important; gap: 8px !important; flex-wrap: wrap; }

.wsc-two-col { display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-start; }
.wsc-two-col > div { flex: 1; min-width: 320px; }
/* align-items:flex-start عمداً برایِ .wsc-two-col پیش‌فرض است (دوستونه‌ی تاریخ/اپتومتری معمولاً
   ارتفاعِ طبیعیِ خیلی متفاوتی دارند و کشیدنشان به یک اندازه بی‌معنی می‌شد)، ولی توی گزارشاتِ آماریِ
   بالینی (۴ جدولِ پرتکرارترین) این دقیقاً برعکس است — وقتی یکی ۲ ردیف دارد و کناری‌اش ۱۰ ردیف، نتیجه
   یک گریدِ دندانه‌دارِ زشت می‌شود؛ اینجا صریحاً stretch می‌کنیم تا هر ردیف هم‌ارتفاع باشد. */
.wsc-clinical-stats-grid { align-items: stretch; }
.wsc-clinical-stats-item { display: flex; }
.wsc-clinical-stats-item .wsc-panel-card { flex: 1; margin-bottom: 0; }
/* برخلافِ wp-admin (که عرضِ کافی برایِ فرم+فهرستِ کنارِ هم دارد)، محتوایِ پورتال همیشه باریک‌تر است، پس
   این بخش‌ها همیشه تب‌بندی‌شده‌اند نه کنارِ هم — دقیقاً هم‌الگویِ «لیست و فیلتر / + افزودن» در پورتالِ
   پیلاتس. .wsc-subpanel یک wrapper واقعی است (نه display:contents مثلِ admin.css) چون اینجا واقعاً
   می‌خواهیم اتریبیوتِ hidden کار کند و فقط یکی از دو پنل دیده شود. */
.wsc-templates-layout { display: block; }
.wsc-templates-form-card, .wsc-templates-list-card { width: 100%; }
.wsc-subtabs { display: flex !important; gap: 4px !important; border-bottom: 1px solid var(--wsc-border) !important; margin-bottom: 16px !important; flex-wrap: wrap; }
.wsc-subtab { appearance: none; background: transparent !important; border: none !important; cursor: pointer !important; padding: 9px 16px !important; font-size: 13px !important; font-weight: 700 !important; color: var(--wsc-muted) !important; border-bottom: 2px solid transparent !important; margin-bottom: -1px !important; }
.wsc-subtab:hover { color: var(--wsc-ink) !important; }
.wsc-subtab.active { color: var(--wsc-primary) !important; border-bottom-color: var(--wsc-primary) !important; }
.wsc-subpanel[hidden] { display: none !important; }

.wsc-cards-row { display: flex; gap: 16px; margin: 16px 0; flex-wrap: wrap; }
.wsc-card { background: var(--wsc-surface) !important; border: 1px solid var(--wsc-border-soft) !important; border-radius: var(--wsc-radius-lg) !important; padding: 18px 22px !important; min-width: 160px; text-align: center !important; flex: 1; box-shadow: var(--wsc-shadow-card) !important; }
.wsc-card-number { font-size: 30px !important; font-weight: 800 !important; color: var(--wsc-primary) !important; }
.wsc-card-label { color: var(--wsc-muted) !important; margin-top: 4px !important; font-size: 12.5px !important; font-weight: 600 !important; }

.wsc-date-nav { display: flex !important; align-items: center !important; gap: 8px !important; margin: 16px 0 !important; flex-wrap: wrap; }
.wsc-date-nav select#wsc-followup-filter {
    border-radius: var(--wsc-radius-sm) !important; border: 1px solid var(--wsc-form-border) !important; background: var(--wsc-surface) !important;
    color: var(--wsc-text-strong) !important; padding: 6px 10px !important; font-size: 13px !important; font-weight: 600 !important; cursor: pointer !important;
}
.wsc-appt-chip select.wsc-appt-followup-select {
    display: inline-block !important; width: auto !important; margin: 0 !important; flex: 0 0 auto !important; border-radius: 6px !important; border: 1px solid var(--wsc-border-soft) !important;
    background: var(--wsc-bg) !important; color: var(--wsc-text-strong) !important; font-size: 11px !important; padding: 2px 6px !important;
    height: auto !important; min-height: 0 !important; max-height: none !important; line-height: 1.6 !important;
}
/* min-height/max-height صریح لازم است — وگرنه رویِ سایتی که تمِ آن رویِ select سراسری min-height
   تحمیل می‌کند (مثلِ :is(.btn,.button,button,[type=submit],[type=button]) در وودمارت)، این دراپ‌داون
   بلندتر از بقیه‌ی محتوایِ کارت دیده می‌شد. */
.wsc-appt-chip select.wsc-appt-visit-reason-select {
    display: inline-block !important; width: auto !important; max-width: 100% !important; margin: 0 !important; flex: 0 0 auto !important; border-radius: 6px !important; border: 1px solid var(--wsc-border-soft) !important;
    background: var(--wsc-bg) !important; color: var(--wsc-muted) !important; font-size: 11px !important; padding: 2px 6px !important;
    height: auto !important; min-height: 0 !important; max-height: none !important; line-height: 1.6 !important;
}

.wsc-block { background: var(--wsc-surface) !important; border: 1px solid var(--wsc-border-soft) !important; border-radius: var(--wsc-radius-lg) !important; padding: 16px 18px !important; margin-bottom: 18px !important; box-shadow: var(--wsc-shadow-card) !important; overflow-x: hidden; }
.wsc-block h3 { display: flex !important; align-items: center !important; gap: 10px !important; margin-top: 0 !important; flex-wrap: wrap; font-size: 14px !important; font-weight: 800 !important; color: var(--wsc-ink) !important; }
.wsc-badge { color: #fff !important; border-radius: 6px !important; padding: 3px 9px !important; font-size: 12px !important; font-weight: 700 !important; }

/* دقیقاً ۴ کارت در هر ردیف — با auto-fill قبلی بسته به عرضِ صفحه گاهی ۵-۶ کارتِ باریک در یک ردیف
   جا می‌شد که مقایسه‌ی اسلات‌ها را سخت می‌کرد؛ عددِ ثابت هم مرتب‌تر است هم پیش‌بینی‌پذیرتر. */
.wsc-slots-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
/* min-width:0 حیاتی است: بدونِ آن، یک بچه‌ی گرید هیچ‌وقت باریک‌تر از عرضِ طبیعیِ محتوایِ خودش نمی‌شود
   (رفتارِ پیش‌فرضِ CSS Grid) — رویِ گوشیِ باریک این باعث می‌شد کلِ .wsc-slots-grid/.wsc-week-strip از
   عرضِ صفحه بزرگ‌تر شود و کل صفحه اسکرولِ افقی بگیرد؛ باگی که در نسخه‌ی خواهر کشف و رفع شده بود. */
.wsc-slot { min-width: 0; border: 1px solid var(--wsc-border-soft) !important; border-radius: var(--wsc-radius-sm) !important; padding: 9px 11px !important; background: var(--wsc-bg) !important; transition: box-shadow .12s ease, transform .12s ease; font-size: 12.5px !important; overflow-x: hidden; }
.wsc-slot-empty { background: var(--wsc-empty-bg) !important; border-color: var(--wsc-empty-border) !important; }
.wsc-slot-empty:hover { box-shadow: 0 6px 16px rgba(15,23,42,.1) !important; transform: translateY(-2px); }
.wsc-slot-full { background: var(--wsc-surface) !important; }
.wsc-slot-held { background: var(--wsc-held-bg) !important; border-color: var(--wsc-held-border) !important; animation: wsc-pulse 1.6s ease-in-out infinite; }
.wsc-slot-past { background: var(--wsc-bg) !important; opacity: .55; }
.wsc-slot-past .wsc-slot-held-label { color: var(--wsc-muted) !important; }
.wsc-slot.wsc-slot-drag-over { outline: 2px dashed var(--wsc-held-border) !important; }
.wsc-slot-time { font-weight: 700 !important; margin-bottom: 4px !important; color: var(--wsc-ink) !important; }
.wsc-slot-held-label { color: var(--wsc-held-text) !important; font-size: 12px !important; }
@keyframes wsc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .6; } }

/* دیگر بردرِ رنگیِ ثابت ندارد — طبقِ بازخوردِ کارفرما (نسخه‌ی خواهر)؛ رنگِ ثبت‌کننده رویِ پس‌زمینه‌ی
   خودِ اسلات نشسته، نه رویِ کارت. */
.wsc-appt-chip { background: var(--wsc-surface) !important; border: 1px solid var(--wsc-border-soft) !important; border-radius: 8px !important; padding: 6px 9px !important; margin-bottom: 5px !important; font-size: 12px !important; cursor: grab; box-shadow: 0 1px 3px rgba(15,23,42,.05) !important; transition: box-shadow .12s ease, transform .12s ease; }
.wsc-appt-chip:hover { box-shadow: 0 4px 12px rgba(15,23,42,.12) !important; transform: translateY(-1px); }
.wsc-appt-chip.wsc-status-no_show { background: var(--wsc-noshow-bg) !important; }
.wsc-appt-chip.wsc-dragging { opacity: 0.4; }
/* هدر (چک‌باکس + نامِ بیمار) و ردیفِ متا (سرویس/تلفن/وضعیت/علتِ مراجعه) هرکدام یک ردیفِ فلکسِ جدا
   هستند تا محتوای کارت به‌جایِ چسبیدنِ نامرتبِ همه‌چیز به هم، در چند سطرِ منظم با فاصله‌ی یکنواخت بنشیند. */
.wsc-appt-chip-head { display: flex !important; align-items: center !important; gap: 6px !important; margin-bottom: 4px !important; }
.wsc-appt-chip-meta { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 4px 6px !important; }
.wsc-appt-name { font-weight: 700 !important; color: var(--wsc-ink) !important; }
.wsc-appt-service { font-size: 11px !important; font-weight: 700 !important; color: var(--wsc-primary) !important; }
.wsc-appt-phone { color: var(--wsc-muted) !important; }
.wsc-appt-status { font-size: 11px !important; font-weight: 700 !important; padding: 1px 8px !important; border-radius: 999px !important; background: var(--wsc-hover-bg) !important; color: var(--wsc-primary) !important; }
.wsc-appt-status-no_show { background: var(--wsc-danger-bg) !important; color: var(--wsc-danger) !important; }
.wsc-appt-status-completed, .wsc-appt-status-checked_in { background: var(--wsc-success-bg) !important; color: var(--wsc-success) !important; }
.wsc-appt-status-confirmed { background: var(--wsc-warning-bg) !important; color: var(--wsc-warning) !important; }
.wsc-appt-chip .wsc-appt-cancel-btn { background: var(--wsc-danger-bg) !important; border-radius: 6px !important; }
.wsc-appt-chip .wsc-appt-cancel-btn:hover { background: var(--wsc-danger) !important; color: #fff !important; }
/* دکمه‌های عملیاتی حالا داخلِ .wsc-inline-actions (پایین‌تر) قرار می‌گیرند که خودش gap دارد؛ اینجا فقط
   margin دستیِ قبلی را صفر می‌کنیم تا فاصله دوبار جمع نشود. */
.wsc-appt-chip .button-link,
.wsc-appt-chip .button-link-delete { display: inline-block !important; margin: 0 !important; }

/* هر ردیفِ عملیاتِ کوچک (انجام‌شده/جابجایی/عدم‌حضور/ارسال لینک/لغو و ...) داخلِ یک آپشنِ نوبت باید
   دکمه‌هایی هم‌اندازه و با فاصله‌ی یکنواخت بگیرد، وگرنه بسته به طولِ متنِ هر دکمه فشرده/بی‌نظم دیده
   می‌شود؛ این کلاسِ عمومی روی هر container ی از دکمه‌های کوچکِ عملیاتی قابلِ استفاده است. */
.wsc-inline-actions { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; margin-top: 8px !important; }
.wsc-inline-actions .button,
.wsc-inline-actions .button-link-delete,
.wsc-inline-actions .button-link { flex: 0 0 auto; white-space: nowrap; }

.wsc-inline-booking-form { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
/* :not([type="checkbox"]) لازم است — بدونش چک‌باکسِ «اتباع» (که مستقیم داخلِ همین فرم است) هم width:100%
   می‌گرفت و یک جعبه‌ی غول‌آسا/بدشکل به‌جایِ یک چک‌باکسِ معمولی رندر می‌شد. */
.wsc-inline-booking-form input:not([type="checkbox"]), .wsc-inline-booking-form select, .wsc-inline-booking-form textarea { width: 100% !important; box-sizing: border-box !important; border-radius: var(--wsc-radius-sm) !important; border: 1px solid var(--wsc-form-border) !important; background: var(--wsc-bg) !important; padding: 5px 8px !important; font-size: 12px !important; min-height: 30px !important; color: var(--wsc-ink) !important; }
.wsc-inline-booking-form input[type="checkbox"] { width: auto !important; }
.wsc-hold-timer { font-size: 11px !important; color: var(--wsc-held-text) !important; margin-top: 4px !important; }

.wsc-week-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin: 16px 0; }
.wsc-week-day { min-width: 0; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 4px !important; background: var(--wsc-surface) !important; border: 1px solid var(--wsc-border-soft) !important; border-radius: var(--wsc-radius-md) !important; padding: 10px 6px !important; text-decoration: none !important; color: var(--wsc-ink) !important; box-shadow: var(--wsc-shadow-card) !important; transition: transform .12s ease, box-shadow .12s ease; }
.wsc-week-day:hover { transform: translateY(-2px); box-shadow: var(--wsc-shadow-card-hover) !important; color: var(--wsc-ink) !important; }
.wsc-week-day-name { font-size: 11px !important; color: var(--wsc-muted) !important; font-weight: 600 !important; }
.wsc-week-day-num { font-size: 16px !important; font-weight: 800 !important; color: var(--wsc-ink) !important; max-width: 100%; }
.wsc-week-day-badge { font-size: 10px !important; padding: 2px 8px !important; border-radius: 999px !important; background: var(--wsc-hover-bg) !important; color: var(--wsc-primary) !important; font-weight: 700 !important; }
.wsc-week-day-today { border-color: var(--wsc-primary) !important; border-width: 2px !important; }
.wsc-week-day-active { background: linear-gradient(135deg, var(--wsc-primary), var(--wsc-primary-dark)) !important; color: #fff !important; box-shadow: 0 8px 18px -4px rgba(0,0,0,.25) !important; }
.wsc-week-day-active .wsc-week-day-name, .wsc-week-day-active .wsc-week-day-num { color: #fff !important; }
.wsc-week-day-active .wsc-week-day-badge { background: rgba(255,255,255,.25) !important; color: #fff !important; }
.wsc-week-day.wsc-load-light .wsc-week-day-badge { background: var(--wsc-success-bg) !important; color: var(--wsc-success) !important; }
.wsc-week-day.wsc-load-busy .wsc-week-day-badge { background: var(--wsc-warning-bg) !important; color: var(--wsc-warning) !important; }
.wsc-week-day.wsc-load-full .wsc-week-day-badge { background: var(--wsc-danger-bg) !important; color: var(--wsc-danger) !important; }
.wsc-week-day.wsc-load-holiday { opacity: .55; }

.wsc-view-toggle { display: inline-flex !important; gap: 4px !important; margin-inline-start: auto; }
.wsc-slots-grid.wsc-view-list { display: flex; flex-direction: column; gap: 6px; }
.wsc-slots-grid.wsc-view-list .wsc-slot { display: flex !important; align-items: center !important; gap: 12px !important; flex-wrap: wrap; padding: 8px 12px !important; }
.wsc-slots-grid.wsc-view-list .wsc-slot-time { margin-bottom: 0 !important; min-width: 46px; }
.wsc-slots-grid.wsc-view-list .wsc-appt-chip { margin-bottom: 0 !important; display: flex !important; align-items: center !important; gap: 8px !important; flex: 1; }
.wsc-slots-grid.wsc-view-list .wsc-appt-name { display: inline; }
.wsc-slots-grid.wsc-view-list .wsc-appt-service { display: inline; margin-inline-start: 6px; }

.wsc-search-results { position: relative; background: var(--wsc-surface) !important; border: 1px solid var(--wsc-border-soft) !important; max-width: 420px; z-index: 30; border-radius: var(--wsc-radius-sm) !important; overflow: hidden; box-shadow: var(--wsc-shadow-card) !important; }
.wsc-search-row { padding: 7px 12px !important; cursor: pointer !important; border-bottom: 1px solid var(--wsc-border-soft) !important; font-size: 13px !important; color: var(--wsc-ink) !important; }
.wsc-search-row:hover { background: var(--wsc-hover-bg) !important; }
.wsc-search-empty { padding: 7px 12px !important; color: var(--wsc-muted) !important; font-size: 12.5px !important; }

.wsc-permission-user-box { background: var(--wsc-surface) !important; border: 1px solid var(--wsc-border-soft) !important; border-radius: var(--wsc-radius-md) !important; padding: 14px 16px !important; margin-bottom: 14px !important; box-shadow: var(--wsc-shadow-card) !important; }
.wsc-caps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; margin: 10px 0; }

.wsc-live-refresh-banner { position: sticky; top: 68px; z-index: 20; background: var(--wsc-primary) !important; color: #fff !important; padding: 9px 14px !important; border-radius: var(--wsc-radius-sm) !important; margin-bottom: 12px !important; display: none; align-items: center; justify-content: space-between; gap: 10px; box-shadow: 0 6px 16px rgba(0,0,0,.18) !important; }
.wsc-live-refresh-banner button { background: #fff !important; color: var(--wsc-primary) !important; border: none !important; border-radius: 6px !important; padding: 4px 10px !important; cursor: pointer !important; font-weight: 700 !important; }

.wsc-jalali-field { position: relative; display: inline-block; min-width: 160px; }
.wsc-jalali-display { cursor: pointer; background-image: none !important; direction: rtl; }
.wsc-jalali-popup { position: absolute; top: calc(100% + 4px); inset-inline-start: 0; z-index: 100; background: var(--wsc-surface) !important; border: 1px solid var(--wsc-border) !important; border-radius: var(--wsc-radius-md) !important; box-shadow: 0 12px 30px rgba(15,23,42,.18) !important; padding: 10px !important; width: 260px; display: none; }
.wsc-jalali-popup.wsc-open { display: block; }
.wsc-jalali-popup-header { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-bottom: 8px !important; }
.wsc-jalali-popup-header button { background: none !important; border: none !important; cursor: pointer !important; font-size: 16px !important; color: var(--wsc-primary) !important; padding: 2px 8px !important; }
.wsc-jalali-popup-title { font-size: 13px !important; font-weight: 700 !important; color: var(--wsc-ink) !important; }
.wsc-jalali-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.wsc-jalali-grid .wsc-jd-dow { font-size: 10px !important; color: var(--wsc-muted) !important; padding: 4px 0 !important; }
.wsc-jalali-grid button.wsc-jd-day { background: none !important; border: none !important; cursor: pointer !important; padding: 6px 0 !important; border-radius: 6px !important; font-size: 12px !important; color: var(--wsc-ink) !important; }
.wsc-jalali-grid button.wsc-jd-day:hover { background: var(--wsc-hover-bg) !important; }
.wsc-jalali-grid button.wsc-jd-day.wsc-jd-today { border: 1px solid var(--wsc-primary) !important; }
.wsc-jalali-grid button.wsc-jd-day.wsc-jd-selected { background: var(--wsc-primary) !important; color: #fff !important; }
.wsc-jalali-popup-footer { display: flex !important; justify-content: space-between !important; margin-top: 8px !important; }
.wsc-jalali-popup-footer button { background: none !important; border: none !important; cursor: pointer !important; font-size: 11px !important; color: var(--wsc-primary) !important; }

/* ---------- ریسپانسیو ---------- */

@media (min-width: 901px) {
    .wsc-portal-sidebar.wsc-portal-collapsed { display: none !important; }
}
@media (max-width: 900px) {
    .wsc-portal-menu-toggle { display: inline-flex !important; }
    .wsc-portal-body { display: block !important; }
    /* نکته: چون رولِ پایه‌ی .wsc-portal-sidebar بالاتر position:sticky !important دارد (برایِ مقاومت
       در برابرِ قالب)، override کردنش به position:fixed برایِ حالتِ کشوییِ موبایل هم باید !important
       داشته باشد — وگرنه رولِ پایه همیشه برنده می‌شود و سایدبار هیچ‌وقت کشویی نمی‌شود.
       سایدبارِ کشویی کلِ ارتفاعِ صفحه (از y=0) را می‌گیرد، نه فقط زیرِ نوارِ بالا — تا رویِ خودِ نوارِ
       بالا هم بنشیند، دقیقاً مثلِ الگوی پیلاتس. */
    .wsc-portal-sidebar {
        position: fixed !important; inset-inline-start: -240px !important; top: 0 !important; height: 100vh !important; width: 220px !important;
        background: var(--wsc-bg) !important; z-index: 55 !important; box-shadow: 2px 0 12px rgba(16,24,40,.12) !important;
        transition: inset-inline-start .18s ease !important; padding: 18px 12px !important; overflow-y: auto !important;
    }
    .wsc-portal-sidebar.wsc-open { inset-inline-start: 0 !important; }
    /* پرده‌ی نیمه‌شفاف پشتِ سایدبارِ کشویی (از جمله پشتِ نوارِ بالا) — کلیک روی هر جای آن (فضای خالی) می‌بندَدش. */
    .wsc-portal-overlay {
        display: none; position: fixed !important; inset: 0 !important; background: rgba(15,23,42,.5) !important;
        z-index: 45 !important; opacity: 0; transition: opacity .18s ease; pointer-events: none;
    }
    .wsc-portal-overlay.wsc-open { display: block !important; opacity: 1; pointer-events: auto; }
    body.wsc-portal-noscroll { overflow: hidden !important; height: 100% !important; }
    .wsc-portal-content { padding: 16px 14px 50px !important; width: 100%; }
    .wsc-field-grid-2 { grid-template-columns: 1fr; }
    .wsc-slots-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .wsc-two-col { flex-direction: column; }
    .wsc-two-col > div { min-width: 0; width: 100%; }
    .wsc-week-strip { grid-template-columns: repeat(7, minmax(60px, 1fr)); overflow-x: auto; }
    .wsc-week-day { padding: 8px 4px !important; }
    .wsc-tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
    .wsc-tab { white-space: nowrap; }
    .wsc-cards-row { flex-direction: column; }
    .wsc-caps-grid { grid-template-columns: 1fr; }
    .wsc-save-bar { flex-direction: column !important; align-items: stretch !important; }
    .wsc-portal-user-name { display: none !important; }
}

@media (max-width: 480px) {
    /* رویِ گوشیِ واقعی، دیت‌پیکرِ شمسی چون نسبت به خودِ فیلدِ محرک (داخلِ یک ردیفِ flex-wrap) موقعیت
       می‌گرفت، بسته به اینکه کجایِ آن ردیف بیفتد ممکن بود از لبه‌ی صفحه بزند بیرون یا نصفه دیده شود.
       رفعش: رویِ موبایل کاملاً position:fixed و نسبت به خودِ viewport وسط‌چین می‌شود، مستقل از موقعیتِ
       فیلد. عمداً left/right (نه transform:translate(-50%)) — آن ترکیب در بعضی مرورگرها درصدِ
       transform را از رویِ اندازه‌ی نادرستِ باکس حساب می‌کند و پاپ‌آپ را کاملاً بیرون از صفحه می‌اندازد. */
    .wsc-jalali-popup {
        position: fixed !important;
        top: 15vh !important;
        left: 4vw !important;
        right: 4vw !important;
        inset-inline-start: 4vw !important;
        inset-inline-end: 4vw !important;
        width: auto !important;
        max-height: 70vh !important;
        overflow-y: auto !important;
    }
    .wsc-portal-login-card { padding: 26px 20px !important; }
    /* به‌جایِ قایم‌کردنِ ۳ روز از ۷ روز، هر ۷ روز نگه داشته می‌شوند و با کشیدنِ انگشت به چپ/راست
       قابلِ‌دیدن‌اند — رفتارِ بومیِ overflow-x:auto رویِ صفحه‌ی لمسی، بدونِ گم‌شدنِ هیچ روزی. */
    .wsc-week-strip { grid-auto-flow: column; grid-auto-columns: minmax(78px, 1fr); grid-template-columns: none !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; padding-bottom: 4px; }
    .wsc-week-day { scroll-snap-align: start; }
    .wsc-week-day-num { font-size: 13px !important; }
}