:root {
    --bs-blue: #0d6efd;
    --bs-indigo: #6610f2;
    --bs-indigo-100: #ada9ff;
    --bs-indigo-200: #4f46e5;
    --bs-indigo-300: #3d35d1;
    --bs-indigo-900: #1f2937;
    --bs-black: #000;
    --bs-white: #fff;
    --bs-gray: #6c757d;
    --bs-gray-dark: #343a40;
    --bs-gray-100: #f8f9fa;
    --bs-gray-200: #e9ecef;
    --bs-gray-300: #dee2e6;
    --bs-gray-400: #ced4da;
    --bs-gray-500: #adb5bd;
    --bs-gray-600: #6c757d;
    --bs-gray-700: #495057;
    --bs-gray-800: #343a40;
    --bs-gray-900: #212529;
    --bs-primary: #4f46e5;
    --bs-secondary: #6c757d;
    --bs-success: #198754;
    --bs-info: #0dcaf0;
    --bs-warning: #eab308;
    --bs-warning-300: #d3a007;
    --bs-danger: #ef4444;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;
}

/* begin::utilities */
.text-gray-400 {
    color: var(--bs-gray-400);
}
/* end::utilities */

body {
    background: var(--bs-white);
    font-family: 'Kanit', sans-serif;
}

.app-main {
    background: var(--bs-gray-200);
}

.card {
    border-radius: 15px;
    box-shadow: none;
    border: none;
    padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
}

.card-header {
    padding: 0 0 1rem 0;
    border-bottom: none;
}

.bg-blur {
    backdrop-filter: blur(20px);
    background-color: rgba(255, 255, 255, 0.5); /* ให้ดูโปร่งใสและเบลอซ้อน */
    border-radius: 12px;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.text-shadow {
    text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}

/* .version-line-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;

    .line {
        flex-grow: 1;
        height: 1px;
        background-color: var(--bs-gray-500);
    }
} */

.btn-logout {
    background: linear-gradient(145deg, #f94545, #a01b1a);
}

::placeholder {
    color: var(--bs-gray-500) !important;
}

.page-title {
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--bs-gray-400);
    padding-bottom: 0.5rem;
}

/* begin::sidebar */
.sidebar-mini {

    .app-sidebar {
        padding: 0px 13px;

        &.bg-body-secondary {
            background-color: var(--bs-indigo-900) !important;
        }

        .badge {
            background-color: var(--bs-red);
            margin: 1px 20px !important;
            border-radius: 99px;
        }
    }

    .c-sidebar-brand {

        .c-brand-image {
            width: auto;
            max-height: 33px;
            line-height: 0.8;
        }

        .c-brand-text {
            opacity: 1;
            transition: opacity 0.3s ease;
        }
    }

    .c-sidebar-wrapper {

        .nav-link {
            color: var(--bs-gray-300);
        }

        .nav-link.active {
            background-color: var(--bs-primary);
        }

        .nav-treeview {

            .nav-link.active {
                color: var(--bs-dark);
                background-color: var(--bs-white);
            }
        }
    }

    &.sidebar-collapse {

        .c-brand-text {
            opacity: 0;
            max-width: 0;
        }

        .c-sidebar-wrapper {

            .nav-link {

                &.active {
                    max-width: 48px;
                }

                &.btn-logout.bg-danger {
                    max-width: 48px;
                }
            }
        }

        .app-sidebar:hover {

            .c-brand-text {
                display: inline;
                max-width: inherit;
                margin-left: 0.5rem;
                opacity: 1;
                transition: opacity 0.3s ease;
            }

            .nav-link p {
                display: inline;
                max-width: inherit;
                opacity: 1;
                transition: opacity 0.3s ease;
            }

            .nav-link.active {
                min-width: 222px;
            }

            .btn-logout.bg-danger {
                min-width: 222px;
            }
        }
    }
}
/* end::sidebar */