:root {
    /* ---------- Palette scales ---------- */
    --idr-primary-50: #faf5fb;
    --idr-primary-100: #f4e9f6;
    --idr-primary-200: #e9d3ed;
    --idr-primary-300: #d7b0de;
    --idr-primary-400: #be82c9;
    --idr-primary-500: #a25aaf;
    --idr-primary-600: #864193;
    --idr-primary-700: #6d3378;
    --idr-primary-800: #54215f;
    --idr-primary-900: #461b4f;
    --idr-primary-950: #2b0e31;

    --idr-secondary-50: #faf5ff;
    --idr-secondary-100: #f3e8ff;
    --idr-secondary-200: #e9d5ff;
    --idr-secondary-300: #d8b4fe;
    --idr-secondary-400: #c084fc;
    --idr-secondary-500: #a855f7;
    --idr-secondary-600: #9333ea;
    --idr-secondary-700: #7e22ce;
    --idr-secondary-800: #6b21a8;
    --idr-secondary-900: #581c87;
    --idr-secondary-950: #3b0764;

    --idr-tertiary-50: #fdf2f8;
    --idr-tertiary-100: #fce7f3;
    --idr-tertiary-200: #fbcfe8;
    --idr-tertiary-300: #f9a8d4;
    --idr-tertiary-400: #f472b6;
    --idr-tertiary-500: #ec4899;
    --idr-tertiary-600: #db2777;
    --idr-tertiary-700: #be185d;
    --idr-tertiary-800: #9d174d;
    --idr-tertiary-900: #831843;
    --idr-tertiary-950: #500724;

    --idr-neutral-50: #f8fafc;
    --idr-neutral-100: #f1f5f9;
    --idr-neutral-200: #e2e8f0;
    --idr-neutral-300: #cbd5e1;
    --idr-neutral-400: #94a3b8;
    --idr-neutral-500: #64748b;
    --idr-neutral-600: #475569;
    --idr-neutral-700: #334155;
    --idr-neutral-800: #1e293b;
    --idr-neutral-900: #0f172a;
    --idr-neutral-950: #020617;

    /* ---------- Semantic roles ---------- */
    --idr-primary: var(--idr-primary-800);
    --idr-primary-hover: var(--idr-primary-900);
    --idr-primary-border: var(--idr-primary-950);
    --idr-primary-shadow: rgba(84, 33, 95, 0.5);

    --idr-secondary: var(--idr-secondary-600);
    --idr-secondary-hover: var(--idr-secondary-700);
    --idr-secondary-border: var(--idr-secondary-800);
    --idr-secondary-shadow: rgba(147, 51, 234, 0.5);

    --idr-tertiary: var(--idr-tertiary-700);
    --idr-tertiary-hover: var(--idr-tertiary-800);
    --idr-tertiary-border: var(--idr-tertiary-900);
    --idr-tertiary-shadow: rgba(190, 24, 93, 0.5);

    --idr-success: #5a927b;
    --idr-success-hover: #4f816c;
    --idr-success-border: #47765f;
    --idr-success-shadow: rgba(90, 146, 123, 0.5);

    --idr-danger: #b22234;
    --idr-danger-hover: #991c2b;
    --idr-danger-border: #8a1926;
    --idr-danger-shadow: rgba(178, 34, 52, 0.5);

    --idr-warning: #f4b942;
    --idr-warning-hover: #e1aa39;
    --idr-warning-border: #d49d33;
    --idr-warning-shadow: rgba(244, 185, 66, 0.5);

    --idr-info: var(--idr-primary-600);
    --idr-info-hover: var(--idr-primary-700);
    --idr-info-border: var(--idr-primary-800);
    --idr-info-shadow: rgba(134, 65, 147, 0.5);

    --idr-light: var(--idr-primary-50);
    --idr-light-hover: var(--idr-primary-100);
    --idr-light-border: var(--idr-primary-200);
    --idr-dark: var(--idr-neutral-800);
    --idr-dark-hover: var(--idr-neutral-900);
    --idr-dark-border: var(--idr-neutral-950);
    --idr-dark-shadow: rgba(30, 41, 59, 0.5);

    --idr-text: var(--idr-neutral-700);
    --idr-text-muted: var(--idr-neutral-500);
    --idr-border: var(--idr-neutral-200);
    --idr-border-strong: var(--idr-neutral-300);
    --idr-body-bg: var(--idr-neutral-50);
    --idr-surface-hover: var(--idr-neutral-100);
    --idr-focus-ring: rgba(84, 33, 95, 0.25);
}

/************ Global ************/
.btn-primary {
    color: #fff;
    background-color: var(--idr-primary) !important;
    border-color: var(--idr-primary) !important;
    letter-spacing: 0.8px;
    font-weight: 600;
    font-size: 14px;
}

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

