/* ============================================================
   ธีมสีของทั้งโปรเจ็ก — น้ำเงิน MyMerchant ไล่เฉียง 135°
   (ชุดเดียวกับหัวหน้าข้อมูลร้านค้า / หน้าออกจากระบบ)
   โหลดหลัง sb-admin-2 ใน _Layout และ _AuthLayout
   ============================================================ */

:root {
    --mm-primary: #4e73df;
    --mm-primary-dark: #224abe;
    --mm-primary-soft: #eaf0fc;
    --mm-gradient: linear-gradient(135deg, #4e73df 10%, #224abe 100%);
    --mm-on-primary-soft: rgba(255, 255, 255, .16);
    --mm-font: 'Noto Sans Thai Looped', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* ฟอนต์ทั้งโปรเจ็ก (แทน Nunito ของ sb-admin) — ช่องกรอก/ปุ่มของ bootstrap ใช้ font-family: inherit */
body,
.tooltip,
.popover {
    font-family: var(--mm-font);
}

/* พื้นหลังไล่สีทุกจุดที่ใช้ class ของ sb-admin (sidebar ฯลฯ) */
.bg-gradient-primary {
    background-color: var(--mm-primary) !important;
    background-image: var(--mm-gradient) !important;
}

/* ---------- เมนูด้านซ้าย ---------- */

/* โลโก้: ไอคอนในกรอบโปร่ง + ชื่อ (แบบเดียวกับหัว card) */
#accordionSidebar .sidebar-brand-icon.mm-brand-tile {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--mm-on-primary-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: none;
}

#accordionSidebar .sidebar-brand-icon.mm-brand-tile .sidebar-brand-symbol {
    font-size: 24px;
}

#accordionSidebar .sidebar-brand-text {
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: none;
    font-size: 1.05rem;
}

/* เมนูหลัก: hover / active เป็นแถบโปร่งมุมโค้ง */
#accordionSidebar .nav-item {
    padding: 2px 8px;
}

#accordionSidebar .nav-item .nav-link {
    border-radius: 8px;
    transition: background-color .15s ease;
}

#accordionSidebar .nav-item .nav-link:hover {
    background-color: rgba(255, 255, 255, .08);
}

#accordionSidebar .nav-item.active > .nav-link,
#accordionSidebar .nav-item > .nav-link:not(.collapsed)[data-toggle="collapse"] {
    background-color: var(--mm-on-primary-soft);
}

#accordionSidebar .nav-item.active > .nav-link,
#accordionSidebar .nav-item.active > .nav-link span {
    color: #fff;
    font-weight: 700;
}

/* ความกว้างลิงก์ = พื้นที่ภายใน nav-item (หัก padding ด้านข้าง) */
#accordionSidebar.sidebar .nav-item .nav-link {
    width: 100% !important;
}

/* เมนูย่อย */
#accordionSidebar .collapse-inner {
    border-radius: 8px !important;
}

#accordionSidebar .collapse-inner .collapse-item {
    border-radius: 6px;
}

#accordionSidebar .collapse-inner .collapse-item.active {
    color: var(--mm-primary);
    background-color: var(--mm-primary-soft);
    font-weight: 700;
}

#accordionSidebar .collapse-inner .collapse-item:hover {
    background-color: #f1f4fb;
}

/* โหมดไอคอน (sidebar ย่อ / จอเล็ก 90px): ลดขอบข้างให้ข้อความมีที่พอ */
#accordionSidebar.toggled .nav-item {
    padding: 2px 4px;
}

@media (max-width: 767.98px) {
    #accordionSidebar .nav-item {
        padding: 2px 4px;
    }
}

/* ชื่อเมนูในโหมดไอคอน: บรรทัดเดียว ไม่ตัดคำกลางคำ (เช่น "ข้อมูลร้านค้า") */
#accordionSidebar.toggled .nav-item .nav-link > span:not(.material-symbols-rounded) {
    display: block;
    white-space: nowrap;
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 767.98px) {
    #accordionSidebar .nav-item .nav-link > span:not(.material-symbols-rounded) {
        display: block;
        white-space: nowrap;
        font-size: 11px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* ---------- ไม่มีกรอบ focus / กดค้าง ----------
   sb-admin: button:focus { outline: 5px auto -webkit-focus-ring-color } -> Chrome วาดกรอบดำตอนคลิกค้าง
   bootstrap: .btn:focus / :active:focus ใส่ box-shadow (วงสีรอบปุ่ม)
   theme.css มี asp-append-version จึงไม่ติด cache เหมือน site.css เดิม */
*,
*::before,
*::after,
*:focus,
*:focus-visible,
*:active {
    outline: none !important;
}

.btn:focus,
.btn.focus,
.btn:active,
.btn.active,
.btn:not(:disabled):not(.disabled):active:focus,
.btn:not(:disabled):not(.disabled).active:focus,
.show > .btn.dropdown-toggle:focus,
.page-link:focus,
.close:focus,
.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: none !important;
}

