/* Zalo Web Admin Color Scheme */
:root {
	--primary-color: #174785;
	--warning-color: #FF791D;
    --success-color: #348D00;
    --danger-color: #ED542C;
    --info-color: #3cced6;
    /* Primary color */
    --primary: var(--primary-color);
    --primary-dark: #0f3260;
    --primary-light: #2563b8;
    --primary-rgb: 23, 71, 133;

    /* Secondary colors */
    --orange: #FF791D;
    --orange-dark: #e65a00;
    --orange-light: #ff9547;
    --orange-rgb: 255, 121, 29;

    --green: #348D00;
    --green-dark: #276600;
    --green-light: #4ab31a;
    --green-rgb: 52, 141, 0;

    --red: #ED542C;
    --red-dark: #c73e1f;
    --red-light: #f17454;
    --red-rgb: 237, 84, 44;

    /* Neutral colors */
    --gray-50: #f8fafc;
    --gray-100: #f1f5f9;
    --gray-200: #e2e8f0;
    --gray-300: #cbd5e1;
    --gray-400: #94a3b8;
    --gray-500: #64748b;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1e293b;
    --gray-900: #0f172a;

    /* Status colors */
    --success: var(--green);
    --warning: var(--orange);
    --danger: var(--red);
    --info: var(--primary);

    /* Background colors */
    --bg-primary: var(--primary);
    --bg-secondary: var(--gray-100);
    --bg-dark: var(--gray-800);
    --bg-light: #ffffff;

    /* Text colors */
    --text-primary: var(--gray-900);
    --text-secondary: var(--gray-600);
    --text-light: #ffffff;
    --text-muted: var(--gray-500);

    /* Border colors */
    --border-light: var(--gray-200);
    --border-default: var(--gray-300);
    --border-dark: var(--gray-400);

    /* Shadow colors */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

}

/* Apply primary color to common elements */
.btn:not([data-bs-toggle]){
	box-shadow: var(--shadow-sm);
}
.btn-primary {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--text-light) !important;
}

.btn-primary:hover {
    background-color: var(--primary-dark) !important;
    border-color: var(--primary-dark) !important;
}

.btn-primary:focus,
.btn-primary:active {
    background-color: var(--primary-dark) !important;
    border-color: var(--primary-dark) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.25) !important;
}

.btn-success {
    background-color: var(--green) !important;
    border-color: var(--green) !important;
}

.btn-success:hover {
    background-color: var(--green-dark) !important;
    border-color: var(--green-dark) !important;
}

.btn-warning {
    background-color: var(--orange) !important;
    border-color: var(--orange) !important;
}

.btn-warning:hover {
    background-color: var(--orange-dark) !important;
    border-color: var(--orange-dark) !important;
}

.btn-danger {
    background-color: var(--red) !important;
    border-color: var(--red) !important;
}

.btn-danger:hover {
    background-color: var(--red-dark) !important;
    border-color: var(--red-dark) !important;
}
.card{
	border:0;
	box-shadow: var(--shadow-sm);
}
/* Text colors */
.text-primary {
    color: var(--primary) !important;
}

.text-success {
    color: var(--green) !important;
}

.text-warning {
    color: var(--orange) !important;
}

.text-danger {
    color: var(--red) !important;
}

/* Background colors */
.bg-primary {
    background-color: var(--primary) !important;
    color: var(--text-light) !important;
}

.bg-success {
    background-color: var(--green) !important;
    color: var(--text-light) !important;
}

.bg-warning {
    background-color: var(--orange) !important;
    color: var(--text-light) !important;
}

.bg-danger {
    background-color: var(--red) !important;
    color: var(--text-light) !important;
}

/* Border colors */
.border-primary {
    border-color: var(--primary) !important;
}

.border-success {
    border-color: var(--green) !important;
}

.border-warning {
    border-color: var(--orange) !important;
}

.border-danger {
    border-color: var(--red) !important;
}

/* Alert colors */
.alert-primary {
    background-color: rgba(var(--primary-rgb), 0.1) !important;
    border-color: var(--primary) !important;
    color: var(--primary-dark) !important;
}

.alert-success {
    background-color: rgba(var(--green-rgb), 0.1) !important;
    border-color: var(--green) !important;
    color: var(--green-dark) !important;
}

.alert-warning {
    background-color: rgba(var(--orange-rgb), 0.1) !important;
    border-color: var(--orange) !important;
    color: var(--orange-dark) !important;
}

.alert-danger {
    background-color: rgba(var(--red-rgb), 0.1) !important;
    border-color: var(--red) !important;
    color: var(--red-dark) !important;
}

/* Badge colors */
.badge-primary {
    background-color: var(--primary) !important;
    color: var(--text-light) !important;
}

.badge-success {
    background-color: var(--green) !important;
    color: var(--text-light) !important;
}

.badge-warning {
    background-color: var(--orange) !important;
    color: var(--text-light) !important;
}

.badge-danger {
    background-color: var(--red) !important;
    color: var(--text-light) !important;
}
.nav{
	--bs-nav-link-color: var(--primary-color);
	--bs-nav-link-hover-color: var(--danger-color);
	
}
.nav-pills{
	--bs-nav-pills-link-active-bg: var(--primary-color);
}
.nav-pills > button{
	box-shadow: var(--shadow-sm);
}
/* Link colors */
a {
    color: var(--primary);
}

a:hover {
    color: var(--primary-dark);
}

/* Form controls */
.form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.25);
}

.form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}

/* Progress bars */
.progress-bar {
    background-color: var(--primary);
}

.progress-bar.bg-success {
    background-color: var(--green) !important;
}

.progress-bar.bg-warning {
    background-color: var(--orange) !important;
}

.progress-bar.bg-danger {
    background-color: var(--red) !important;
}

/* Custom scrollbar */
::-webkit-scrollbar-thumb {
    background-color: var(--primary);
}

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