@font-face {
    font-family: 'Noto Kufi Arabic';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../lib/fonts/NotoKufiArabic-Variable.ttf') format('truetype');
}

:root {
    /* Branding Color: User Preferred Blue */
    --bs-primary: #004185;
    --bs-primary-rgb: 0, 65, 133;

    /* Link Colors */
    --bs-link-color: #004185;
    --bs-link-hover-color: #003366;
}

/* Backgrounds & Text */
.bg-primary {
    background-color: var(--bs-primary) !important;
}

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

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

/* Button Overrides */
.btn-primary {
    --bs-btn-bg: #004185;
    --bs-btn-border-color: #004185;
    --bs-btn-hover-bg: #003366;
    --bs-btn-hover-border-color: #003366;
    --bs-btn-active-bg: #003366;
    --bs-btn-active-border-color: #003366;
    --bs-btn-disabled-bg: #004185;
    --bs-btn-disabled-border-color: #004185;
    box-shadow: 0 4px 6px -1px rgba(var(--bs-primary-rgb), 0.5), 0 2px 4px -1px rgba(var(--bs-primary-rgb), 0.3);
}

.btn-outline-primary {
    --bs-btn-color: #004185;
    --bs-btn-border-color: #004185;
    --bs-btn-hover-bg: #004185;
    --bs-btn-hover-border-color: #004185;
    --bs-btn-active-bg: #004185;
    --bs-btn-active-border-color: #004185;
    --bs-btn-disabled-color: #004185;
    --bs-btn-disabled-border-color: #004185;
}

/* Pagination Overrides */
/* ... existing content ... */

/* Utility: Rotate 180 deg */
.rotate-180 {
    transform: translateY(-50%) rotate(180deg) !important;
    transition: transform 0.2s ease;
}

/* Fix input group icon spacing */
.input-group-text {
    padding-inline: 12px !important;
}

.input-group-text i {
    margin: 0 2px;
}

/* Ensure original state has transition too */
.hgi-arrow-down-01 {
    transition: transform 0.2s ease;
}

.pagination {
    --bs-pagination-active-bg: var(--bs-primary);
    --bs-pagination-active-border-color: var(--bs-primary);
    --bs-pagination-color: var(--bs-primary);
    --bs-pagination-hover-color: #003366;
    --bs-pagination-focus-color: #003366;
}

.page-item.active .page-link {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: white !important;
}

.page-item.active .page-link:hover {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: white !important;
}

.page-link {
    color: var(--bs-primary);
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    /* Remove default padding to ensure centering */
    border-radius: 6px !important;
}

.page-link:hover {
    color: #003366;
}

/* Focus Rings */
.btn-check:focus+.btn-primary,
.btn-primary:focus {
    background-color: #003366;
    border-color: #003366;
    box-shadow: 0 0 0 0.25rem rgba(0, 65, 133, 0.5);
}

/* Custom Pill Buttons for Tabs */
.nav-pills .nav-link {
    background-color: #e9ecef;
    /* Inactive: Light Gray */
    color: #495057;
    /* Inactive: Gray Text */
    border-radius: 6px;
    margin: 0 4px;
    transition: all 0.2s;
    font-size: 15px;
}

.nav-pills .nav-link:hover {
    background-color: #dee2e6;
    color: #000;
}

.nav-pills .nav-link.active,
.nav-pills .nav-link.active:hover {
    background-color: var(--bs-primary) !important;
    color: white !important;
    box-shadow: 0 4px 6px -1px rgba(var(--bs-primary-rgb), 0.5), 0 2px 4px -1px rgba(var(--bs-primary-rgb), 0.3);
}

/* Hugeicons Spin Animation */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.hgi-spin {
    animation: spin 1s linear infinite;
    display: inline-block;
}

/* Custom Icon Stroke - Font Icons */
.hgi-stroke {
    font-weight: bold !important;
}

/* Modern Input Groups (Seamless - Group Border Strategy) */
.input-group {
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    overflow: hidden;
    /* Clips children corners */
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.input-group-text {
    background-color: #fff;
    border: 0 !important;
    /* Remove all child borders */
    padding-left: 4px;
}

.input-group .form-control {
    border: 0 !important;
    /* Remove all child borders */
    box-shadow: none !important;
    /* No native focus shadow */
}

/* Fix focus ring (Tailwind Style) */
.input-group:focus-within {
    box-shadow: 0 0 0 1px var(--bs-primary);
    border-color: var(--bs-primary);
    z-index: 3;
}

.input-group .btn {
    border: 0 !important;
    background-color: #fff;
    /* Match group background */
    box-shadow: none !important;
    z-index: 2;
    /* Ensure it's clickable */
}

/* Error State */
.input-group.is-invalid {
    border-color: #dc3545 !important;
    /* Red border */
}

.input-group.is-invalid:focus-within {
    box-shadow: 0 0 0 1px #dc3545;
    border-color: #dc3545;
}

/* Standardized Form Input Focus Styles */
.form-control:focus,
.form-select:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 1px var(--bs-primary);
    outline: none;
}

