/* Custom Iqraa overrides */

/* Use Almarai font like the template uses Ubuntu: override Bootstrap variables and body/headings.
   Template uses: --bs-font-sans-serif, --bs-body-font-family, body "ubuntu-regular", h1-h6 "ubuntu-medium".
   Icon fonts (Material Design Icons, themify) keep their own font-family. */
:root {
  --bs-font-sans-serif: 'Almarai', sans-serif;
  --bs-body-font-family: 'Almarai', sans-serif;
}

body {
  font-family: 'Almarai', sans-serif !important;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  font-family: 'Almarai', sans-serif !important;
}

/* Override every template font-family (ubuntu/roboto/source-sans) so all text uses Almarai */
code,
.font-weight-light,
.font-weight-bold,
.font-weight-normal,
.card-revenue-table .revenue-item .revenue-amount p,
.card-revenue .highlight-text,
.badge,
.btn,
.ajax-upload-dragdrop .ajax-file-upload,
.card .card-title,
.card .card-subtitle,
.card .card-description,
.form-select,
.icons-list > div,
.preview-list .preview-item .preview-item-content p .content-category,
.table thead th,
.CodeMirror,
.datepicker.datepicker-dropdown .datepicker-days table.table-condensed thead tr th.dow,
.datepicker.datepicker-inline .datepicker-days table.table-condensed thead tr th.dow,
.datepicker-custom .datepicker.datepicker-inline .datepicker-centuries .table-condensed thead tr th.dow,
.navbar,
.sidebar,
.sidebar .nav .nav-item.active > .nav-link .menu-title {
  font-family: 'Almarai', sans-serif !important;
}

/* Navbar search placeholders */
.navbar .navbar-menu-wrapper .search-field .input-group input::placeholder,
.navbar .navbar-menu-wrapper .search-field .input-group input::-webkit-input-placeholder,
.navbar .navbar-menu-wrapper .search-field .input-group input::-moz-placeholder,
.navbar .navbar-menu-wrapper .search-field .input-group input:-moz-placeholder,
.navbar .navbar-menu-wrapper .search-field .input-group input:-ms-input-placeholder {
  font-family: 'Almarai', sans-serif !important;
}

.navbar .navbar-brand-wrapper .navbar-brand img {
    height: 45px;
    width: unset;
}

/* Level cards – layout and spacing (logical properties for RTL/LTR) */
.level-card {
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.level-card-actions {
    position: absolute;
    inset-block-start: 0.5rem;
    inset-inline-end: 0.5rem;
}

.level-card-code {
    font-size: 1.1rem;
}

.level-card-footer-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Filter form selects – easy to override for LTR */
.filter-select-curriculum {
    width: auto;
    min-width: 160px;
}

.filter-select-program {
    width: auto;
    min-width: 180px;
}

/* ── Brand link colors ─────────────────────────────────────────────────────── */
a,
a:visited {
    color: var(--color-iqraa-primary);
}
a:hover,
a:focus {
    color: var(--color-iqraa-primary-dark);
}

/* Breadcrumb */
.breadcrumb-item a,
.breadcrumb-item a:visited {
    color: var(--color-iqraa-primary);
    text-decoration: none;
}
.breadcrumb-item a:hover {
    color: var(--color-iqraa-primary-dark);
    text-decoration: underline;
}

/* Nav tabs (profile/detail pages) */
.nav-tabs .nav-link {
    color: var(--color-iqraa-primary);
}
.nav-tabs .nav-link.active {
    color: var(--color-iqraa-primary);
    border-bottom-color: var(--color-iqraa-primary);
    font-weight: 600;
}
.nav-tabs .nav-link:hover {
    color: var(--color-iqraa-primary-dark);
    border-color: transparent;
}

/* ── Pagination ── */
.pagination .page-link {
    color: var(--color-iqraa-primary);
    border-color: #dee2e6;
}
.pagination .page-link:hover,
.pagination .page-link:focus {
    color: var(--color-iqraa-primary-dark);
    background-color: var(--color-iqraa-secondary-light);
    border-color: var(--color-iqraa-secondary);
    box-shadow: none;
}
.pagination .page-item.active .page-link {
    background-color: var(--color-iqraa-primary);
    border-color: var(--color-iqraa-primary);
    color: #fff;
}
.pagination .page-item.disabled .page-link {
    color: #adb5bd;
    border-color: #dee2e6;
}