/*:root {
    --primary-blue: #44BDED;  اللون الجديد 
    --text-color: #333;
    --background-light: #EAF9FF;  خلفية فاتحة متناسقة مع الأزرق الجديد 
    --background-dark: #F5F5F5;  لون الخلفية الداكن 
    --bs-info: #123666!important;
    --bs-info-rgb: 18, 54, 102!important;
    --bs-info-color: #FBFDFE!important;
    --bs-primary: #007bff;  Original primary color 
    --bs-primary-rgb: 0, 123, 255;  Original RGB values 

     Change to your desired primary color 
    --bs-primary: #5B7FCB!important;  Example: Orange 
    --bs-primary-rgb: 91, 127, 103!important;  Corresponding RGB values 
    --esam-card-variant-bg : #C9E7FF!important;
    --esam-card-variant-color :#182947!important;
}*/

.card[class*="card-"]:not(.card-outline)>.card-header,
.card[class*="text-bg-"]:not(.card-outline)>.card-header {
    color: var(--esam-card-variant-color) !important;
    background-color: var(--esam-card-variant-bg) !important;
}

.opacity-10 {
    opacity: 0.1;
}

.text-amber-500 {
    --tw-text-opacity: 1;
    color: rgb(245 158 11 / var(--tw-text-opacity, 1));
}

.text-amber-400 {
    --tw-text-opacity: 1;
    color: rgb(251 191 36 / var(--tw-text-opacity, 1));
}

.text-teal-500 {
    --tw-text-opacity: 1;
    color: rgb(20 184 166 / var(--tw-text-opacity, 1));
}

.text-teal-400 {
    --tw-text-opacity: 1;
    color: rgb(45 212 191 / var(--tw-text-opacity, 1));
}

.text-indigo-500 {
    --tw-text-opacity: 1;
    color: rgb(99 102 241 / var(--tw-text-opacity, 1));
}

.text-indigo-400 {
    --tw-text-opacity: 1;
    color: rgb(129 140 248 / var(--tw-text-opacity, 1));
}

.text-slate-400 {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}


.text-amber-700 {
    --tw-text-opacity: 1;
    color: rgb(180 83 9 / var(--tw-text-opacity, 1));
}

.text-teal-700 {
    --tw-text-opacity: 1;
    color: rgb(15 118 110 / var(--tw-text-opacity, 1));
}

.text-indigo-700 {
    --tw-text-opacity: 1;
    color: rgb(67 56 202 / var(--tw-text-opacity, 1));
}

.text-slate-700 {
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}

.bg-amber-100 {
    background-color: rgb(245 158 11 / 0.2);
}

.bg-teal-100 {
    background-color: rgb(20 184 166 / 0.2);
}

.bg-indigo-100 {
    background-color: rgb(99 102 241 / 0.2);
}

.bg-slate-100 {
    background-color: rgb(148 163 184 / 0.2);
}






body {
    font-family: Tahoma, Verdana;
    font-size: 14px;
    color: #292B2A;
}

.bigger-icon {
    transform: scale(1.5);
    /* Adjust the scale factor as needed */
}

/* Method 2: Using font-size (for icon fonts only) */
.bigger-icon-fs {
    font-size: 1.5rem;
    /* Adjust the font size as needed (e.g., 2rem, 24px) */
}

/* Method 3: Using font-size with specific units */
.bigger-icon-px {
    font-size: 18px !important;
    /* Adjust the font size as needed */
}


.borderless td,
.borderless th {
    border: none;
}

.FailBG {
    background-color: #FF0000 !important;
    color: #FFFFFF !important;
}

.SuccessBG {
    background-color: #12AD16 !important;
    color: #FFFFFF !important;
}

.GRepTDHL {
    border-bottom: 1px solid #000000 !important;
}

.RepTH3 {
    border: 1px solid #C1C2C4 !important;
}

.RepTD2 {
    border: 1px solid #C1C2C4 !important;
}

.Ass8TD0 {
    background-color: #FFFFFF;
    border-bottom: 1px solid #333333;
}

.Ass8TD1 {
    background-color: #C00000 !important;
    border-bottom: 1px solid #333333;
    color: #FFFFFF !important;
}

.Ass8TD2 {
    background-color: #FFC000 !important;
    border-bottom: 1px solid #333333;
    color: #000000 !important;
}