.btn-check:focus+.btn-primary,
.btn-primary:focus {
    color: #fff;
    background-color: var(--idr-primary-hover) !important;
    border-color: var(--idr-primary-border) !important;
    box-shadow: 0 0 0 0.15rem var(--idr-primary-shadow) !important;
}

.btn-check:active+.btn-primary,
.btn-check:checked+.btn-primary,
.btn-primary.active,
.btn-primary:active,
.show>.btn-primary.dropdown-toggle {
    color: #fff;
    background-color: var(--idr-primary-border) !important;
    border-color: var(--idr-primary-border) !important;
}

.btn-check:active+.btn-primary:focus,
.btn-check:checked+.btn-primary:focus,
.btn-primary.active:focus,
.btn-primary:active:focus,
.show>.btn-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.15rem var(--idr-primary-shadow) !important;
}

.btn-primary.disabled,
.btn-primary:disabled {
    color: #fff;
    background-color: var(--idr-primary) !important;
    border-color: var(--idr-primary) !important;
}

.btn-secondary {
    color: #fff !important;
    background-color: var(--idr-secondary) !important;
    border-color: var(--idr-secondary) !important;
}

.btn-secondary:hover {
    color: #fff !important;
    background-color: var(--idr-secondary-hover) !important;
    border-color: var(--idr-secondary-border) !important;
}

.btn-check:focus+.btn-secondary,
.btn-secondary:focus {
    color: #fff !important;
    background-color: var(--idr-secondary-hover) !important;
    border-color: var(--idr-secondary-border) !important;
    box-shadow: 0 0 0 0.15rem var(--idr-secondary-shadow) !important;
}

.btn-check:active+.btn-secondary,
.btn-check:checked+.btn-secondary,
.btn-secondary.active,
.btn-secondary:active,
.show>.btn-secondary.dropdown-toggle {
    color: #fff !important;
    background-color: var(--idr-secondary-border) !important;
    border-color: var(--idr-secondary-border) !important;
}

.btn-check:active+.btn-secondary:focus,
.btn-check:checked+.btn-secondary:focus,
.btn-secondary.active:focus,
.btn-secondary:active:focus,
.show>.btn-secondary.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.15rem var(--idr-secondary-shadow) !important;
}

.btn-secondary.disabled,
.btn-secondary:disabled {
    color: #fff !important;
    background-color: var(--idr-secondary) !important;
    border-color: var(--idr-secondary) !important;
}

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

.btn-success:hover {
    color: #fff !important;
    background-color: var(--idr-success-hover) !important;
    border-color: var(--idr-success-border) !important;
}

.btn-check:focus+.btn-success,
.btn-success:focus {
    color: #fff !important;
    background-color: var(--idr-success-hover) !important;
    border-color: var(--idr-success-border) !important;
    box-shadow: 0 0 0 0.15rem var(--idr-success-shadow) !important;
}

.btn-check:active+.btn-success,
.btn-check:checked+.btn-success,
.btn-success.active,
.btn-success:active,
.show>.btn-success.dropdown-toggle {
    color: #fff !important;
    background-color: var(--idr-success-border) !important;
    border-color: var(--idr-success-border) !important;
}

.btn-check:active+.btn-success:focus,
.btn-check:checked+.btn-success:focus,
.btn-success.active:focus,
.btn-success:active:focus,
.show>.btn-success.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.15rem var(--idr-success-shadow) !important;
}

.btn-success.disabled,
.btn-success:disabled {
    color: #fff !important;
    background-color: var(--idr-success) !important;
    border-color: var(--idr-success) !important;
}

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

.btn-danger:hover {
    color: #fff !important;
    background-color: var(--idr-danger-hover) !important;
    border-color: var(--idr-danger-border) !important;
}

.btn-check:focus+.btn-danger,
.btn-danger:focus {
    color: #fff !important;
    background-color: var(--idr-danger-hover) !important;
    border-color: var(--idr-danger-border) !important;
    box-shadow: 0 0 0 0.15rem var(--idr-danger-shadow) !important;
}

.btn-check:active+.btn-danger,
.btn-check:checked+.btn-danger,
.btn-danger.active,
.btn-danger:active,
.show>.btn-danger.dropdown-toggle {
    color: #fff !important;
    background-color: var(--idr-danger-border) !important;
    border-color: var(--idr-danger-border) !important;
}

.btn-check:active+.btn-danger:focus,
.btn-check:checked+.btn-danger:focus,
.btn-danger.active:focus,
.btn-danger:active:focus,
.show>.btn-danger.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.15rem var(--idr-danger-shadow) !important;
}

