:root {
    /* Primary Colors */
    --primary-50: #eaeffd !important;
    --primary-100: #d5dffc !important;
    --primary-200: #aabff8 !important;
    --primary-300: #809ff5 !important;
    --primary-400: #688bef !important;
    --primary-500: #506ee4 !important;
    --primary-600: #3a59c7 !important;
    --primary-700: #2a45a3 !important;
    --primary-800: #1d3280 !important;
    --primary-900: #132366 !important;

    /* Neutral Colors */
    --neutral-50: #f9fafb !important;
    --neutral-100: #f3f4f6 !important;
    --neutral-200: #e5e7eb !important;
    --neutral-300: #d1d5db !important;
    --neutral-400: #9ca3af !important;
    --neutral-500: #6b7280 !important;
    --neutral-600: #4b5563 !important;
    --neutral-700: #374151 !important;
    --neutral-800: #1f2937 !important;
    --neutral-900: #111827 !important;

    /* Semantic Colors */
    --primary: #4747a1 !important;
    --light-danger: #f3797e !important;
    --warning: #ffc100 !important;
    --tale: #7da0fa !important;
    --dark-blue: #4747a1 !important;
    --light-blue: #7978e9 !important;
    --secondary: #a3a4a5 !important;
    --info: #248afd !important;
    --maroon: #b95d5d !important;
    --info-light: #75c9eb !important;
    --success: #74a67e !important;
    --danger: #ff4747 !important;
    --dribbble: #ea4c89 !important;
    --super-light-primary: #e9e9f7 !important;
    --super-light-success: #e8f5e8 !important;
    --super-light-danger: #fde7e8 !important;
    --super-light-warning: #fff4cc !important;
    --accent-color: #f5f7ff !important;
    --sidebar-width: 260px !important;
    --sidebar-collapsed: 70px !important;
}

.container {
    max-width: 1200px !important;
    margin: 0 auto !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    color: #202c4b !important;
    font-family: "Nunito", sans-serif !important;
    margin-bottom: 0 !important;
}
h1,
.h1 {
    font-size: 30px !important;
    font-weight: 700 !important;
}
h2,
.h2 {
    font-size: 24px !important;
    font-weight: 700 !important;
}
h3,
.h3 {
    font-size: 20px !important;
    font-weight: 600 !important;
}
h4,
.h4 {
    font-size: 18px !important;
    font-weight: 600 !important;
}
h5,
.h5 {
    font-size: 16px !important;
    font-weight: 600 !important;
}
h6,
.h6 {
    font-size: 15px !important;
    font-weight: 500 !important;
}
p {
    margin-bottom: 1.5rem !important;
}

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

.section {
    background: white !important;
    border-radius: 8px !important;
    padding: 2rem !important;
    margin-bottom: 2rem !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
}

.component-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
    gap: 2rem !important;
    margin-top: 1.5rem !important;
}

.component-card {
    border: 1px solid var(--neutral-200) !important;
    border-radius: 8px !important;
    background: white !important;
}

.component-title {
    font-weight: 600 !important;
    margin-bottom: 1rem !important;
    font-size: 1.1rem !important;
}

/* Button Styles */
.btn {
    border-radius: 5px !important;
    padding: 0.5rem 0.85rem !important;
    font-size: 14px !important;
    transition: all 0.5s !important;
    font-weight: 500 !important;
    border: none !important;
    align-items: center !important;
    align-content: center !important;
}

.btn-sm {
    font-size: 12px !important;
}

.btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
}

.btn:active {
    transform: translateY(0) !important;
}

/* Primary Button Variants */
.btn-primary {
    background-color: var(--primary) !important;
    color: white !important;
}

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

.btn-primary-light {
    background-color: var(--primary-50) !important;
    color: var(--primary-700) !important;
    border: 1px solid var(--primary-200) !important;
}

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

.btn-primary-inverse {
    background-color: white !important;
    color: var(--primary) !important;
    border: 1px solid var(--primary) !important;
}

.btn-primary-inverse:hover {
    background-color: var(--primary-50) !important;
}
.btn-primary-outline {
    background-color: transparent !important;
    color: var(--primary) !important;
    border: 2px solid var(--primary) !important;
}
.btn-primary-outline:hover {
    background-color: var(--primary) !important;
    color: white !important;
}

