/**
 * Elvolink — global Arabic typography (Cairo + Tajawal)
 */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800&family=Tajawal:wght@400;500;700;800&display=swap');

:root {
    --font-base: 'Cairo', 'Segoe UI', Tahoma, sans-serif;
    --font-display: 'Tajawal', 'Cairo', sans-serif;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-size-xs: 0.8125rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 0.9375rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --line-height-tight: 1.35;
    --line-height-normal: 1.55;
    --line-height-relaxed: 1.7;
    --letter-spacing-ar: 0.01em;
    --text-breadcrumb-link: var(--accent-hover, #7c7fff);
    --text-breadcrumb-active: #f0f2f7;
}

html {
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

html[dir='rtl'] {
    letter-spacing: var(--letter-spacing-ar);
}

body {
    font-family: var(--font-base) !important;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-normal);
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: var(--font-display) !important;
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    letter-spacing: 0;
}

.btn,
.card,
.navbar,
.dropdown-menu,
p,
label,
input,
select,
textarea,
td,
th,
li,
.breadcrumb,
.modal-title,
.alert,
.toast,
.form-label,
.form-control,
.form-select,
.table,
.nav-link:not(.fa):not(.ti),
a:not(.fa):not(.fas):not(.far):not(.fab):not(.ti) {
    font-family: var(--font-base) !important;
}

/* Icon fonts — never inherit Cairo */
.fa,
.fas,
.far,
.fal,
.fab,
.fa-solid,
.fa-regular,
.fa-brands,
.fa-classic,
[class^='fa-'],
[class*=' fa-'] {
    font-family: 'Font Awesome 6 Free' !important;
    font-style: normal;
    font-variant: normal;
    font-weight: 900;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.far,
.fa-regular {
    font-weight: 400 !important;
}

.fab,
.fa-brands {
    font-family: 'Font Awesome 6 Brands' !important;
    font-weight: 400 !important;
}

.ti,
[class^='ti-'],
[class*=' ti-'] {
    font-family: 'tabler-icons' !important;
    font-style: normal;
    font-weight: 400 !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Page breadcrumb (admin header trail) */
.admin-page-breadcrumb {
    margin-bottom: 1.25rem;
}

.admin-breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: var(--font-base) !important;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-tight);
}

.admin-breadcrumb-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.admin-breadcrumb-item a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-breadcrumb-link) !important;
    text-decoration: none !important;
    font-weight: var(--font-weight-medium);
    transition: color 0.2s ease, opacity 0.2s ease;
}

.admin-breadcrumb-item a:hover {
    color: color-mix(in srgb, var(--text-breadcrumb-link) 85%, #fff 15%) !important;
    opacity: 0.95;
}

.admin-breadcrumb-item a .fa,
.admin-breadcrumb-item a .fas {
    font-size: 1rem;
    color: inherit;
}

.admin-breadcrumb-separator {
    color: rgba(255, 255, 255, 0.92);
    font-weight: var(--font-weight-regular);
    user-select: none;
    padding-inline: 0.1rem;
}

.admin-breadcrumb-item--active span {
    color: var(--text-breadcrumb-active);
    font-weight: var(--font-weight-semibold);
}

/* Bootstrap breadcrumb component */
.breadcrumb {
    font-family: var(--font-base) !important;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    margin-bottom: 0.75rem;
}

.breadcrumb-item a {
    color: var(--text-breadcrumb-link) !important;
    font-weight: var(--font-weight-medium);
    text-decoration: none;
}

.breadcrumb-item.active {
    color: var(--text-breadcrumb-active) !important;
    font-weight: var(--font-weight-semibold);
}

.breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, 0.75) !important;
}

/* Tables & forms readability */
.table th {
    font-family: var(--font-display) !important;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
}

.table td {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
}

.form-label {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
}

.form-control,
.form-select,
.input-group-text {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
}

.btn {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    letter-spacing: 0;
}

.card-title,
.card-header {
    font-family: var(--font-display) !important;
    font-weight: var(--font-weight-bold);
}

/* Select2 */
.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-results__option {
    font-family: var(--font-base) !important;
    font-size: var(--font-size-sm) !important;
}

html.light-style {
    --text-breadcrumb-link: var(--accent-primary, #6366f1);
    --text-breadcrumb-active: #566a7f;
}

html.light-style .admin-breadcrumb-separator {
    color: #a1acb8;
}

html.light-style .breadcrumb-item + .breadcrumb-item::before {
    color: #a1acb8 !important;
}