.Ass8TD3 {
    background-color: #00B050 !important;
    border-bottom: 1px solid #333333;
    color: #000000 !important;
}

.Ass8TD4 {
    background-color: #0070C0 !important;
    border-bottom: 1px solid #333333;
    color: #FFFFFF !important;
}

.stacked-icons {
    position: relative;
    /* Establish positioning context */
    display: inline-block;
    /* Prevent icons from taking full width */
    width: 1.5em;
    /* Adjust width as needed */
    height: 1.5em;
    /* Adjust height as needed */
}

.stacked-icons i {
    position: absolute;
    /* Position icons absolutely */
    left: 0;
    width: 100%;
    text-align: center;
    /* Center icons horizontally */
}

.stacked-icons .top-icon {
    top: 0;
    left: -10px;
    font-size: 12px !important;
}

.stacked-icons .top-icon2 {
    top: -5px;
    left: +10px;
    font-size: 10px !important;
}

.stacked-icons .bottom-icon {
    bottom: 0;
}

.nav-link p {
    display: inline;
    /* allows the text to stay on the same line*/
    margin-left: 1.7em;
    /* space between icons and text */
}

.form-check-input[type=checkbox] {
    border-radius: .25em;
    border-color: var(--bs-primary);
}



.btn-tool {
    border-radius: 30px;
    background-color: #f8f9fa;
    border: 1px solid #ddd;
    color: var(--bs-primary-text-emphasis);
    font-size: 18px;
    text-align: center;
    font-weight: 100;
}

.btn-toolIn {
    border-radius: 10px;
    background-color: #f8f9fa;
    border: 1px solid #ddd;
    color: var(--bs-primary-text-emphasis);
    font-size: 13px;
    text-align: center;
    font-weight: 100;
}

.btn-toolIn:hover {
    color: var(--bs-btn-hover-color);
    background-color: #c9c9c9;
    border-color: var(--bs-btn-hover-border-color);
}

.btn-app {
    border-radius: 30px;
    background-color: #f8f9fa;
    border: 1px solid #ddd;
    color: var(--bs-primary-text-emphasis);
    font-size: 18px;
    height: 100px;
    margin: 10px;
    min-width: 100px;
    padding: 15px;
    position: relative;
    text-align: center;
}

.btn-app-250 {
    height: 120px;

    min-width: 240px;
}

.btn-app-200 {
    height: 120px;

    min-width: 200px;
}

.btn-app>.bi {
    display: block;
    font-size: 30px;
}



.btn-app:hover {
    background-color: #f8f9fa;
    border-color: var(--bs-link-color);
    color: var(--bs-link-color);
}

.btn-app:active,
.btn-app:focus {
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}



.my-header-class {
    border: 1px solid #ff0000;
}

label:not(.form-check-label):not(.custom-file-label) {
    font-weight: 700;
    /*    margin-top: 10px;*/
}

.highlight-row {
    --bs-bg-opacity: 1;
    background-color: #FF0000 !important;
}


.bgDone td {
    color: #000000 !important;
    background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important;
    --bs-bg-opacity: .1 !important;
}

.bgNotAllowed td {
    color: #000000 !important;
    background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity)) !important;
    --bs-bg-opacity: .1 !important;
}

.bgStart td {
    color: #000000 !important;
    background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
    --bs-bg-opacity: .1 !important;
}

.Just-icon-button {
    padding: 0;
    font-size: 1rem;
    /* Adjust icon size as needed */
    line-height: 0.8;
    /* Adjust line-height to remove extra space */

}

.Just-icon-button-3 {
    padding: 0;
    font-size: 3rem;
    /* Adjust icon size as needed */
    line-height: 0.8;
    /* Adjust line-height to remove extra space */

}

.card-primary,
.bg-primary,
.text-bg-primary {
    --lte-card-variant-bg: #5B7FCB;
    --lte-card-variant-bg-rgb: 91, 127, 103;
    --lte-card-variant-color: #fff;
    --lte-card-variant-color-rgb: 255, 255, 255;
}

.bg-light-gray {
    border-radius: 20px;
    background-color: #f8f9fa;
    border: 1px solid #ddd;
}

#jsGrid,
#jsGrid * {
    font-size: 15px;
    /* Adjust the size as needed */
}