/* Neutral Button Variants */
.btn-neutral {
    background-color: var(--neutral-500) !important;
    color: white !important;
}

.btn-neutral:hover {
    background-color: var(--neutral-600) !important;
}

.btn-neutral-light {
    background-color: var(--neutral-100) !important;
    color: var(--neutral-700) !important;
    border: 1px solid var(--neutral-300) !important;
}

.btn-neutral-light:hover {
    background-color: var(--neutral-200) !important;
}

.btn-neutral-inverse {
    background-color: white !important;
    color: var(--neutral-700) !important;
    border: 1px solid var(--neutral-500) !important;
}

.btn-neutral-inverse:hover {
    background-color: var(--neutral-50) !important;
}
.btn-neutral-outline {
    background-color: transparent !important;
    color: var(--neutral-600) !important;
    border: 2px solid var(--neutral-500) !important;
}
.btn-neutral-outline:hover {
    background-color: var(--neutral-500) !important;
    color: white !important;
}

/* Success Button Variants */
.btn-success {
    background-color: var(--success) !important;
    color: white !important;
}

.btn-success:hover {
    background-color: #0da271 !important;
}

.btn-success-light {
    background-color: rgba(16, 185, 129, 0.1) !important;
    color: var(--success) !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
}

.btn-success-light:hover {
    background-color: rgba(16, 185, 129, 0.2) !important;
}

.btn-success-inverse {
    background-color: white !important;
    color: var(--success) !important;
    border: 1px solid var(--success) !important;
}

.btn-success-inverse:hover {
    background-color: rgba(16, 185, 129, 0.05) !important;
}

.btn-success-outline {
    background-color: transparent !important;
    color: var(--success) !important;
    border: 2px solid var(--success) !important;
}
.btn-success-outline:hover {
    background-color: var(--success) !important;
    color: white !important;
}

/* Warning Button Variants */
.btn-warning {
    background-color: var(--warning) !important;
    color: white !important;
}

.btn-warning:hover {
    background-color: #e69507 !important;
}

.btn-warning-light {
    background-color: rgba(245, 158, 11, 0.1) !important;
    color: var(--warning) !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
}

.btn-warning-light:hover {
    background-color: rgba(245, 158, 11, 0.2) !important;
}

.btn-warning-inverse {
    background-color: white !important;
    color: var(--warning) !important;
    border: 1px solid var(--warning) !important;
}

.btn-warning-inverse:hover {
    background-color: rgba(245, 158, 11, 0.05) !important;
}

.btn-warning-outline {
    background-color: transparent !important;
    color: var(--warning) !important;
    border: 2px solid var(--warning) !important;
}
.btn-warning-outline:hover {
    background-color: var(--warning) !important;
    color: white !important;
}

/* Error Button Variants */
.btn-error {
    background-color: var(--danger) !important;
    color: white !important;
}

.btn-error:hover {
    background-color: #e03e3e !important;
}

