:root {
    --primary: #00285a;
    --light: #f1f4f7;
    --dark: #1a1d20;
    --success: #27a844;
    --danger: #d93025;
    --warning: #f9a825;
    --info: #0096c7;
    --border-color: #d1d9e0;
    --btn-primary: #00285a;
    --btn-primary-hover: #003c88;
    --btn-primary-active: #001f45;
    --text-color: #1c2b33;
    --primary-link: #4a90e2;

    /* الحجم الافتراضي للنص */
    --bs-body-font-size: 1rem;
    --bs-btn-font-size-2: 1rem;
    --bs-lead-font-size: 1.25rem;
    --bs-navbar-brand-font-size-1: 1.25rem;
    
}

/* مستوى 1: كبير */
.font-large {
    --bs-body-font-size: 1.1rem;
    --bs-btn-font-size-2: 1.05rem;
    --bs-lead-font-size: 1.27rem;
    --bs-navbar-brand-font-size-1: 1.27rem;
}

/* مستوى 2: أكبر */
.font-xlarge {
    --bs-body-font-size: 1.2rem;
    --bs-btn-font-size-2: 1.1rem;
    --bs-lead-font-size: 1.29rem;
    --bs-navbar-brand-font-size-1: 1.29rem;
}

/* مستوى 3: كبير جداً */
.font-xxlarge {
    --bs-body-font-size: 1.3rem;
    --bs-btn-font-size-2: 1.15rem;
    --bs-lead-font-size: 1.31rem;
    --bs-navbar-brand-font-size-1: 1.31rem;
}



.dropdown-menu,
.dropdown-item {
    font-size: var(--bs-body-font-size) !important;
}

.btn {
    font-size: var(--bs-btn-font-size-2) !important;
}

.lead {
    font-size: var(--bs-lead-font-size) !important;
}

.navbar-brand {
    font-size: var(--bs-navbar-brand-font-size-1) !important;
}


.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active {
    background-color: var(--btn-primary-active) !important;
    color: #ffffff !important;
}

.dropdown-item .bi {
    font-size: 1.1rem;
    vertical-align: middle;
}














.loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.spinner {
    border: 4px solid #f3f3f3;
    border-top: 4px solid var(--primary);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

  
ul#normalNotificationList a, ul#importantNotificationList a {
    transition: color 0.15s ease-in-out;
    color: var(--text-color) !important;
    display: block;
}
ul#normalNotificationList li:hover, ul#importantNotificationList li:hover {
    background-color: var(--light) !important;
}

ul#normalNotificationList li:hover a, ul#importantNotificationList li:hover a {
    color: var(--primary) !important;
}

body {
    font-family: 'Tajawal', Arial, sans-serif;
}

body.in-webview .navbar {
  margin-top: 30px; /* أو padding-top حسب حاجتك */
  position: relative; /* إذا كان هناك تعارض في التراكب */
  z-index: 1000;
}

body.in-webview .modal-dialog {
  margin-top: 100px !important;
}

body,p {color: var(--text-color) !important;}

h1,h2,h3,h4,h5,h6 {color: var(--primary) !important;}

a {
    text-decoration: none;
    transition: color 0.15s ease-in-out;
}

[type=email], [type=number], [type=tel], [type=url] {
    direction: rtl;
}

.dropdown-toggle::after {
    display: none;
}

.link-container .card-title {color: var(--primary) !important;}

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

.seconde-table-link {color: var(--text-color) !important;}
.seconde-table-link:hover {color: var(--primary-link) !important; text-decoration: none !important;}

.link-container:hover .card-title, .show-all:hover, .primary-link:hover {
    text-decoration: underline;
    gap: .375rem;
    text-underline-offset: 0.25em;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    color: var(--dark);
    transition: color 0.5 ease-in-out;
}

.text-primary {color: var(--primary) !important;}
.text-light {color: var(--light) !important;}
.text-dark {color: var(--dark) !important;}
.text-success {color: var(--success) !important;}
.text-danger {color: var(--danger) !important;}
.text-warning {color: var(--warning) !important;}
.text-info {color: var(--info) !important;}

.bg-primary {background-color: var(--primary) !important;}
.bg-light {background-color: var(--light) !important;}
.bg-dark {background-color: var(--dark) !important;}
.bg-success {background-color: var(--success) !important;}
.bg-danger {background-color: var(--danger) !important;}
.bg-warning {background-color: var(--warning) !important;}
.bg-info {background-color: var(--info) !important;}

.btn-primary {
    background-color: var(--btn-primary) !important;
    border-color: var(--btn-primary) !important;
}
.btn-primary:hover {
    background-color: var(--btn-primary-hover) !important;
    border-color: var(--btn-primary-hover) !important;
}
.btn-primary:active {
    background-color: var(--btn-primary-active) !important;
    border-color: var(--btn-primary-active) !important;
}

.btn-white {
    background-color: #ffffff !important;
    border-color: var(--border-color) !important;
    color: var(--primary) !important;
}

.btn-outline-primary {
    border-color: var(--primary) !important;
    color: var(--primary) !important;
}
.btn-outline-primary:hover {
    background-color: var(--primary) !important;
    color: #ffffff !important;
}

.min-vh-90{min-height:90vh!important}
.min-vh-80{min-height:85vh!important}