.sidebar-wrapper .nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    max-width: 1.5rem;
    font-size: 1.1rem;
}

.user-panel .image {
    display: inline-block;
}

.user-panel {
    transition: margin-left .3s linear, opacity .3s ease, visibility .3s ease;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    border-bottom: 1px solid var(--bs-border-color);
}

.d-block {
    display: block !important;
    text-decoration: none;
    background-color: transparent;
}

.user-panel .info {
    display: inline-block;
    padding: 5px 5px 5px 20px;
    overflow: hidden;
    white-space: nowrap;
}

.bg-success-subtle {
    background-color: #005493 !important;
    color: #fff;

}

.flag-icon {
    background-size: cover;
    /* Adjust as needed (cover, contain, etc.) */
    background-repeat: no-repeat;
    color: white;
    /* Adjust text color for visibility */
    border: none;
    /* Remove default button border if needed */
    padding: 10px 10px;
    /* Adjust padding as needed */
    width: 2em;
    height: 1.33333333em;
    border: 1px solid var(--bs-gray-600);

}

.flag-icon-en {
    background-image: url(us.svg);
}

.flag-icon-sa {
    background-image: url(sa.svg);
}

.form-check-input[type="checkbox"]:checked {
    box-shadow: 0 0 0 0.25rem rgba(0, 0, 255, 0.25) !important;

}

.form-red-input[type="checkbox"]:checked {
    background-color: red !important;
    border-color: red !important;

}

.form-red-input[type="checkbox"] {
    border-color: red !important;
    box-shadow: 0 0 0 0.25rem rgba(255, 0, 0, 0.25) !important;

}

.form-red-input[type="checkbox"]:focus {
    border-color: red !important;
    box-shadow: 0 0 0 0.25rem rgba(255, 0, 0, 0.25) !important;
}

.form-success-input[type="checkbox"]:checked {
    background-color: darkgreen !important;
    border-color: rgba(0, 100, 0, 0.25) !important;

}

.form-success-input[type="checkbox"] {
    border-color: darkgreen !important;
    box-shadow: 0 0 0 0.25rem rgba(0, 100, 0, 0.25) !important;

}

.form-success-input[type="checkbox"]:focus {
    border-color: darkgreen !important;
    box-shadow: 0 0 0 0.25rem rgba(0, 100, 0, 0.25) !important;
}


/* Or if the carousel has a specific class */
.my-custom-carousel .carousel-indicators {
    /* Replace my-custom-carousel with your carousel's class */
    display: block;
    /* Or any other display value */
}


.dropdown-menu-lg .dropdown-item {
    padding: 0.5rem 1rem;
}

.dropdown-item {
    display: block;
    width: 100%;
    padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
    clear: both;
    font-weight: 400;
    color: var(--bs-dropdown-link-color);
    text-align: inherit;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    border-radius: var(--bs-dropdown-item-border-radius, 0);
}

.float-right {
    float: right !important;
}

.float-left {
    float: left !important;
}

.dropdown-footer,
.dropdown-header {
    text-align: center !important;
}

.dropdown-menu {
    padding: 0 0;
}

.unread {
    font-weight: bold;
    background-color: #f8f9fa;
}

.dropdown-menu-lg {
    min-width: 300px;
    max-width: 400px;
    padding: 0;
}

.brand-text {
    white-space: normal !important;
    word-wrap: break-word;
    overflow: hidden;
    display: block;
    text-align: center;
    /* Optional */
    font-size: 15px;
}

.profile-user-img {
    border: 3px solid #adb5bd;
    margin: 0 auto;
    padding: 3px;
    width: 150px;
}

.profile-username {
    font-size: 21px;
    margin-top: 5px;
}

.profile-user-block {
    transition: background-color 0.3s ease;
}

.list-group-item-action:hover,
.profile-user-block:hover {
    background-color: #CFE2FF;
}

.list-group-item-action {
    border: 0px !important;
}

.bigger-icon-js {
    font-size: 20px !important;
    /* Adjust the font size as needed */
}

.clsBody02,
.clsBody05 {
    vertical-align: middle;
}

.form-checkV {
    display: table-cell;
    /* Treat the div as a table cell */
    vertical-align: middle;
    /* Vertically aligns the content within the cell */
    /* You might also need to ensure its parent is display: table */
    height: 100%;
    /* Again, the element needs a defined height */

}