.btn-danger.disabled,
.btn-danger:disabled {
    color: #fff !important;
    background-color: var(--idr-danger) !important;
    border-color: var(--idr-danger) !important;
}

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

.btn-warning:hover {
    color: var(--idr-neutral-900) !important;
    background-color: var(--idr-warning-hover) !important;
    border-color: var(--idr-warning-border) !important;
}

.btn-check:focus+.btn-warning,
.btn-warning:focus {
    color: var(--idr-neutral-900) !important;
    background-color: var(--idr-warning-hover) !important;
    border-color: var(--idr-warning-border) !important;
    box-shadow: 0 0 0 0.15rem var(--idr-warning-shadow) !important;
}

.btn-check:active+.btn-warning,
.btn-check:checked+.btn-warning,
.btn-warning.active,
.btn-warning:active,
.show>.btn-warning.dropdown-toggle {
    color: var(--idr-neutral-900) !important;
    background-color: var(--idr-warning-border) !important;
    border-color: var(--idr-warning-border) !important;
}

.btn-check:active+.btn-warning:focus,
.btn-check:checked+.btn-warning:focus,
.btn-warning.active:focus,
.btn-warning:active:focus,
.show>.btn-warning.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.15rem var(--idr-warning-shadow) !important;
}

.btn-warning.disabled,
.btn-warning:disabled {
    color: var(--idr-neutral-900) !important;
    background-color: var(--idr-warning) !important;
    border-color: var(--idr-warning) !important;
}

.btn-info {
    color: #fff !important;
    background-color: var(--idr-info) !important;
    border-color: var(--idr-info) !important;
}

.btn-info:hover {
    color: #fff !important;
    background-color: var(--idr-info-hover) !important;
    border-color: var(--idr-info-border) !important;
}

.btn-check:focus+.btn-info,
.btn-info:focus {
    color: #fff !important;
    background-color: var(--idr-info-hover) !important;
    border-color: var(--idr-info-border) !important;
    box-shadow: 0 0 0 0.15rem var(--idr-info-shadow) !important;
}

.btn-check:active+.btn-info,
.btn-check:checked+.btn-info,
.btn-info.active,
.btn-info:active,
.show>.btn-info.dropdown-toggle {
    color: #fff !important;
    background-color: var(--idr-info-border) !important;
    border-color: var(--idr-info-border) !important;
}

.btn-check:active+.btn-info:focus,
.btn-check:checked+.btn-info:focus,
.btn-info.active:focus,
.btn-info:active:focus,
.show>.btn-info.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.15rem var(--idr-info-shadow) !important;
}

.btn-info.disabled,
.btn-info:disabled {
    color: #fff !important;
    background-color: var(--idr-info) !important;
    border-color: var(--idr-info) !important;
}

.btn-light {
    color: #000 !important;
    background-color: var(--idr-light) !important;
    border-color: var(--idr-light) !important;
}

.btn-light:hover,
.btn-light:focus,
.btn-light:active {
    background-color: var(--idr-light-hover) !important;
    border-color: var(--idr-light-border) !important;
    color: #000 !important;
}

.btn-dark {
    color: #fff !important;
    background-color: var(--idr-dark) !important;
    border-color: var(--idr-dark) !important;
}

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

.btn-dark:focus,
.btn-dark:active {
    box-shadow: 0 0 0 0.15rem var(--idr-dark-shadow) !important;
}

.bg-primary {
    background-color: var(--idr-primary) !important;
}

.bg-secondary {
    background-color: var(--idr-secondary) !important;
}

.bg-success {
    background-color: var(--idr-success) !important;
}

.bg-danger {
    background-color: var(--idr-danger) !important;
}

.bg-warning {
    background-color: var(--idr-warning) !important;
}

.bg-info {
    background-color: var(--idr-info) !important;
}

.bg-light {
    background-color: var(--idr-light) !important;
}

.bg-dark {
    background-color: var(--idr-dark) !important;
}

.bg-petscan-primary {
    background-color: var(--idr-tertiary) !important;
}

.bg-petscan-secondary {
    background-color: var(--idr-neutral-500) !important;
}

.bg-petscan-info {
    background-color: var(--idr-info) !important;
}

.bg-purple {
    background-color: var(--idr-secondary) !important;
}

.text-bg-primary {
    color: #fff !important;
    background-color: var(--idr-primary) !important;
}

.text-bg-secondary {
    color: #fff !important;
    background-color: var(--idr-secondary) !important;
}

.text-bg-success {
    color: #fff !important;
    background-color: var(--idr-success) !important;
}

.text-bg-danger {
    color: #fff !important;
    background-color: var(--idr-danger) !important;
}