.btn-error-light {
    background-color: rgba(239, 68, 68, 0.1) !important;
    color: var(--danger) !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

.btn-error-light:hover {
    background-color: rgba(239, 68, 68, 0.2) !important;
}

.btn-error-inverse {
    background-color: white !important;
    color: var(--danger) !important;
    border: 1px solid var(--danger) !important;
}

.btn-error-inverse:hover {
    background-color: rgba(239, 68, 68, 0.05) !important;
}

.btn-error-outline {
    background-color: transparent !important;
    color: var(--danger) !important;
    border: 2px solid var(--danger) !important;
}
.btn-error-outline:hover {
    background-color: var(--danger) !important;
    color: white !important;
}

/* Info Button Variants */
.btn-info {
    background-color: var(--info) !important;
    color: var(--dark) !important;
}

.btn-info:hover {
    background-color: rgba(80, 110, 228, 0.1) !important;
}

.btn-info-light {
    background-color: rgba(80, 110, 228, 0.1) !important;
    color: var(--info) !important;
    border: 1px solid rgba(80, 110, 228, 0.3) !important;
}

.btn-info-light:hover {
    background-color: rgba(80, 110, 228, 0.2) !important;
}

.btn-info-inverse {
    background-color: white !important;
    color: var(--info) !important;
    border: 1px solid var(--info) !important;
}

.btn-info-inverse:hover {
    background-color: rgba(80, 110, 228, 0.05) !important;
}

.btn-info-outline {
    background-color: transparent !important;
    color: var(--primary) !important;
    border: 2px solid var(--primary) !important;
}
.btn-info-outline:hover {
    background-color: var(--primary) !important;
    color: white !important;
}

/* Badge Styles */
.badge {
    display: inline-flex !important;
    align-items: center !important;
    padding: 0.35rem 0.75rem !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    border-radius: 9999px !important;
    margin: 0.25rem !important;
}

/* Primary Badge Variants */
.badge-primary {
    background-color: var(--primary) !important;
    color: white !important;
}

.badge-primary-light {
    background-color: var(--primary-50) !important;
    color: var(--primary-700) !important;
    border: 1px solid var(--primary-200) !important;
}

.badge-primary-inverse {
    background-color: white !important;
    color: var(--primary) !important;
    border: 1px solid var(--primary) !important;
}

/* Neutral Badge Variants */
.badge-neutral {
    background-color: var(--neutral-500) !important;
    color: white !important;
}

.badge-neutral-light {
    background-color: var(--neutral-100) !important;
    color: var(--neutral-700) !important;
    border: 1px solid var(--neutral-300) !important;
}

.badge-neutral-inverse {
    background-color: white !important;
    color: var(--neutral-700) !important;
    border: 1px solid var(--neutral-500) !important;
}

/* Success Badge Variants */
.badge-success {
    background-color: var(--success) !important;
    color: white !important;
}

.badge-success-light {
    background-color: rgba(16, 185, 129, 0.1) !important;
    color: var(--success) !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
}

.badge-success-inverse {
    background-color: white !important;
    color: var(--success) !important;
    border: 1px solid var(--success) !important;
}

/* Warning Badge Variants */
.badge-warning {
    background-color: var(--warning) !important;
    color: white !important;
}

.badge-warning-light {
    background-color: rgba(245, 158, 11, 0.1) !important;
    color: var(--warning) !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
}

.badge-warning-inverse {
    background-color: white !important;
    color: var(--warning) !important;
    border: 1px solid var(--warning) !important;
}

/* Error Badge Variants */
.badge-error {
    background-color: var(--danger) !important;
    color: white !important;
}

.badge-error-light {
    background-color: rgba(239, 68, 68, 0.1) !important;
    color: var(--danger) !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

.badge-error-inverse {
    background-color: white !important;
    color: var(--danger) !important;
    border: 1px solid var(--danger) !important;
}

/* Info Badge Variants */
.badge-info {
    background-color: var(--info) !important;
    color: white !important;
}

.badge-info-light {
    background-color: rgba(80, 110, 228, 0.1) !important;
    color: var(--info) !important;
    border: 1px solid rgba(80, 110, 228, 0.3) !important;
}

.badge-info-inverse {
    background-color: white !important;
    color: var(--info) !important;
    border: 1px solid var(--info) !important;
}

/* Background Styles */
.bg-primary {
    background-color: var(--primary) !important;
    color: white !important;
    border-radius: 8px !important;
    margin: 0.5rem 0;
}

.bg-primary-light {
    background-color: var(--primary-50) !important;
    color: var(--primary-800) !important;
    border-radius: 8px;
    margin: 0.5rem 0;
    border: 1px solid var(--primary-100) !important;
}

.bg-primary-inverse {
    background-color: white !important;
    color: var(--primary) !important;
    border-radius: 8px !important;
    margin: 0.5rem 0 !important;
    border: 1px solid var(--primary) !important;
}

.bg-neutral {
    background-color: var(--neutral-500) !important;
    color: white !important;
    border-radius: 8px !important;
    margin: 0.5rem 0 !important;
}

.bg-neutral-light {
    background-color: var(--neutral-100) !important;
    color: var(--neutral-800) !important;
    border-radius: 8px !important;
    margin: 0.5rem 0 !important;
    border: 1px solid var(--neutral-200) !important;
}

.bg-neutral-inverse {
    background-color: white !important;
    color: var(--neutral-700) !important;
    border-radius: 8px !important;
    margin: 0.5rem 0 !important;
    border: 1px solid var(--neutral-500) !important;
}

.bg-success {
    background-color: var(--success) !important;
    color: white !important;
    border-radius: 8px !important;
    margin: 0.5rem 0 !important;
}

.bg-success-light {
    background-color: rgba(16, 185, 129, 0.1) !important;
    color: var(--success) !important;
    border-radius: 8px !important;
    margin: 0.5rem 0 !important;
    border: 1px solid rgba(16, 185, 129, 0.2) !important;
}

.bg-success-inverse {
    background-color: white !important;
    color: var(--success) !important;
    border-radius: 8px !important;
    margin: 0.5rem 0 !important;
    border: 1px solid var(--success) !important;
}

.bg-warning {
    background-color: var(--warning) !important;
    color: white !important;
    border-radius: 8px !important;
    margin: 0.5rem 0 !important;
}

.bg-warning-light {
    background-color: rgba(245, 158, 11, 0.1) !important;
    color: var(--warning) !important;
    border-radius: 8px !important;
    margin: 0.5rem 0 !important;
    border: 1px solid rgba(245, 158, 11, 0.2) !important;
}

.bg-warning-inverse {
    background-color: white !important;
    color: var(--warning) !important;
    border-radius: 8px !important;
    margin: 0.5rem 0 !important;
    border: 1px solid var(--warning) !important;
}

.bg-error {
    background-color: var(--danger) !important;
    color: white !important;
    border-radius: 8px !important;
    margin: 0.5rem 0 !important;
}

.bg-error-light {
    background-color: rgba(239, 68, 68, 0.1) !important;
    color: var(--danger) !important;
    border-radius: 8px !important;
    margin: 0.5rem 0 !important;
    border: 1px solid rgba(239, 68, 68, 0.2) !important;
}

.bg-error-inverse {
    background-color: white !important;
    color: var(--danger) !important;
    border-radius: 8px !important;
    margin: 0.5rem 0 !important;
    border: 1px solid var(--danger) !important;
}

.bg-info {
    background-color: var(--info) !important;
    color: white !important;
    border-radius: 8px !important;
    margin: 0.5rem 0 !important;
}

.bg-info-light {
    background-color: rgba(80, 110, 228, 0.1) !important;
    color: var(--info) !important;
    border-radius: 8px !important;
    margin: 0.5rem 0 !important;
    border: 1px solid rgba(80, 110, 228, 0.2) !important;
}

.bg-info-inverse {
    background-color: white !important;
    color: var(--info) !important;
    border-radius: 8px !important;
    margin: 0.5rem 0 !important;
    border: 1px solid var(--info) !important;
}

.color-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
    gap: 1rem !important;
    margin-top: 1rem !important;
}

.color-swatch {
    height: 80px !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 600 !important;
    font-size: 0.8rem !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

.code-block {
    background-color: var(--neutral-100) !important;
    padding: 1rem !important;
    border-radius: 6px !important;
    font-family: monospace !important;
    margin: 1rem 0 !important;
    overflow-x: auto !important;
}

.note {
    background-color: var(--warning-light) !important;
    border-left: 4px solid var(--warning) !important;
    padding: 1rem !important;
    margin: 1.5rem 0 !important;
    border-radius: 0 6px 6px 0 !important;
}
.card {
    border: 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
}

.card-header {
    background: transparent;
    padding: 1rem 1.25rem 1rem !important;
}
.form-label {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #202c4b !important;
}

.form-control,
.form-select {
    border-color: #e9edf4 !important;
    color: #202c4b !important;
    background-color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    border-radius: 5px !important;
    padding: 0.5rem 0.625rem !important;
    height: 38px !important;
    transition: all 0.5s !important;
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--neutral-200) !important;
    color: var(--neutral-900) !important;
}

.dropdown-menu {
    font-size: 14px !important;
}

/* Sidebar Base */
.sidebar-menu ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.submenu,
.sidebar-menu .nav-item {
    margin: 0.3rem 0.7rem !important;
    padding: 0.5rem 0.7rem !important;
}

.sidebar-menu ul li a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    text-decoration: none !important;
    color: #333 !important;
    border-radius: 6px !important;
    transition: all 0.3s ease !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
}
.list-style {
    list-style: disc !important;
    padding-left: 3rem !important;
}