.hoverable-list-item {
    transition: background-color 0.3s ease, transform 0.2s ease;
    /* Smooth transition for hover */
    cursor: pointer;
    /* Indicates it's interactive */
}

.hoverable-list-item:hover {
    background-color: #CFE2FF !important;
    /* Light grey background on hover (Bootstrap's `light` color) */
    /* You could also use a different shade or a custom color */
    /* background-color: rgba(0, 123, 255, 0.1); /* A subtle blue tint */

    /* Optional: Add a subtle lift effect */
    /*     transform: translateY(-2px); */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.btn-app-index {
    border-radius: 3px;
    background-color: #f8f9fa;
    border: 1px solid #ddd;
    color: #6c757d;
    font-size: 12px;
    height: 120px;
    margin: 0 0 10px 10px;
    min-width: 120px;
    max-width: 120px;
    position: relative;
    text-align: center;
    display: flex;
    /* Enables flex container */
    flex-direction: column;
    /* Stacks children vertically (icon above text) */
    justify-content: center;
    /* Centers content vertically */
    align-items: center;
    /* Centers content horizontally (if flex-direction is column) */
}

.btn-app-index>.fa,
.btn-app-index>.fab,
.btn-app-index>.fad,
.btn-app-index>.fal,
.btn-app-index>.far,
.btn-app-index>.fas,
.btn-app-index>.ion,
.btn-app-index>.svg-inline--fa {
    display: block;
    font-size: 20px;
}



.cardItems {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    text-decoration: none;
    color: #333;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: block;
    position: relative;
}

element {}

.text-center {
    text-align: center !important;

}

.grid_index {
    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));

    gap: 20px;

    display: grid;

}

.cardItems i {
    font-size: 4em;
    /*  color: #4080C0;*/
    margin-bottom: 10px;
    transition: transform 0.3s ease;
}

.cardItems h4 {
    margin: 10px 0;
    font-size: 1.2em;
}

.cardItems:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}


.card-icon-2 {
    color: #007bff;
}

/* Blue */
.card-icon-3 {
    color: #28a745;
}

/* Green */
.card-icon-5 {
    color: #ffc107;
}

/* Yellow/Orange */
.card-icon-6 {
    color: #dc3545;
}

/* Red */
.card-icon-7 {
    color: #6f42c1;
}

/* Purple */
.card-icon-8 {
    color: #17a2b8;
}

/* Cyan */
.card-icon-9 {
    color: #fd7e14;
}

/* Orange */
.card-icon-11 {
    color: #e83e8c;
}

/* Pink */
.card-icon-12 {
    color: #20c997;
}

/* Teal */
.card-icon-15 {
    color: #6610f2;
}

/* Indigo */
.card-icon-16 {
    color: #6c757d;
}

/* Gray */
.card-icon-18 {
    color: #00bcd4;
}

/* Light Blue */
.card-icon-19 {
    color: #795548;
}

/* Brown */
.card-icon-20 {
    color: #3f51b5;
}

/* Dark Blue */
.card-icon-21 {
    color: #cddc39;
}

/* Lime Green */
.card-icon-22 {
    color: #9c27b0;
}

/* Deep Purple */
.card-icon-23 {
    color: #ff9800;
}

/* Amber */
.card-icon-24 {
    color: #4caf50;
}

/* Light Green */
.card-icon-25 {
    color: #03a9f4;
}

/* Lighter Blue */

.nav-link-header {
    color: #FBFDFE !important;
}

.password-strength-meter {
    height: 10px;
    /* Height of the bar */
    background-color: #e0e0e0;
    /* Default background */
    border-radius: 5px;
    margin-top: 5px;
    overflow: hidden;
    /* Ensure the bar stays within bounds */
}

.password-strength-bar {
    height: 100%;
    width: 0%;
    /* Initial width */
    transition: width 0.3s ease-in-out, background-color 0.3s ease-in-out;
    /* Smooth transitions */
    border-radius: 5px;
}

/* Strength Levels Colors */
.strength-weak {
    background-color: #dc3545;
    /* Red */
}

.strength-medium {
    background-color: #ffc107;
    /* Orange */
}

.strength-strong {
    background-color: #28a745;
    /* Green */
}

