/* ============================================================================================
   Button Design System — پروژه‌ی درمان داده (ClinicBooking)
   --------------------------------------------------------------------------------------------
   هدف: یکپارچه‌سازی تمام دکمه‌های پنل‌ها روی یک سیستم واحد، بدون تغییر منطق/چیدمان صفحات.

   چرا این فایل روی همان کلاس‌های موجود سوار می‌شود؟
   پروژه ۸۷۲ عنصر دکمه‌ای در ۲۷۶ نما دارد که تقریباً همه از ترکیب‌های Bootstrap + کلاس‌های
   پروژه (btn btn-brand / btn btn-sm btn-outline-brand / ...) استفاده می‌کنند. با تعریف این
   فایل «بعد از» app.min.css، همه‌ی آن دکمه‌ها به‌صورت خودکار ظاهر و رفتار Design System را
   می‌گیرند و نیازی به دست‌بردن در ۲۷۶ فایل نما نیست (طبق بند ۱۸ سند: چیدمان صفحات دست‌نخورده).

   نکته‌ی رنگ: Primary روی رنگ برند فعلی پروژه (سبز #0ca678) تنظیم شده تا با UI موجود هماهنگ
   بماند. اگر تصویر مرجع، Primary آبی خواسته باشد، فقط کافی است --button-primary و دو توکن
   hover/active را به آبی تغییر دهید؛ هیچ کلاس دکمه‌ای نیاز به تغییر ندارد.

   لود شدن: این فایل در _DashboardLayout.cshtml و _Layout.cshtml بعد از app.min.css اضافه شده.
   ============================================================================================ */

