:root {
    --idr-primary: #4B186C;
    --idr-primary-hover: #3f145d;
    --idr-primary-border: #3a1355;
    --idr-primary-shadow: rgba(75, 24, 108, 0.5);

    --idr-secondary: #871651;
    --idr-secondary-hover: #741247;
    --idr-secondary-border: #6a1141;
    --idr-secondary-shadow: rgba(135, 22, 81, 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: #5C6BC0;
    --idr-info-hover: #4f5dad;
    --idr-info-border: #4957a0;
    --idr-info-shadow: rgba(92, 107, 192, 0.5);

    --idr-light: #F8F4F9;
    --idr-dark: #2B1B32;
}

/************ 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: #212529 !important;
    background-color: var(--idr-warning) !important;
    border-color: var(--idr-warning) !important;
}

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

.btn-check:focus+.btn-warning,
.btn-warning:focus {
    color: #212529 !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: #212529 !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: #212529 !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: #ece7ef !important;
    border-color: #e2dce6 !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: #231628 !important;
    border-color: #1e1223 !important;
}

.btn-dark:focus,
.btn-dark:active {
    box-shadow: 0 0 0 0.15rem rgba(43, 27, 50, 0.5) !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;
}

.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: #212529 !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-light) !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 #dee2e6;
}

.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 #e9ecef;
}

.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 #dee2e6;
    border-radius: 0.5rem 0.5rem 0 0;
}

.form-control {
    border-radius: 0.375rem;
    border: 1px solid #ced4da;
    padding: 0.5rem 0.75rem;
}

.form-control:focus {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
.notification-item {
    display: block;
    width: 100%;
    text-align: left;
    transition: background-color 0.8s ease;
}

.notification-item:hover {
    background-color: #f8f9fa; /* Light background color */
}
.notification-unread {
    background-color: #d1e7ff !important; /* Stronger blue for unread */
    transition: background-color 0.8s ease;
    width: 100%;
}

.notification-read {
    background-color: #f8f9fa !important; /* Darker gray for read */
    transition: background-color 0.8s ease;
    width: 100%;
}

.footer{
    background-color: #ECE4F1 !important;
}