.strength-very-strong {
    background-color: #1a7e32;
    /* Darker Green */
}

.password-strength-text {
    font-size: 0.85em;
    margin-top: 5px;
    color: #6c757d;
}

.text-weak {
    color: #dc3545;
}

.text-medium {
    color: #ffc107;
}

.text-strong {
    color: #28a745;
}

.text-very-strong {
    color: #1a7e32;
}

.user-profile-panel {
    position: fixed;

}

.highlight {
    background-color: yellow;
    font-weight: bold;
}

.card-title {

    margin-bottom: 0px !important;

}

#loadingOverlay {
    position: fixed;
    /* Fixes it to the viewport */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* Semi-transparent black background for dimming */
    display: flex;
    /* Use flexbox for easy centering */
    justify-content: center;
    /* Center content horizontally */
    align-items: center;
    /* Center content vertically */
    flex-direction: column;
    /* Stack spinner and text vertically */
    z-index: 9999;
    /* Ensure it's on top of other elements */
    color: white;
    /* Color for the "Generating PDF..." text */
    /* Optional: Add a transition for a smoother fade-in/out */
    transition: opacity 0.3s ease-in-out;
}

/* Make sure the Bootstrap spinner has visible color */
#loadingOverlay .spinner-border {
    color: var(--bs-primary) !important;
    /* Ensures the spinner is primary color, adjust if needed */
}

/* ===== Shared Cards & Avatars (extracted) ===== */
.company-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 1.25rem;
    padding: 1.25rem;
    color: #0f172a;
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
    transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease, background 220ms ease;
    min-height: 240px;
}

.company-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
    border-color: #cbd5e1;
    background: #ffffff;
}

.company-logo-bg {
    position: absolute;
    right: -24px;
    bottom: -24px;
    width: 140px;
    height: 140px;
    opacity: 0.08;
    filter: grayscale(1);
    object-fit: contain;
    pointer-events: none;
    border-radius: 50%;
}

.company-chip {
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    background: #e0e7ff;
    color: #4338ca;
    border: 1px solid #c7d2fe;
}

.company-name {
    font-weight: 800;
    font-size: 1.1rem;
}

.company-website {
    color: #475569;
    font-size: 0.9rem;
}

.company-meta {
    color: #334155;
}

.company-actions button {
    border-radius: 0.75rem;
    border: 1px solid #e2e8f0;
    background: #f1f5f9;
    color: #0f172a;
    padding: 0.45rem 0.6rem;
    transition: all 180ms ease;
}

.company-actions button:hover {
    border-color: #cbd5e1;
    background: #e2e8f0;
}

.status-chip {
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    border: 1px solid #e2e8f0;
    background: #e2e8f0;
    color: #334155;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
}

.status-chip.active {
    background: #dbeafe;
    color: #1d4ed8;
    border-color: #bfdbfe;
}

.status-chip.inactive {
    background: #fee2e2;
    color: #b91c1c;
    border-color: #fecaca;
}

.status-chip.acceptable {
    background: #dcfce7;
    color: #166534;
    border-color: #bbf7d0;
}

/* Action buttons variants */
.btn-view {
    background: rgba(34, 197, 94, 0.12);
    color: #166534;
    border: 1px solid rgba(34, 197, 94, 0.22);
}

.btn-view:hover {
    background: rgba(34, 197, 94, 0.2);
    color: #14532d;
}

.btn-structure {
    background: rgba(99, 102, 241, 0.12);
    color: #4338ca;
    border: 1px solid rgba(99, 102, 241, 0.22);
}

.btn-structure:hover {
    background: rgba(99, 102, 241, 0.2);
    color: #312e81;
}

.btn-edit {
    background: rgba(59, 130, 246, 0.12);
    color: #1d4ed8;
    border: 1px solid rgba(59, 130, 246, 0.22);
}

.btn-edit:hover {
    background: rgba(59, 130, 246, 0.2);
    color: #1e3a8a;
}

.btn-upload {
    background: rgba(56, 189, 248, 0.12);
    color: #0ea5e9;
    border: 1px solid rgba(56, 189, 248, 0.22);
}

.btn-upload:hover {
    background: rgba(56, 189, 248, 0.2);
    color: #075985;
}

.btn-delete {
    background: rgba(244, 63, 94, 0.12);
    color: #be123c;
    border: 1px solid rgba(244, 63, 94, 0.22);
}