.list-style li a {
    padding: 10px 15px 0px 0 !important;
}

li.submenu.open {
    background: var(--primary) !important;
    color: #fff !important;
    border-radius: 0.5rem !important;
}

li.submenu.open a {
    color: #fff !important;
}

li.submenu.open .nav-link {
    margin-bottom: 1rem !important;
}

.sidebar-menu .nav-item:hover,
.sidebar-menu .nav-item.active,
.sidebar-menu .nav-item:hover a,
.sidebar-menu .nav-item.active a {
    background: var(--primary) !important;
    color: #fff !important;
}

/* Submenu hidden by default */
.sidebar-menu ul li ul {
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height 0.3s ease !important;
    padding-left: 15px !important;
}

.sidebar-menu ul li.open > ul {
    max-height: 500px !important;
    /* large enough to fit submenu */
}

/* Arrow rotation */
.menu-arrow {
    display: inline-block !important;
    transition: transform 0.3s ease !important;
}

.sidebar-menu li.open > a .menu-arrow {
    transform: rotate(90deg) !important;
}

/* Collapsed sidebar (optional) */
.sidebar-collapsed {
    width: 70px !important;
}

.sidebar-collapsed .submenu ul {
    display: none !important;
}

thead {
    background: var(--primary) !important;
    color: #fff !important;
}
.border-light-primary {
    border: 1px solid var(--super-light-primary) !important;
}
.select2-container--default
    .select2-selection--multiple
    .select2-selection__choice:nth-child(1) {
    background-color: var(--primary-50);
    color: var(--primary-700);
    border: 1px solid var(--primary-200);
}

