/* ========== BASE STYLES ========== */
/* ������ */
html body {
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-base: 16px;
    --font-size-md: 18px;
    --font-size-lg: 20px;
    --font-size-xl: 22px;
    --font-size-2xl: 24px;
    --font-size-3xl: 28px;
    --font-size-4xl: 32px;
    --font-size-5xl: 38px;
    --font-size-brand: 20px;
}

/* �����ѧ��� */
/*html[lang="en"] body {
    font-family: var(--font-secondary);*/ /*ภาษาอังกฤษ*/
    /*--font-size-xs: 10px;
    --font-size-sm: 12px;
    --font-size-base: 14px;
    --font-size-md: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-size-2xl: 22px;
    --font-size-3xl: 26px;
    --font-size-4xl: 30px;
    --font-size-5xl: 36px;
    --font-size-brand: 18px;
}*/

*, *::before, *::after {
    box-sizing: border-box;
}

    *, *::before, *::after {
        box-sizing: border-box;
    }

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

button,
input,
select,
textarea {
    font-family: inherit;
}

::-webkit-scrollbar {
    width: var(--scrollbar-width);
}

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

::-webkit-scrollbar-thumb {
    background: var(--color-scrollbar);
    border-radius: var(--radius-xs);
}

    ::-webkit-scrollbar-thumb:hover {
        background: var(--color-scrollbar-hover);
    }

body {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: var(--letter-spacing-default);
    font-family: var(--font-primary);
    color: var(--color-dark);
    background: var(--color-bg-main);
    overflow: hidden;
}

.app-container {
    display: flex;
    height: 100vh; /* fallback */
    height: 100dvh; /* modern browser */
    position: relative;
}

.btn-add,
.btn-edit,
.btn-filter {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

    .btn-add:hover,
    .btn-edit:hover,
    .btn-filter:hover {
        transform: translateY(-1px);
        /*box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);*/
    }

.btn-filter {
/*    height: 34px;*/
}

/* ========== SMOOTH TRANSITIONS ========== */
body,
.sidebar,
.main-content,
.content-area,
.menu-card,
.menu-item,
.right-panel,
.table-container,
table,
th,
td,
.btn,
.form-control,
.icon-btn,
.page-btn {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

svg,
svg path,
svg line,
svg circle {
    transition: fill 0.3s ease, stroke 0.3s ease;
}