.btn-delete:hover {
    background: rgba(244, 63, 94, 0.2);
    color: #881337;
}

.btn-assign {
    background: rgba(59, 130, 246, 0.12);
    color: #1d4ed8;
    border: 1px solid rgba(59, 130, 246, 0.22);
}

.btn-assign:hover {
    background: rgba(59, 130, 246, 0.2);
    color: #1e3a8a;
}

/* Assessment cards */
.assessment-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.82rem;
    background: #e0e7ff;
    color: #4338ca;
    border-color: #c7d2fe;
}

.assessment-chip.done {
    background: #dcfce7;
    color: #166534;
    border-color: #bbf7d0;
}

.assessment-chip.locked {
    background: #e2e8f0;
    color: #475569;
    border-color: #cbd5e1;
}

.assessment-chip-row {
    margin-bottom: 0.6rem;
    display: flex;
    justify-content: flex-end;
}

.assessment-icon {
    width: 64px;
    height: 64px;
    border-radius: 10px;
    background: #e2e8f0;
    border: 1px solid #cbd5e1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.6rem;
    color: #0f172a;
    flex: 0 0 64px;
}

.assessment-title {
    font-family: "Inter", "Cairo", "Segoe UI", system-ui, -apple-system, sans-serif;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 0.35rem;
}

.assessment-desc {
    color: #334155;
    min-height: 48px;
    line-height: 1.5;
    max-height: 5em;
    overflow: hidden;
    text-overflow: ellipsis;
}

.assessment-meta {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #475569;
}

.btn-soft {
    border-radius: 0.9rem;
    border: 1px solid #e2e8f0;
    background: #f1f5f9;
    color: #0f172a;
}

.btn-soft:hover {
    border-color: #cbd5e1;
    background: #e2e8f0;
    color: #0f172a;
}

.btn-primary-gradient {
    background: linear-gradient(135deg, #2563eb, #4338ca);
    border: none;
    color: #fff;

    box-shadow: 0 14px 30px rgba(37, 99, 235, 0.22);
}

.btn-primary-gradient:hover {
    filter: brightness(1.04);
    box-shadow: 0 18px 36px rgba(37, 99, 235, 0.28);
}

.rtl .assessment-card {
    direction: rtl;
    text-align: right;
}

/* User cards shared */
.user-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 1.1rem;
    padding: 1rem 1.1rem;
    color: #0f172a;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
    min-height: 140px;
    position: relative;
    overflow: hidden;
}

.user-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.12);
    border-color: #cbd5e1;
    background: #fff;
}

.avatar-main {
    width: 68px;
    height: 68px;
    border-radius: 16px;
    object-fit: cover;
    border: 2px solid #e2e8f0;
    background: #fff;
    padding: 4px;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}

.avatar-bg {
    position: absolute;
    bottom: -8px;
    right: -8px;
    width: 120px;
    height: 120px;
    opacity: 0.1;
    filter: grayscale(1);
    z-index: 0;
    pointer-events: none;
}

.avatar-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.user-name-en {
    font-weight: 800;
    color: #0f172a;
}

.user-job {
    color: #475569;
    font-size: 0.95rem;
}

.badge-basic {
    background: rgba(251, 191, 36, 0.15);
    color: #b45309;
}

.badge-adv {
    background: rgba(45, 212, 191, 0.16);
    color: #0f766e;
}

.badge-prem {
    background: rgba(99, 102, 241, 0.16);
    color: #3730a3;
}

.badge-none {
    background: #e2e8f0;
    color: #475569;
}

/* Glass panels */
.glass-panel {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(6px);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1);
}

.assessment-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 1.25rem;
    padding: 1rem;
    color: #0f172a;
    position: relative;
    overflow: hidden;
    transition: border-color 300ms ease, transform 300ms ease, box-shadow 300ms ease, background 300ms ease;
    min-height: 260px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}


.toasts-top-right,
.toasts-top-left,
.toasts-bottom-right,
.toasts-bottom-left,
.toasts-center-center,
.toasts-center,
.toasts-middle-center,
.toasts-top-center,
.toasts-bottom-center,
.toast-container {
    z-index: 2147483647 !important;
    /* أعلى قيمة عملياً */
    position: fixed !important;
}