/* ---------- แถบเลื่อนแนวนอน (js/mm-scroller.js) แบบ PrimeVue TabView scrollable ---------- */
.mm-scroller {
    position: relative;
    --mm-scroller-bg: #fff;
}

.card-header .mm-scroller {
    --mm-scroller-bg: #f8f9fc;      /* พื้น card-header ของ sb-admin */
}

.mm-scroller-content {
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;
    scroll-behavior: smooth;
}

.mm-scroller-content::-webkit-scrollbar {
    display: none;
}

.mm-scroller-btn {
    position: absolute;
    z-index: 2;
    width: 32px;
    padding: 0;
    border: 0;
    display: none;
    align-items: center;
    justify-content: center;
    color: var(--mm-primary, #4e73df);
    background: var(--mm-scroller-bg);
    cursor: pointer;
}

.mm-scroller-btn.is-visible {
    display: flex;
}

/* จางไปทางเนื้อหา ให้รู้ว่ามีต่อ */
.mm-scroller-btn::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 16px;
    pointer-events: none;
}

.mm-scroller-prev::after {
    left: 100%;
    background: linear-gradient(90deg, var(--mm-scroller-bg), rgba(255, 255, 255, 0));
}

.mm-scroller-next::after {
    right: 100%;
    background: linear-gradient(270deg, var(--mm-scroller-bg), rgba(255, 255, 255, 0));
}

.mm-scroller-btn .material-symbols-rounded {
    font-size: 22px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    box-shadow: 0 1px 4px rgba(58, 59, 69, .2);
    transition: background-color .15s ease;
}

.mm-scroller-btn:hover .material-symbols-rounded {
    background: var(--mm-primary-soft, #eaf0fc);
}

/* ---------- เมนูย่อยตอน sidebar กาง (จอ >= 768px): อยู่ในแถบสีเดียวกัน ไม่เป็นกล่องขาวลอย ---------- */
@media (min-width: 768px) {
    #accordionSidebar:not(.toggled) .nav-item .collapse .collapse-inner,
    #accordionSidebar:not(.toggled) .nav-item .collapsing .collapse-inner {
        background: transparent !important;
        box-shadow: none !important;
        margin: 2px 0 8px 22px !important;
        padding: 2px 0 2px 10px !important;
        border-left: 1px solid rgba(255, 255, 255, .22);
        border-radius: 0 !important;
    }

    #accordionSidebar:not(.toggled) .nav-item .collapse-inner .collapse-item {
        color: rgba(255, 255, 255, .78);
        margin: 2px 0;
        padding: .5rem .75rem;
        font-size: .85rem;
        white-space: normal;
    }

    #accordionSidebar:not(.toggled) .nav-item .collapse-inner .collapse-item:hover {
        color: #fff;
        background-color: rgba(255, 255, 255, .1);
    }

    #accordionSidebar:not(.toggled) .nav-item .collapse-inner .collapse-item.active {
        color: #fff;
        background-color: rgba(255, 255, 255, .18);
        font-weight: 700;
    }

    /* กลุ่มที่เปิดอยู่: หัวกลุ่มไม่ต้องเป็นแถบทึบ (ให้เมนูย่อยที่เลือกเด่นกว่า) */
    #accordionSidebar:not(.toggled) .nav-item > .nav-link[data-toggle="collapse"]:not(.collapsed) {
        background-color: transparent;
    }

    #accordionSidebar:not(.toggled) .nav-item.active > .nav-link[data-toggle="collapse"],
    #accordionSidebar:not(.toggled) .nav-item.active > .nav-link[data-toggle="collapse"] span {
        color: #fff;
        font-weight: 700;
    }
}

/* ชื่อเมนูโหมดไอคอน: เผื่อความสูงให้สระบน/ล่าง และวรรณยุกต์ (Noto Sans Thai Looped) ไม่โดนตัดจาก overflow: hidden */
#accordionSidebar.toggled .nav-item .nav-link > span:not(.material-symbols-rounded) {
    line-height: 1.75 !important;
    padding: 1px 0;
}

