/*
 * Custom Theme Overrides
 * - Primary color: Nafath (نفاذ) green #0a9a8f
 * - Font: Tajawal (تجوال) from Google Fonts
 * - RTL adjustments
 */

/* ===== Font: Tajawal ===== */
body,
html {
    font-family: 'Tajawal', sans-serif !important;
}

/* ===== Primary Color: Nafath Green ===== */
:root,
[data-bs-theme="light"] {
    --bs-primary: #0a9a8f;
    --bs-primary-rgb: 10, 154, 143;
    --bs-primary-active: #088278;
    --bs-primary-light: #e6f7f6;
    --bs-primary-clarity: rgba(10, 154, 143, 0.2);
    --bs-primary-inverse: #ffffff;
    --bs-component-active-bg: #0a9a8f;
    --bs-component-active-color: #ffffff;
    --bs-component-hover-bg: #e6f7f6;
    --bs-component-checked-bg: #0a9a8f;
    --bs-link-color: #0a9a8f;
    --bs-link-hover-color: #088278;
}

[data-bs-theme="dark"] {
    --bs-primary: #0dbfb2;
    --bs-primary-rgb: 13, 191, 178;
    --bs-primary-active: #0a9a8f;
    --bs-primary-light: #0f2e2c;
    --bs-primary-clarity: rgba(13, 191, 178, 0.2);
    --bs-primary-inverse: #ffffff;
    --bs-component-active-bg: #0dbfb2;
    --bs-component-active-color: #ffffff;
    --bs-component-checked-bg: #0dbfb2;
    --bs-link-color: #0dbfb2;
    --bs-link-hover-color: #0a9a8f;
}

/* Buttons */
.btn-primary {
    background-color: #0a9a8f !important;
    border-color: #0a9a8f !important;
    color: #ffffff !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    background-color: #088278 !important;
    border-color: #088278 !important;
    color: #ffffff !important;
}
.btn-light-primary {
    color: #0a9a8f !important;
    background-color: #e6f7f6 !important;
    border-color: transparent !important;
}
.btn-light-primary:hover,
.btn-light-primary:focus,
.btn-light-primary:active {
    color: #ffffff !important;
    background-color: #0a9a8f !important;
}
.btn-active-primary.active,
.btn-active-primary:active,
.btn-active-primary:hover,
.btn-active-primary:focus {
    color: #ffffff !important;
    background-color: #0a9a8f !important;
}
.btn-active-light-primary.active,
.btn-active-light-primary:active,
.btn-active-light-primary:hover,
.btn-active-light-primary:focus {
    color: #0a9a8f !important;
    background-color: #e6f7f6 !important;
}

/* Text colors */
.text-primary {
    color: #0a9a8f !important;
}
.text-hover-primary:hover {
    color: #0a9a8f !important;
}
.text-active-primary.active {
    color: #0a9a8f !important;
}

/* Background colors */
.bg-primary {
    background-color: #0a9a8f !important;
}
.bg-light-primary {
    background-color: #e6f7f6 !important;
}
.bg-hover-primary:hover {
    background-color: #0a9a8f !important;
}

/* Border colors */
.border-primary {
    border-color: #0a9a8f !important;
}

/* Badges */
.badge-primary {
    background-color: #0a9a8f !important;
    color: #ffffff !important;
}
.badge-light-primary {
    color: #0a9a8f !important;
    background-color: #e6f7f6 !important;
}

/* Links */
a {
    color: #0a9a8f;
}
a:hover {
    color: #088278;
}

/* Active menu / sidebar items */
.menu-state-bullet-primary .menu-item .menu-link.active .bullet {
    background-color: #0a9a8f !important;
}
.menu-link.active {
    color: #0a9a8f !important;
}
.menu-state-bullet-primary .menu-item .menu-link.active {
    color: #0a9a8f !important;
}

/* Pagination */
.page-item.active .page-link {
    background-color: #0a9a8f !important;
    border-color: #0a9a8f !important;
}

/* Form focus states */
.form-control:focus,
.form-select:focus {
    border-color: #0a9a8f !important;
    box-shadow: 0 0 0 0.25rem rgba(10, 154, 143, 0.25) !important;
}
.form-check-input:checked {
    background-color: #0a9a8f !important;
    border-color: #0a9a8f !important;
}

/* Scrolltop */
.scrolltop {
    background-color: #0a9a8f !important;
}

/* Progress bars */
.progress-bar {
    background-color: #0a9a8f !important;
}

/* Nav tabs active */
.nav-line-tabs .nav-item .nav-link.active,
.nav-line-tabs .nav-item .nav-link:hover {
    border-bottom-color: #0a9a8f !important;
    color: #0a9a8f !important;
}

/* ===== Request Workflow Stepper ===== */
/* Stepper links - using Metronic default RTL support */
.stepper.stepper-links .stepper-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.stepper.stepper-links .stepper-item {
    display: flex;
    align-items: center;
}

.stepper.stepper-links .stepper-item .stepper-icon {
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.stepper.stepper-links .stepper-item.current .stepper-icon {
    box-shadow: 0 0 0 4px rgba(255, 153, 0, 0.25);
}

/* Responsive Stepper */
@media (max-width: 991.98px) {
    .stepper.stepper-links .stepper-nav {
        flex-direction: column;
        align-items: flex-start;
    }

    .stepper.stepper-links .stepper-item {
        margin-bottom: 8px;
    }
}

/* ===== Card Hover Effects ===== */
.hover-elevate-up {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-elevate-up:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1.5rem 0.5rem rgba(0, 0, 0, 0.08) !important;
}

.cursor-pointer {
    cursor: pointer;
}

/* ===== Saudi Riyal Symbol (SAR) Icon ===== */
/* ===== Chat Drawer ===== */
.hover-bg-light-primary:hover {
    background-color: var(--bs-primary-light, #e6f7f6) !important;
    transition: background-color 0.2s ease;
}

#kt_drawer_chat {
    z-index: 1060;
}

.sar-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask-image: url('/img/sar-symbol.svg');
    mask-image: url('/img/sar-symbol.svg');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    vertical-align: middle;
}