.mzlcrm-portal.pro-theme {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 16px 20px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #444547;
}

.mzlcrm-portal-header {
    text-align: center;
    padding: 10px 0 4px;   /* تقليل المسافة العلوية والسفلية */
}

.mzlcrm-portal-logo img {
    max-height: 58px;
    width: auto;
    display: block;
    margin: 0 auto 6px;
    filter: drop-shadow(0 0 12px rgba(250, 204, 21, 0.5));
}

.mzlcrm-portal-title h2 {
    margin: 0;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6b5c3b;
}

.mzlcrm-portal-title p {
    margin: 4px 0 0;
    color: #6b5c3b;   /* كان #9ca3af */
    font-size: 13px;
}

.mzlcrm-portal-shell {
    display: flex;
    gap: 16px;
    margin-top: 22px;
    align-items: flex-start;
}

/* المنيو + الكارت يمين أو يسار حسب اللغة */
.mzlcrm-ltr-layout .mzlcrm-portal-shell {
    flex-direction: row;        /* منيو يسار – محتوى يمين */
}

.mzlcrm-rtl-layout .mzlcrm-portal-shell {
    flex-direction: row-reverse; /* منيو يمين – محتوى يسار */
}

.mzlcrm-portal-sidebar {
    background: radial-gradient(circle at top left, rgba(15,23,42,0.95), #020617);
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.6);
    padding: 14px 12px;
    box-shadow: 0 16px 28px rgba(0,0,0,0.6);
}

.mzlcrm-portal-sidebar ul {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 13px;
}

.mzlcrm-portal-sidebar li {
    margin-bottom: 4px;
}

.mzlcrm-portal-sidebar a,
.mzlcrm-portal-sidebar span {
    display: block;
    padding: 7px 9px;
    border-radius: 999px;
    color: #f9fafb;          
    text-decoration: none;
    transition: background .18s ease, color .18s ease;
}


