/* Wrapper của _SettingDetails.cshtml.
   Trước đây div này mang class .pos-container — TRÙNG với wrapper của popup
   Quick Sale (_QuickSale.cshtml). Hai thứ cùng nằm trong DOM của Home/Index,
   nên $(".pos-container") trong customQuickSale.js khớp cả hai: khi
   updateContainerVisibility() ẩn layout desktop ở viewport < 768px thì nó ẩn
   luôn ruột của trang Settings, và Setting.navigation() không bao giờ gỡ ra.
   Quick Sale giờ dùng .qs-pos-container; 4 thuộc tính dưới đây là phần layout
   mà Settings vốn thừa hưởng từ rule .pos-container cũ, chép lại nguyên văn. */
.setting-page-container {
    display: flex;
    flex-direction: column;
    background-color: var(--bs-body-bg);
    flex: 1;
    overflow: hidden;
}

@media (max-width: 768px) {
    /* Giữ nguyên hành vi cũ. height:100vh vốn dành cho modal fullscreen của
       Quick Sale, với Settings thì hơi thừa vì section cha đã height:100%;
       nhưng đổi ở đây là đổi giao diện, không phải đổi tên — để riêng. */
    .setting-page-container {
        flex-direction: column;
        height: 100vh;
        overflow: hidden;
    }
}

.setting-scroll-container {
    overflow: auto;
    background-color: var(--bg-body-main);
    padding: var(--px-24);
    flex: 1;
    padding-bottom: var(--px-96);
}

.setting-inner-content {
    max-width: 50%;
    margin: 0 auto;
}

.setting-page-title {
    font: normal normal 700 var(--s-28);
    color: var(--bs-heading-color);
    margin-bottom: var(--px-24);
}

.setting-sections-container {
    display: flex;
    flex-direction: column;
    gap: var(--px-24);
}

.setting-section-wrapper {
    margin-bottom: var(--px-16);
}

.setting-section-label {
    font: normal normal 600 var(--s-12);
    color: var(--bs-placeholder-color);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--px-12);
    padding: 0 var(--px-4);
}

.setting-grid-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--px-12);
}

.setting-menu-button {
    display: flex;
    align-items: center;
    gap: var(--px-16);
    padding: var(--px-16);
    background-color: var(--bs-surface-bg);
    border-radius: var(--px-12);
    border: 1px solid var(--bs-border-color);
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    height: auto;
}

    .setting-menu-button:hover {
        box-shadow: var(--bs-shadow-sm);
        border-color: var(--bs-border-strong);
    }

    .setting-menu-button.setting-logout-btn {
        border-color: color-mix(in srgb, var(--bs-red) 25%, white);
    }

        .setting-menu-button.setting-logout-btn:hover {
            border-color: color-mix(in srgb, var(--bs-red) 40%, white);
        }

.setting-icon-container {
    width: var(--px-44);
    height: var(--px-44);
    border-radius: var(--px-8);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.setting-icon-emerald {
    background-color: color-mix(in srgb, var(--bs-teal) 15%, white);
}

.setting-icon-green {
    background-color: color-mix(in srgb, var(--bs-green) 15%, white);
}

.setting-icon-blue {
    background-color: var(--bs-main-light);
}

.setting-icon-red {
    background-color: color-mix(in srgb, var(--bs-red) 15%, white);
}

.setting-icon-pink {
    background-color: color-mix(in srgb, var(--bs-pink) 15%, white);
}

.setting-icon-amber {
    background-color: color-mix(in srgb, var(--bs-orange) 20%, white);
}

.setting-icon-indigo {
    background-color: color-mix(in srgb, var(--bs-purple) 15%, white);
}

.setting-icon-purple {
    background-color: color-mix(in srgb, var(--bs-purple) 18%, white);
}

.setting-icon-cyan {
    background-color: color-mix(in srgb, var(--bs-cyan) 15%, white);
}

.setting-icon-orange {
    background-color: color-mix(in srgb, var(--bs-orange) 18%, white);
}

.setting-icon-violet {
    background-color: color-mix(in srgb, var(--bs-purple) 20%, white);
}

.setting-icon-teal {
    background-color: color-mix(in srgb, var(--bs-teal) 15%, white);
}

.setting-icon-gray {
    background-color: var(--bs-muted-bg);
}

.setting-menu-icon {
    width: var(--px-20);
    height: var(--px-20);
}

.setting-icon-emerald .setting-menu-icon {
    stroke: var(--bs-teal);
}

.setting-icon-marketing {
    background: #d6ad331c;
}

    .setting-icon-marketing .setting-menu-icon {
        stroke: #ffaf00;
    }

.setting-icon-green .setting-menu-icon {
    stroke: var(--bs-green);
}

.setting-icon-blue .setting-menu-icon {
    stroke: var(--bs-main-600);
}

.setting-icon-red .setting-menu-icon {
    stroke: var(--bs-red);
}

.setting-icon-pink .setting-menu-icon {
    stroke: var(--bs-pink);
}

.setting-icon-amber .setting-menu-icon {
    stroke: var(--bs-orange);
}

.setting-icon-indigo .setting-menu-icon {
    stroke: var(--bs-purple);
}

.setting-icon-purple .setting-menu-icon {
    stroke: var(--bs-purple);
}

.setting-icon-cyan .setting-menu-icon {
    stroke: var(--bs-cyan);
}

.setting-icon-orange .setting-menu-icon {
    stroke: var(--bs-orange);
}

.setting-icon-violet .setting-menu-icon {
    stroke: var(--bs-purple);
}

.setting-icon-teal .setting-menu-icon {
    stroke: var(--bs-teal);
}

.setting-icon-gray .setting-menu-icon {
    stroke: var(--bs-text-muted);
}

.setting-menu-label {
    flex: 1;
    text-align: left;
    font: normal normal 500 var(--s-16);
    color: var(--bs-text);
}

.setting-menu-button.setting-logout-btn .setting-menu-label {
    color: var(--bs-red);
}

.setting-chevron-icon {
    width: var(--px-20);
    height: var(--px-20);
    stroke: var(--bs-placeholder-color);
    transition: stroke 0.2s ease;
}

.setting-menu-button:hover .setting-chevron-icon {
    stroke: var(--bs-text-muted);
}

.setting-menu-button.setting-logout-btn .setting-chevron-icon {
    stroke: color-mix(in srgb, var(--bs-red) 55%, white);
}

.setting-menu-button.setting-logout-btn:hover .setting-chevron-icon {
    stroke: var(--bs-red);
}

/* Responsive Design */
@media (min-width: 768px) {
    .setting-dashboard-main {
        padding-top: var(--px-64);
    }

    .setting-grid-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .setting-inner-content {
        max-width: 100%;
        margin: 0 auto;
    }

    .setting-scroll-container {
        padding: var(--px-16);
    }
}