:root {
    /* --- اندازه‌ها (ارتفاع / پدینگ افقی / فونت) --- */
    --button-height-xs: 32px;
    --button-height-sm: 36px;
    --button-height-md: 42px; /* پیش‌فرض سیستم */
    --button-height-lg: 48px;
    --button-height-xl: 52px;

    --button-pad-xs: 12px;
    --button-pad-sm: 14px;
    --button-pad-md: 18px;
    --button-pad-lg: 22px;
    --button-pad-xl: 24px;

    --button-font-xs: 13px;
    --button-font-sm: 13.5px;
    --button-font-md: 14px;
    --button-font-lg: 15px;
    --button-font-xl: 16px;

    /* --- Icon Button (مربعی) --- */
    --button-icon-size-sm: 36px;
    --button-icon-size-md: 42px;
    --button-icon-size-lg: 48px;

    /* --- شکل و حرکت --- */
    --button-radius: 12px; /* همراستا با --radius-md پروژه */
    --button-radius-sm: 10px;
    --button-radius-pill: 9999px;
    --button-gap: .45rem; /* فاصله‌ی آیکون تا متن */
    --button-transition: 170ms ease;

    /* --- رنگ‌ها (از توکن‌های موجود پروژه مشتق شده‌اند) --- */
    --button-primary: var(--brand-600, #0ca678);
    --button-primary-hover: var(--brand-700, #099268);
    --button-primary-active: var(--brand-800, #077a56);
    --button-on-primary: #fff;

    --button-success: #2f9e44;
    --button-success-hover: #2b8a3e;
    --button-danger: var(--danger, #e03131);
    --button-danger-hover: #c92a2a;
    --button-warning: var(--warning, #f08c00);
    --button-warning-hover: #e8590c;
    --button-info: var(--info, #1c7ed6);
    --button-info-hover: #1971c2;

    --button-secondary-bg: var(--ink-100, #f2f4f7);
    --button-secondary-fg: var(--ink-700, #344054);
    --button-secondary-hover: var(--ink-300, #d0d5dd);

    --button-ghost-fg: var(--ink-700, #344054);
    --button-ghost-hover: rgba(16, 24, 40, .06);

    --button-disabled-opacity: .55;
    --button-focus-ring: 0 0 0 .2rem rgba(12, 166, 120, .35);
    --button-shadow: var(--shadow-sm, 0 1px 2px rgba(16, 24, 40, .06));
    --button-shadow-hover: 0 4px 12px rgba(16, 24, 40, .10);
}

/* ============================ ۱) پایه ============================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--button-gap);
    /* ارتفاع با min-height کنترل می‌شود تا برچسب‌های بلند فارسی در موبایل بریده نشوند؛
       در حالت تک‌خطی، ارتفاع دقیقاً همان اندازه‌ی استاندارد سیستم می‌شود. */
    min-height: var(--button-height-md);
    padding: 0 var(--button-pad-md);
    max-width: 100%;
    font-size: var(--button-font-md);
    font-weight: 600;
    line-height: 1.2;
    border-radius: var(--button-radius);
    border: 1px solid transparent;
    white-space: nowrap; /* متن دکمه در حالت عادی شکسته نشود */
    text-decoration: none;
    vertical-align: middle;
    position: relative;
    transition: background-color var(--button-transition), border-color var(--button-transition),
                color var(--button-transition), box-shadow var(--button-transition);
    box-shadow: none;
}

/* دکمه‌هایی که برچسب بلندی دارند و اجازه‌ی شکستن متن می‌خواهند (opt-in) */
.btn.btn-wrap {
    white-space: normal;
    text-align: center;
    padding-top: .4rem;
    padding-bottom: .4rem;
}

/* آیکون داخل دکمه: اندازه‌ی یکسان و بدون جابه‌جایی خط مبنا */
.btn > i,
.btn > svg {
    font-size: 1.05rem;
    line-height: 1;
    flex: 0 0 auto;
}

/* ============================ ۲) اندازه‌ها ============================ */
.btn-xs {
    min-height: var(--button-height-xs);
    padding: 0 var(--button-pad-xs);
    font-size: var(--button-font-xs);
    border-radius: var(--button-radius-sm);
}

.btn-sm {
    min-height: var(--button-height-sm);
    padding: 0 var(--button-pad-sm);
    font-size: var(--button-font-sm);
    border-radius: var(--button-radius-sm);
}

.btn-lg {
    min-height: var(--button-height-lg);
    padding: 0 var(--button-pad-lg);
    font-size: var(--button-font-lg);
}

.btn-xl {
    min-height: var(--button-height-xl);
    padding: 0 var(--button-pad-xl);
    font-size: var(--button-font-xl);
}

/* دکمه‌ی تمام‌عرض در موبایل (کلاس کمکی، بند ۱۰ سند) */
.btn-full-sm { width: 100%; }

/* ============================ ۳) Variantها ============================ */
.btn-brand,
.btn-primary {
    background: var(--button-primary);
    border-color: var(--button-primary);
    color: var(--button-on-primary);
}

.btn-brand:hover,
.btn-brand:focus-visible,
.btn-primary:hover,
.btn-primary:focus-visible {
    background: var(--button-primary-hover);
    border-color: var(--button-primary-hover);
    color: var(--button-on-primary);
}

.btn-brand:active,
.btn-primary:active {
    background: var(--button-primary-active);
    border-color: var(--button-primary-active);
}

.btn-outline-brand,
.btn-outline-primary {
    background: transparent;
    border-color: var(--button-primary);
    color: var(--button-primary-active);
}

.btn-outline-brand:hover,
.btn-outline-brand:focus-visible,
.btn-outline-primary:hover,
.btn-outline-primary:focus-visible {
    background: var(--brand-50, #eefbf7);
    border-color: var(--button-primary-hover);
    color: var(--button-primary-active);
}

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

.btn-success:hover,
.btn-success:focus-visible {
    background: var(--button-success-hover);
    border-color: var(--button-success-hover);
    color: #fff;
}

.btn-outline-success {
    background: transparent;
    border-color: var(--button-success);
    color: var(--button-success-hover);
}

.btn-outline-success:hover,
.btn-outline-success:focus-visible {
    background: #ebfbee;
    color: var(--button-success-hover);
}

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

.btn-danger:hover,
.btn-danger:focus-visible {
    background: var(--button-danger-hover);
    border-color: var(--button-danger-hover);
    color: #fff;
}

.btn-outline-danger {
    background: transparent;
    border-color: var(--button-danger);
    color: var(--button-danger);
}

.btn-outline-danger:hover,
.btn-outline-danger:focus-visible {
    background: #fff5f5;
    color: var(--button-danger-hover);
    border-color: var(--button-danger-hover);
}

.btn-warning {
    background: var(--button-warning);
    border-color: var(--button-warning);
    color: #fff;
}

.btn-warning:hover,
.btn-warning:focus-visible {
    background: var(--button-warning-hover);
    border-color: var(--button-warning-hover);
    color: #fff;
}

.btn-outline-warning {
    background: transparent;
    border-color: var(--button-warning);
    color: #b35c00;
}

.btn-outline-warning:hover,
.btn-outline-warning:focus-visible {
    background: #fff4e6;
    color: #b35c00;
}

.btn-info {
    background: var(--button-info);
    border-color: var(--button-info);
    color: #fff;
}

.btn-info:hover,
.btn-info:focus-visible {
    background: var(--button-info-hover);
    border-color: var(--button-info-hover);
    color: #fff;
}

.btn-outline-info {
    background: transparent;
    border-color: var(--button-info);
    color: var(--button-info-hover);
}

.btn-outline-info:hover,
.btn-outline-info:focus-visible {
    background: #e7f5ff;
    color: var(--button-info-hover);
}

.btn-secondary,
.btn-outline-secondary {
    background: var(--button-secondary-bg);
    border-color: var(--ink-300, #d0d5dd);
    color: var(--button-secondary-fg);
}

.btn-secondary:hover,
.btn-secondary:focus-visible,
.btn-outline-secondary:hover,
.btn-outline-secondary:focus-visible {
    background: var(--button-secondary-hover);
    border-color: var(--button-secondary-hover);
    color: var(--button-secondary-fg);
}

/* Ghost: بدون پس‌زمینه‌ی دائمی — مناسب Toolbar، اکشن‌های جدول و ناوبری (بند ۳ سند) */
.btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--button-ghost-fg);
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
    background: var(--button-ghost-hover);
    border-color: transparent;
    color: var(--button-ghost-fg);
}

/* ============================ ۴) Icon Button ============================ */
.btn-icon {
    width: var(--button-icon-size-md);
    height: var(--button-icon-size-md);
    padding: 0;
    gap: 0;
    flex: 0 0 auto;
}

.btn-icon.btn-xs,
.btn-icon.btn-sm {
    width: var(--button-icon-size-sm);
    height: var(--button-icon-size-sm);
}

.btn-icon.btn-lg,
.btn-icon.btn-xl {
    width: var(--button-icon-size-lg);
    height: var(--button-icon-size-lg);
}

.btn-icon > i,
.btn-icon > svg {
    font-size: 1.1rem;
}

/* ============================ ۵) Pill ============================ */
.btn-pill,
.btn.rounded-pill {
    border-radius: var(--button-radius-pill);
}

/* ============================ ۶) حالت‌ها ============================ */
.btn:not(:disabled):not(.disabled):hover {
    box-shadow: var(--button-shadow-hover);
    /* طبق بند ۹ سند: هیچ تغییر اندازه/جابه‌جایی در Hover */
    transform: none;
}

.btn-check:checked + .btn,
.btn:active,
.btn.active {
    transform: none;
    box-shadow: none;
}

.btn:focus-visible {
    outline: none;
    box-shadow: var(--button-focus-ring);
}

.btn:disabled,
.btn.disabled,
.btn[aria-disabled="true"] {
    opacity: var(--button-disabled-opacity);
    cursor: not-allowed;
    box-shadow: none;
}

/* ============================ ۷) Loading ============================ */
/* متن دکمه پنهان می‌شود ولی فضایش می‌ماند تا عرض دکمه و چیدمان صفحه جابه‌جا نشود (بند ۷ سند). */
.btn-loading {
    pointer-events: none;
    cursor: progress;
    color: transparent !important;
}

.btn-loading > i,
.btn-loading > svg,
.btn-loading .btn-label {
    visibility: hidden;
}

.btn-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 1.05em;
    height: 1.05em;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: btnDsSpin .7s linear infinite;
    /* رنگ اسپینر از رنگ متن دکمه گرفته می‌شود؛ چون متن شفاف شده، رنگ را صریح می‌گذاریم. */
    border-color: rgba(255, 255, 255, .55);
    border-top-color: #fff;
}

.btn-outline-brand.btn-loading::after,
.btn-outline-secondary.btn-loading::after,
.btn-outline-danger.btn-loading::after,
.btn-outline-success.btn-loading::after,
.btn-outline-warning.btn-loading::after,
.btn-outline-info.btn-loading::after,
.btn-ghost.btn-loading::after,
.btn-secondary.btn-loading::after {
    border-color: rgba(16, 24, 40, .25);
    border-top-color: var(--ink-700, #344054);
}

@keyframes btnDsSpin {
    to { transform: rotate(360deg); }
}

/* ============================ ۸) Toolbar / Table actions / Button group ============================ */
.ds-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.ds-actions {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
}

.ds-actions .btn {
    box-shadow: none;
}

.btn-group {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.btn-group > .btn {
    border-radius: var(--button-radius) !important;
}

/* ============================ ۹) Responsive (بند ۱۰ تا ۱۴ سند) ============================ */
@media (max-width: 767.98px) {
    /* در تبلت/موبایل پدینگ‌ها کمی جمع‌تر می‌شوند تا دکمه از قاب بیرون نزند */
    .btn {
        padding: 0 calc(var(--button-pad-md) - 4px);
    }

    .btn-sm,
    .btn-xs {
        padding: 0 calc(var(--button-pad-sm) - 2px);
    }

    /* Toolbar و اکشن‌های جدول Wrap می‌شوند */
    .ds-toolbar,
    .ds-actions,
    .btn-group {
        flex-wrap: wrap;
    }

    /* اکشن‌های اصلی فرم‌ها تمام‌عرض می‌شوند */
    .btn-full-sm {
        width: 100%;
    }

    /* دکمه‌هایی که با صفت data-collapse-sm علامت خورده‌اند در موبایل فقط آیکون نشان می‌دهند */
    .btn[data-collapse-sm] .btn-label {
        display: none;
    }

    .btn[data-collapse-sm] {
        padding: 0;
        width: var(--button-icon-size-md);
        height: var(--button-icon-size-md);
    }
}

@media (max-width: 575.98px) {
    /* موبایل کوچک: ارتفاع پیش‌فرض یک پله کوچک‌تر تا نوار ابزار جا شود */
    .btn {
        min-height: var(--button-height-sm);
        font-size: var(--button-font-sm);
    }

    .btn-lg,
    .btn-xl {
        min-height: var(--button-height-md);
        font-size: var(--button-font-md);
    }
}

/* احترام به تنظیم کاهش حرکت */
@media (prefers-reduced-motion: reduce) {
    .btn {
        transition: none;
    }

    .btn-loading::after {
        animation-duration: 1.6s;
    }
}

/* ============================ ۱۰) هم‌سنخ‌سازی واریانت‌های اختصاصی پروژه ============================ */

/* .btn-clinic: دکمه‌ی «ورود مرکز درمانی» در صفحات عمومی (فیروزه‌ای #0b7285).
   رنگ اختصاصی خودش حفظ می‌شود، ولی همان اندازه/حالت/انیمیشن سیستم را می‌گیرد. */
.btn-clinic {
    min-height: var(--button-height-lg);
    padding: 0 var(--button-pad-lg);
    font-size: var(--button-font-lg);
    font-weight: 600;
    border-radius: var(--button-radius);
    background: #0b7285;
    border: 1px solid #0b7285;
    color: #fff;
    gap: var(--button-gap);
    transition: background-color var(--button-transition), border-color var(--button-transition);
}

.btn-clinic:hover,
.btn-clinic:focus-visible {
    background: #095c6b;
    border-color: #095c6b;
    color: #fff;
    transform: none;
}

/* .bm-tb-btn: دکمه‌های نوار ابزار ویرایشگر پیام انبوه (نمونه‌ی «Extra Small» سند بند ۲). */
.bm-tb-btn {
    width: var(--button-height-xs);
    height: var(--button-height-xs);
    border-radius: var(--button-radius-sm);
    transition: background-color var(--button-transition), color var(--button-transition);
}

/* ============================ ۱۱) هماهنگی با تم تاریک ============================ */
/* پروژه با [data-bs-theme="dark"] تم تاریک دارد؛ پس‌زمینه‌ی Hover واریانت‌های outline
   باید در تم تاریک هم ملایم و کم‌کنتراست بماند (به‌جای تینت‌های روشن). */
[data-bs-theme="dark"] .btn-outline-brand:hover,
[data-bs-theme="dark"] .btn-outline-primary:hover {
    background: rgba(52, 219, 163, .14);
}

[data-bs-theme="dark"] .btn-outline-danger:hover {
    background: rgba(255, 107, 107, .14);
}

[data-bs-theme="dark"] .btn-outline-success:hover {
    background: rgba(47, 158, 68, .18);
}

[data-bs-theme="dark"] .btn-outline-warning:hover {
    background: rgba(255, 182, 72, .16);
    color: var(--button-warning);
}

[data-bs-theme="dark"] .btn-outline-info:hover {
    background: rgba(77, 171, 247, .16);
}

/* ============================ ۱۲) استثناها: اجزایی که فقط رنگ و حاشیهٔ سیستم را قرض می‌گیرند ============================
   چیپ‌های تاریخ صفحهٔ رزرو نوبت (‎.dbk-page .date-chip‎) کلاس‌های btn/btn-outline-brand/btn-brand را
   فقط برای رنگ و حاشیه می‌گیرند، ولی محتوایشان دوخطی است (نام روز + تاریخ شمسی). اگر چیدمان سیستم
   (inline-flex + nowrap) روی آن‌ها اعمال شود، متن در یک خط می‌افتد و ابتدای سال شمسی بریده می‌شود.
   این بخش تضمین می‌کند ظاهر و رفتار این اجزا دست‌نخورده بماند. */
.btn.date-chip,
.btn.dbk-day-item {
    display: inline-block;
    white-space: normal;
    gap: 0;
    height: auto;
    min-height: 0;
    max-width: none;
}

.btn.date-chip:not(:disabled):hover,
.btn.dbk-day-item:not(:disabled):hover,
.btn.date-chip:active,
.btn.dbk-day-item:active {
    box-shadow: none;
    transform: none;
}