.select2-container--default
    .select2-selection--multiple
    .select2-selection__choice:nth-child(2) {
    background-color: rgba(16, 185, 129, 0.1);
    color: var(--success);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.select2-container--default
    .select2-selection--multiple
    .select2-selection__choice:nth-child(3) {
    background-color: rgba(245, 158, 11, 0.1);
    color: var(--warning);
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.select2-container--default
    .select2-selection--multiple
    .select2-selection__choice:nth-child(4) {
    background-color: rgba(239, 68, 68, 0.1);
    color: var(--error);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.select2-container--default
    .select2-selection--multiple
    .select2-selection__choice:nth-child(5) {
    background-color: rgba(99, 102, 241, 0.1);
    color: var(--info);
    border: 1px solid rgba(99, 102, 241, 0.3);
}

.select2-container--default
    .select2-selection--multiple
    .select2-selection__choice:nth-child(6) {
    background-color: rgba(168, 85, 247, 0.1);
    color: var(--purple);
    border: 1px solid rgba(168, 85, 247, 0.3);
}

.select2-container--default
    .select2-selection--multiple
    .select2-selection__choice:nth-child(7) {
    background-color: rgba(236, 72, 153, 0.1);
    color: var(--pink);
    border: 1px solid rgba(236, 72, 153, 0.3);
}

.select2-container--default
    .select2-selection--multiple
    .select2-selection__choice:nth-child(8) {
    background-color: rgba(6, 182, 212, 0.1);
    color: var(--cyan);
    border: 1px solid rgba(6, 182, 212, 0.3);
}

.select2-container--default
    .select2-selection--multiple
    .select2-selection__choice:nth-child(9) {
    background-color: rgba(120, 53, 15, 0.1);
    color: var(--brown);
    border: 1px solid rgba(120, 53, 15, 0.3);
}

.select2-container--default
    .select2-selection--multiple
    .select2-selection__choice:nth-child(10) {
    background-color: rgba(107, 114, 128, 0.1);
    color: var(--gray);
    border: 1px solid rgba(107, 114, 128, 0.3);
}
.form-control[readonly] {
    background-color: #cecbcb !important;
    border-color: #e9ecef;
    color: #6c757d;
    cursor: not-allowed;
    opacity: 0.8;
}
.border {
    border-color: var(--neutral-500) !important;
}
.btn.active {
    background: var(--primary) !important;
    color: #fff !important;
}