.text-bg-warning {
    color: var(--idr-neutral-900) !important;
    background-color: var(--idr-warning) !important;
}

.text-bg-info {
    color: #fff !important;
    background-color: var(--idr-info) !important;
}

.text-bg-light {
    color: #000 !important;
    background-color: var(--idr-light) !important;
}

.text-bg-dark {
    color: #fff !important;
    background-color: var(--idr-dark) !important;
}

/************ Global ************/

body {
    background-color: var(--idr-body-bg) !important;
    color: var(--idr-dark) !important;
}

.badge {
    color: white;
    padding: 0.5em 0.75em;
    font-size: 0.75em;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.375rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.card {
    border: none;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    border-radius: 0.5rem;
    transition: all 0.3s ease;
}

.card-title {
    color: var(--idr-dark);
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.info-label {
    color: var(--idr-dark);
    opacity: 0.5;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.info-value {
    color: var(--idr-dark);
    font-weight: 500;
}

.table {
    margin-bottom: 0;
}

.table th {
    font-weight: 600;
    background-color: var(--idr-light);
    border-bottom: 2px solid var(--idr-border);
}

.btn {
    padding: 0.5rem 1rem;
    font-weight: 500;
    border-radius: 0.375rem;
    transition: all 0.2s ease;
}

.section-title {
    color: var(--idr-dark);
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--idr-border);
}

.modal-content {
    border: none;
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.modal-header {
    background-color: var(--idr-light);
    border-bottom: 1px solid var(--idr-border);
    border-radius: 0.5rem 0.5rem 0 0;
}

.form-control {
    border-radius: 0.375rem;
    border: 1px solid var(--idr-border-strong);
    padding: 0.5rem 0.75rem;
}

.form-control:focus {
    border-color: var(--idr-primary-400);
    box-shadow: 0 0 0 0.25rem var(--idr-focus-ring);
}

.notification-item {
    display: block;
    width: 100%;
    text-align: left;
    transition: background-color 0.8s ease;
}

.notification-item:hover {
    background-color: var(--idr-surface-hover);
}

.notification-unread {
    background-color: var(--idr-primary-100) !important;
    /* unread */
    transition: background-color 0.8s ease;
    width: 100%;
}

.notification-read {
    background-color: var(--idr-neutral-50) !important;
    /* read */
    transition: background-color 0.8s ease;
    width: 100%;
}

.footer {
    background-color: var(--idr-primary-100) !important;
}

.select2-container--default .select2-selection--multiple {
    border: 1px solid var(--idr-border-strong) !important;
    border-radius: 0.375rem !important;
    min-height: 45px !important;
    padding: 2px 5px !important;
    background-color: #fff !important;
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--idr-primary-400) !important;
    box-shadow: 0 0 0 0.25rem var(--idr-focus-ring) !important;
    outline: 0 !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--idr-primary) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 20px !important;
    padding: 0 12px 0 28px !important;
    margin-top: 7px !important;
    margin-right: 5px !important;
    position: relative !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    height: 26px !important;
    line-height: 26px !important;
    display: inline-flex !important;
    align-items: center !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #fff !important;
    border: none !important;
    position: absolute !important;
    left: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin-right: 0 !important;
    font-weight: bold !important;
    font-size: 14px !important;
    transition: opacity 0.2s ease !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    background-color: transparent !important;
    color: #fff !important;
    opacity: 0.6 !important;
}

.select2-container--default .select2-search--inline .select2-search__field {
    margin-top: 5px !important;
    font-family: inherit !important;
    color: var(--idr-dark) !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__placeholder {
    color: var(--idr-text-muted) !important;
    margin-top: 6px !important;
    display: inline-block !important;
}

/* ---------- Sidebar (primary) ---------- */
/* body[data-sidebar="colored"] .vertical-menu,
body[data-sidebar="colored"] .navbar-brand-box {
    background-color: var(--idr-primary);
} */
/* 
body[data-sidebar="colored"] .orevan-logo img {
    filter: brightness(0) invert(1);
    opacity: 0.85;
} */

/* ---------- Topbar (primary) ---------- */
body[data-topbar="dark"] #page-topbar {
    background-color: var(--idr-primary);
}

/* ---------- Sidebar text ---------- */
/* body[data-sidebar="colored"] #sidebar-menu ul li a,
body[data-sidebar="colored"] #sidebar-menu ul li a i,
body[data-sidebar="colored"] #sidebar-menu ul li a:hover,
body[data-sidebar="colored"] #sidebar-menu ul li a:hover i,
body[data-sidebar="colored"] #sidebar-menu ul li ul.sub-menu li a,
body[data-sidebar="colored"] #sidebar-menu ul li.menu-title {
    color: #fff;
} */