/* Form Input Base Styles */
.form-control,
.form-select {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* Readonly inputs should not have any hover/focus effects that cause jitter */
/* Readonly inputs should not have any hover/focus effects that cause jitter */
.form-control[readonly] {
    transition: none;
    /* pointer-events: none; removed to allow clicks (e.g. for date pickers) */
    user-select: text;
    cursor: default;
}

/* Prevent inputs (not textareas) from capturing scroll and "jittering" */
input.form-control[readonly] {
    pointer-events: none !important;
}

/* Terms Modal - Nearly Fullscreen with margins */
#termsModal .modal-dialog {
    max-width: 800px;
    height: 90vh;
}

#termsModal .modal-content {
    height: 100%;
    display: flex;
    flex-direction: column;
}

#termsModal .modal-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#termsModal .modal-body>.bg-light {
    flex: 1;
    overflow-y: auto;
    max-height: none;
}

/* Global Font */
body {
    font-family: 'Noto Kufi Arabic', sans-serif !important;
}

/* Custom Shadow */
.custom-shadow {
    box-shadow: 18px 18px 18px 0px rgba(255, 255, 255, 0.25) !important;
}

/* Decorative Circles (Replaces welcome images) */
/* Decorative Circles (Using Pseudo-elements) */
.welcome-banner {
    position: relative;
    overflow: hidden;
}

.welcome-banner::before {
    content: '';
    position: absolute;
    border-radius: 50%;
    background-color: var(--bs-primary);
    opacity: 0.04;
    z-index: 0;
    pointer-events: none;
    width: 172px;
    height: 172px;

    /* Circle 1 Position */
    top: -100px;
    left: -80px;

    /* Circle 2 via Box Shadow (Delta X: 320px, Delta Y: 170px) */
    box-shadow: 320px 170px 0 0 var(--bs-primary);
}

/* Background Image (Replaces welcome-image-2.avif) */
.welcome-banner::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    /* RTL Start */
    bottom: 0;
    width: 60%;
    /* Limit width so it doesn't overlap text area too much */
    background-image: url('../images/welcome-image-2.png');
    background-repeat: no-repeat;
    background-position: right top;
    /* Align to right (start) top */
    background-size: auto 100%;
    /* Mimic h-100 object-fit-cover */
    opacity: 0.6;
    /* 60% opacity */
    z-index: 0;
    pointer-events: none;
}

/**
 * Tempus Dominus v6 Refinements
 * Ensure the picker itself is always LTR regardless of page direction
 */
.tempus-dominus-widget {
    direction: ltr !important;
}

/* SweetAlert Overrides */
div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm {
    background-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) !important;
}

div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm:focus {
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.5) !important;
}

/* Ensure danger buttons override the primary default if needed */
/* Ensure danger buttons override the primary default if needed */
/* Default styles for deny/cancel are sufficient, but this block is reserved for future overrides */

/* Navbar Scroll Shadow */
.navbar {
    transition: box-shadow 0.3s ease;
}

.navbar.scrolled {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Remove focus ring from buttons (except for keyboard navigation) */
.btn:focus:not(:focus-visible),
.nav-link:focus:not(:focus-visible) {
    outline: none !important;
}

/* Preserve decorative shadow on primary button focus, remove focus ring */
.btn-primary:focus:not(:focus-visible) {
    box-shadow: 0 4px 6px -1px rgba(var(--bs-primary-rgb), 0.5), 0 2px 4px -1px rgba(var(--bs-primary-rgb), 0.3) !important;
}

/* Remove focus ring shadow from other buttons */
.btn-outline-primary:focus:not(:focus-visible),
.btn-outline-secondary:focus:not(:focus-visible),
.btn-outline-success:focus:not(:focus-visible),
.btn-outline-danger:focus:not(:focus-visible),
.btn-secondary:focus:not(:focus-visible) {
    box-shadow: none !important;
}