@media (max-width: 767.98px) {
    #accordionSidebar .nav-item .nav-link > span:not(.material-symbols-rounded) {
        line-height: 1.75 !important;
        padding: 1px 0;
    }
}

/* ---------- หัวข้อหน้าบน topbar ----------
   เดิมเป็น h4 (1.5rem, line-height 1.2) สระล่าง/วรรณยุกต์ของ Noto Sans Thai Looped โดนตัด
   ลดขนาด + เผื่อความสูงบรรทัด, ยาวเกินให้ตัดด้วย … (ดูเต็มได้จาก tooltip) */
.topbar .mm-topbar-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.7;
    color: #3a3b45;
    max-width: 100%;
    padding: 0 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 575.98px) {
    .topbar .mm-topbar-title {
        font-size: 1rem;
        padding: 0 4px;
    }
}

/* ---------- Scrollbar ทั้งโปรเจ็ก: บาง มุมโค้ง ไม่มีปุ่มลูกศร ----------
   Chrome / Edge ใช้ ::-webkit-scrollbar (ห้ามตั้ง scrollbar-width ที่ element เดียวกัน ไม่งั้น Chrome 121+ ข้ามกฎนี้)
   Firefox ใช้ scrollbar-width / scrollbar-color (อยู่ใน @supports เฉพาะ Firefox)
   แถบเมนูซ้ายและ .mm-scroller มีกฎของตัวเอง (selector เฉพาะกว่า) */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: #c9cddb;
    border-radius: 999px;
    border: 3px solid transparent;      /* ขอบใส = ตัว thumb ดูบาง 4px แต่ยังกดง่าย */
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #9aa1b9;
}

::-webkit-scrollbar-thumb:active {
    background-color: var(--mm-primary, #4e73df);
}

::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}

::-webkit-scrollbar-corner {
    background: transparent;
}

@supports (-moz-appearance: none) {
    * {
        scrollbar-width: thin;
        scrollbar-color: #c9cddb transparent;
    }
}

/* ---------- ระยะห่างทั้งโปรเจ็ก (ให้เนื้อหาได้พื้นที่มากขึ้น) ----------
   bootstrap เดิม: .container / .container-fluid padding ข้าง 0.75rem, .mb-4 / .my-4 = 1.5rem
   utility ของ bootstrap ใช้ !important จึงต้องใส่ !important ตาม */
.container,
.container-fluid {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.mb-4,
.my-4 {
    margin-bottom: 0.5rem !important;
}

.my-4 {
    margin-top: 0.5rem !important;
}


/* ตัวนับตัวอักษร (js/mm-maxlength.js): แสดงเมื่อพิมพ์ถึง 80% ของความยาวสูงสุด */
.mm-maxcount {
    display: block;
    text-align: right;
    font-size: 11px;
    line-height: 1.4;
    margin-top: 2px;
    color: #858796;
    font-variant-numeric: tabular-nums;
}

.mm-maxcount.is-full {
    color: #e74a3b;
    font-weight: 700;
}

/* ป้ายสถานะ (แบบเดียวกับคู่มือใช้งาน wwwroot/docs) — ป้ายมน + จุดสีนำหน้า พื้นสีอ่อน
   ใช้คู่กับ .badge: <span class="badge mm-status mm-st-ok">ใช้งาน</span> */
.badge.mm-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px 0 8px;
    border: 0;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.85;
    white-space: nowrap;
    background: var(--st-bg);
    color: var(--st-ink);
}

.badge.mm-status::before {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--st-dot);
}

.badge.mm-status .material-symbols-rounded {
    display: none;
}

.mm-st-ok { --st-dot: #1cc88a; --st-bg: #e2f7ee; --st-ink: #0b6e4b; }
.mm-st-near { --st-dot: #f6c23e; --st-bg: #fdf3d6; --st-ink: #7d5400; }
.mm-st-exp { --st-dot: #e74a3b; --st-bg: #fce6e4; --st-ink: #a8281b; }
.mm-st-pend { --st-dot: #4e73df; --st-bg: #e6ecfc; --st-ink: #2649b8; }
.mm-st-gray { --st-dot: #858796; --st-bg: #ececf1; --st-ink: #4f5163; }
.mm-st-dark { --st-dot: #3a3b45; --st-bg: #e4e5ea; --st-ink: #2b2c34; }