.card {border-color: var(--border-color) !important;}
.card-footer {background-color: #ffffff !important;}
.card-header {background-color: var(--primary) !important; color: #ffffff !important;}
.card-header h1, .card-header p, .card-header a, .card-header button {color: #ffffff !important; border: none;}
.card-header a, .card-header button {
    color: #ffffff !important;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}
.card-header a:hover, .card-header button:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}
.card-header .dropdown a.dropdown-item {color: var(--primary) !important;}

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

.form-control, .form-select {
    background-color: var(--light) !important;
}
.form-control:focus, .form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 .25rem rgba(0, 100, 224, 0.25);
}

.pagination .page-link {color: var(--primary) !important;}
.pagination .page-link:focus {
    border-color: var(--border-color);
    box-shadow: 0 0 0 .25rem rgba(0, 100, 224, 0.25);
}

.dropdown-item:active, .dropdown-item:focus, .dropdown-item.active {
    color: var(--bs-dropdown-link-active-color);
    background-color: var(--dark);
}

.dropdown-item:hover {
    color: var(--bs-dropdown-link-active-color);
    background-color: var(--primary);
}

table.table thead tr th{
    background-color: var(--light) !important; 
    color: var(--primary) !important;
}
table.table tbody tr td{
    white-space: nowrap;
}

table.table tbody tr td a:hover {text-decoration: underline; text-underline-offset: 0.25em;}

/** NAVBAR **/
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='white' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-toggler:focus {
    box-shadow: 0 0 0 0.125rem rgba(241, 244, 247, 0.8) !important;
    border: none !important;
}
.navbar-toggler {
    border: none !important;
}

.navbar {border-bottom: 1px solid var(--border-color); background-color: var(--primary);
position: sticky;
  top: 0;
  z-index: 1035;
  transition: box-shadow 0.3s ease, background-color 0.3s ease;
}
.navbar.scrolled {
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.15);
}
.navbar-brand {
    color: white !important;
}
.navbar-brand:hover, .navbar-brand:focus {color: #ffffff;}
.navbar-nav .nav-link {
    border-radius: 0.375rem;
}
.navbar-nav .nav-link.active, .navbar-nav .nav-link.active:hover {
    color: var(--primary) !important;
    background-color: var(--light) !important;
}
.navbar-nav .nav-link:hover {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.1);
}
.navbar-nav .nav-link.show:not(.active) {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.1);
}

.navbar-nav .nav-link.show.active {
    color: var(--primary) !important;
    background-color: var(--light) !important;
}

.nav-link{color: white;}
.nav-link:hover{color: #ffffff;}
.nav-link:focus, .nav-link:hover {
    color: white;
}

@keyframes bellPulse {
0% {
    color: #ffffff;
}
50% {
    color: #d93025;
}
100% {
    color: #ffffff;
}
}
.blink {
animation: bellPulse 1s infinite ease-in-out;
}


/** login **/
.login a {color: var(--primary) !important;}
.login a:hover {
    text-decoration: underline;
    gap: .375rem;
    text-underline-offset: 0.25em;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    color: var(--dark) !important;
}












.nav-pills .nav-item .nav-link {
    padding: 0rem 0.34rem !important;
    color: var(--primary) !important;
    background-color: inherit !important;
}

.nav-pills .nav-link.active {
    text-decoration: underline;
    text-underline-offset: 0.25em;
}

.dropdown-item:active, .dropdown-item.active, .dropdown-item.active:hover {
    background-color: var(--primary) !important;
    color: #ffffff !important;
}
.dropdown-item:focus {
    background-color: #ffffff !important;
    color: var(--primary) !important;
}
.dropdown-item:hover {
    background-color: var(--light) !important;
    color: var(--text-color)
}



.modal-header {
    background-color: var(--primary) !important;
    color: #ffffff !important;
}
.modal-header .modal-title {
    color: #ffffff !important;
}
.modal-body {
    white-space: normal !important;
}



.delete-link {
    border: none;
    background-color: inherit;
    color: var(--danger) !important;
}
.delete-link:hover {
    text-decoration: underline;
    gap: .375rem;
    text-underline-offset: 0.25em;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/** footer **/
footer {border-top: 1px solid var(--border-color);}









.select2-selection__arrow, .select2-selection__clear{display: none !important;}
.select2-selection {
    background-color: var(--light) !important;
    padding: 0 !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
    color: var(--bs-body-color) !important;
    background-clip: padding-box !important;
    border: var(--bs-border-width) solid var(--bs-border-color) !important;
    border-radius: var(--bs-border-radius) !important;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !important;
}
.select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered{
    padding: 0rem .75rem !important;
}

.select2-selection--single:focus {
    /* box-shadow: none !important; */
    box-shadow: 0 0 0 0.25rem rgba(0, 100, 224, 0.25) !important;
    border-color: var(--primary) !important;
    outline: none !important;
}

.select2-dropdown ,.select2-dropdown--above{
    background-color: var(--light) !important;
    border-radius: var(--bs-border-radius) !important;
    /* box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1) !important; */
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}


.toast{
    width: 280px !important;
}

.suggestion-item:hover {
    background-color: #f8f9fa !important;
}














/* #page-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: white;
  z-index: 10000;
  overflow: hidden;
  display: none;
}

#page-loader .progress-bar {
  width: 0%;
  height: 100%;
  background-color: red;
  transition: width 0.3s ease;
} */