.mzlcrm-portal-sidebar li.active a {
    background: linear-gradient(90deg, #facc15, #f97316);
    color: #7f8dad;
}
.mzlcrm-portal-sidebar li.active span,
.mzlcrm-portal-sidebar li.active a:hover {
    color: #6a7da6 !important;
}

.mzlcrm-portal-sidebar a:hover {
    background: rgba(31,41,55,0.95); /* خلفية داكنة عند المرور */
    color: #facc15; /* نص ذهبي عند المرور */
}

.mzlcrm-portal-content {
    flex: 1;
}

.mzlcrm-portal-profile-summary {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* تخصيص شكل الكرت اليميني (ملخّص المستخدم) فقط */
.mzlcrm-portal-profile-summary .mzlcrm-card {
    background: radial-gradient(circle at top left, rgba(15,23,42,0.95), #020617);
    color: #e5e7eb;   /* بدلاً من #0f2c66 */
}

.mzlcrm-portal-profile-summary .mzlcrm-card .mzlcrm-avatar-text span,
.mzlcrm-portal-profile-summary .mzlcrm-card .mzlcrm-avatar-text strong {
    color: #f9fafb;   /* بدلاً من #a6a6a6 */
}

.mzlcrm-card {
    background: radial-gradient(circle at top left, rgba(15,23,42,0.95), #020617);
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.6);
    padding: 16px 18px;
    box-shadow: 0 16px 32px rgba(0,0,0,0.7);
}

.mzlcrm-card.compact {
    padding: 12px 14px;
}

.mzlcrm-card h3 {
    margin-top: 0;
    margin-bottom: 6px;
    color: #f9fafb;
}

.mzlcrm-muted {
    color: #9ca3af;
    font-size: 13px;
    margin-top: 0;
    margin-bottom: 12px;
}

.mzlcrm-portal-form .mzlcrm-form-row {
    margin-bottom: 10px;
}

.mzlcrm-portal-form label {
    display: block;
    margin-bottom: 3px;
    font-size: 12px;
    font-weight: 500;
    color: #e5e7eb;
}

.mzlcrm-portal-form select,
.mzlcrm-portal-form input[type="text"],
.mzlcrm-portal-form input[type="email"],
.mzlcrm-portal-form input[type="file"] {
    width: 100%;
    max-width: 320px;
    padding: 6px 10px;
    border-radius: 9px;
    border: 1px solid rgba(148, 163, 184, 0.9);
    font-size: 13px;
    background: #020617;   /* بدلاً من #3b3a35 */
    color: #e5e7eb;        /* بدلاً من #bdbdbd */
}

.mzlcrm-portal-form select option {
    background: #020617;
    color: #e5e7eb;
}

.mzlcrm-portal-form input[type="file"] {
    padding: 4px 6px;
}

.mzlcrm-form-actions {
    margin-top: 10px;
}

.mzlcrm-btn-primary {
    border-radius: 999px;
    padding: 7px 18px;
    font-size: 13px;
    border: none;
    background: linear-gradient(90deg, #facc15, #f97316);
    color: #111827;
    cursor: pointer;
    font-weight: 600;
}

.mzlcrm-btn-primary:hover {
    filter: brightness(1.05);
}

.mzlcrm-btn-outline {
    border-radius: 999px;
    padding: 6px 16px;
    font-size: 12px;
    border: 1px solid rgba(250,204,21,0.8);
    background: transparent;
    color: #facc15;
    cursor: pointer;
    font-weight: 500;
}

.mzlcrm-btn-outline:hover {
    background: rgba(250,204,21,0.12);
}

.mzlcrm-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 16px;
}

.mzlcrm-dashboard-item {
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.6);
    background: rgba(15,23,42,0.95);
}

.mzlcrm-dashboard-item .label {
    display: block;
    font-size: 11px;
    color: #9ca3af;
    margin-bottom: 4px;
}

.mzlcrm-dashboard-item .value {
    font-size: 13px;
    font-weight: 500;
    color: #f9fafb;
}

.mzlcrm-avatar {
    width: 52px;
    height: 52px;
    border-radius: 999px;
    background: radial-gradient(circle at top left, #facc15, #4b5563);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.mzlcrm-avatar.large {
    width: 86px;
    height: 86px;
    margin-bottom: 8px;
}

.mzlcrm-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mzlcrm-avatar-initials {
    font-size: 24px;
    font-weight: 700;
    color: #111827;
}

.mzlcrm-avatar-text {
    margin-left: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 12px;
}

.mzlcrm-avatar-text strong {
    font-size: 14px;
}

.mzlcrm-edit-profile-link {
    font-size: 12px;
    color: #facc15;
    text-decoration: none;
}

.mzlcrm-edit-profile-link:hover {
    text-decoration: underline;
}

.mzlcrm-profile-summary .mzlcrm-card {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mzlcrm-profile-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1.3fr);
    gap: 16px;
}

.mzlcrm-profile-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.mzlcrm-readonly-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px dashed rgba(148,163,184,0.4);
    font-size: 13px;
}

.mzlcrm-readonly-row:last-child {
    border-bottom: none;
}

.mzlcrm-readonly-row .label {
    color: #9ca3af;
}

.mzlcrm-readonly-row .value {
    color: #f9fafb;
    font-weight: 500;
}

.mzlcrm-alert-success {
    border-radius: 999px;
    padding: 6px 14px;
    background: rgba(22, 163, 74, 0.25);
    border: 1px solid rgba(22, 163, 74, 0.8);
    color: #bbf7d0;
    font-size: 12px;
    display: inline-block;
    margin: 0 auto 10px;
}

/* Responsive */
@media (max-width: 1100px) {
    .mzlcrm-portal-shell {
        grid-template-columns: 220px minmax(0, 2.2fr);
    }
    .mzlcrm-portal-profile-summary {
        grid-column: 1 / -1;
        flex-direction: row;
    }
}

@media (max-width: 900px) {
    .mzlcrm-portal-shell {
        grid-template-columns: minmax(0, 1fr);
    }
    .mzlcrm-profile-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ========== MA-ZAL Digital Profile Card (right card) ========== */
.mzlcrm-idcard {
    width: 400px;
    height: 200px;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-sizing: border-box;
    background-image: url('../img/mzl-idcard-bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}


.mzlcrm-idcard-header {
    display:flex;
    align-items:center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(148,163,184,0.4);
    padding-bottom: 6px;
    margin-bottom: 8px;
}

.mzlcrm-idcard-title {
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #e5e7eb;
    opacity: 0.9;
}

.mzlcrm-idcard-status {
    font-size: 11px;
    color:#facc15;
}

.mzlcrm-idcard-body {
    display: flex;
    gap: 16px;
    align-items: center;
}

/* في LTR الصورة والـ ID بمحاذاة اليسار */
.mzlcrm-ltr .mzlcrm-idcard-left {
    align-items: flex-start;
}

/* في RTL الصورة والـ ID بمحاذاة اليمين */
.mzlcrm-rtl .mzlcrm-idcard-left {
    align-items: flex-end;
}

/* العمود الذي يحتوي الصورة + الـ ID */
.mzlcrm-idcard-left {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mzlcrm-idcard-avatar img,
.mzlcrm-idcard-avatar .mzlcrm-avatar-placeholder {
    width: 86px;
    height: 86px;
    border-radius: 14px; /* مربّع بحواف ناعمة مثل كرت الهوية */
    object-fit: cover;
    display: block;
    background: #020617;
}

.mzlcrm-idcard-avatar .mzlcrm-avatar-placeholder {
    display:flex;
    align-items:center;
    justify-content:center;
    font-size: 32px;
    font-weight: 600;
    color:#e5e7eb;
}

/* تنسيق MZL-ID نفسه */
.mzlcrm-idcard-meta {
    display: inline-flex;
    gap: 4px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color:#9ca3af;
}

.mzlcrm-id-label {
    opacity:0.8;
}

.mzlcrm-id-value {
    color:#facc15;
}

.mzlcrm-idcard-badge {
    margin-top: 4px;
    font-size: 11px;
    color:#facc15;
    padding: 0;
    border: none;
    background: none;
    display: block;
}

/* الجانب الأيمن (الاسم + الإيميل + الموقع + رابط التحرير) */
.mzlcrm-idcard-right {
    flex: 1;
    min-width: 0;
}

.mzlcrm-id-name {
    font-size: 14px;
    font-weight: 600;
    color:#f9fafb;
    margin-bottom: 4px;
}

.mzlcrm-id-email,
.mzlcrm-id-location {
    font-size: 12px;
    color:#d1d5db;
    line-height: 1.4;
}

.mzlcrm-id-location {
    margin-top: 2px;
}

/* رابط تعديل الملف الشخصي داخل الكرت */
.mzlcrm-id-edit-link {
    display:inline-flex;
    align-items:center;
    gap:4px;
    margin-top: 10px;
    font-size: 12px;
    color:#facc15;
    text-decoration:none;
}

.mzlcrm-id-edit-link:hover {
    text-decoration: underline;
}
.mzlcrm-id-traits {
    margin-top: 4px;
    font-size: 11px;
    color:#9ca3af;
}

/* خطوط المعلومات داخل بطاقة الهوية */
.mzlcrm-id-lines {
    font-size: 11px;
    color:#d1d5db;
    line-height: 1.6;
}

.mzlcrm-id-line {
    display:flex;
    justify-content:space-between;
    gap: 10px;
    margin-bottom: 2px;
}

/* الوضع الافتراضي (لللغات LTR) */
.mzlcrm-ltr .mzlcrm-id-line { flex-direction: row; text-align:left; }
.mzlcrm-ltr .mzlcrm-id-line .label {
    flex: 0 0 40%;
    font-weight: 500;
    color:#e5e7eb;
}

.mzlcrm-ltr .mzlcrm-id-line .value {
    flex: 1;
    text-align: right;
}

/* وضع RTL للغات مثل العربية */
.mzlcrm-rtl .mzlcrm-id-line {
    flex-direction: row-reverse;
    text-align: right;
}

.mzlcrm-rtl .mzlcrm-id-line .label {
    flex: 0 0 40%;
    font-weight: 500;
    color:#e5e7eb;
}

.mzlcrm-rtl .mzlcrm-id-line .value {
    flex: 1;
    text-align: left;
}

.mzlcrm-idcard-actions {
    margin-top: 15px;
    display: flex;
    justify-content: center;
}

.mzlcrm-btn {
    padding: 8px 16px;
    background: #ffbf00;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-weight: 600;
    color: #000;
    transition: 0.2s;
}

.mzlcrm-btn:hover {
    background: #dba600;
}

/* تصغير الكارت داخل المنيو قليلاً كصفحة داخل صفحة */
.mzlcrm-portal-sidebar .mzlcrm-idcard {
    width: 100%;
    transform: scale(0.9);
    transform-origin: top center;
    margin-top: 12px;
}

/* ========================= */
/* MA-ZAL brand inside menu  */
/* ========================= */
.mzlcrm-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 10px 18px;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(148,163,184,0.35);
}

.mzlcrm-sidebar-brand img {
    height: 42px;
    width: auto;
    filter: drop-shadow(0 0 10px rgba(250,204,21,0.45));
}

.mzlcrm-brand-text h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #f9fafb;
    letter-spacing: 0.05em;
}

.mzlcrm-brand-text p {
    margin: 2px 0 0;
    font-size: 11px;
    color: #9ca3af;
    opacity: 0.85;
}