:root {
    --sfda-primary: #1B8354;
    --sfda-primary-hover: #166A45;
    --sfda-primary-dark: #0C5232;
    --sfda-primary-soft: #ECFDF3;
    --sfda-primary-soft-2: #F7FDF8;
    --sfda-accent: #E9C46A;
    --sfda-text: #161616;
    --sfda-muted: #6B7280;
    --sfda-border: #E5E7EB;
    --sfda-sidebar-bg: #052E1F;
    --sfda-sidebar-hover: #0A432F;
    --sfda-header-bg: #ffffff;
    --sfda-white: #ffffff;
    --sfda-info: #0F766E;
    --sfda-warning: #D97706;
    --sfda-danger: #DC2626;
    --sfda-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
    --sfda-shadow-md: 0 6px 18px rgba(27, 131, 84, 0.08);
    --sfda-radius-lg: 18px;
    --sfda-radius-md: 14px;
    --sfda-radius-sm: 10px;
}

body {
    font-family: 'IBMPlexSansArabic', 'Segoe UI', Tahoma, sans-serif !important;
    color: var(--sfda-text);
    background: var(--sfda-primary-soft-2);
}

#wrapper {
    background: var(--sfda-primary-soft-2);
}

.navbar-custom.navbar-custom-light {
    background: var(--sfda-header-bg) !important;
    border-bottom: 1px solid var(--sfda-border);
    box-shadow: var(--sfda-shadow-sm);
}

.logo-box {
    background: linear-gradient(135deg, var(--sfda-primary) 0%, var(--sfda-primary-dark) 100%);
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.logo-box .logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 70px;
    gap: 10px;
}

.logo-box .logo-lg::before,
.logo-box .logo-sm::before {
    content: none !important;
}

.logo-box img {
    display: inline-block !important;
    max-width: 100%;
    object-fit: contain;
    margin: 0;
}

.logo-box .logo-lg-img {
    max-height: 52px;
    height: auto;
    width: auto;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15));
}

.logo-box .logo-sm-img {
    max-height: 40px;
    height: auto;
    width: auto;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15));
}

.logo-box .logo-lg,
.logo-box .logo-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
}

.left-side-menu {
    background: linear-gradient(180deg, var(--sfda-sidebar-bg) 0%, #063A28 100%) !important;
    border-inline-start: 0 !important;
}

#sidebar-menu .menu-title {
    color: rgba(255,255,255,0.6) !important;
    padding: 16px 20px 6px !important;
    font-size: 12px;
    letter-spacing: 0.5px;
}

#sidebar-menu > ul > li > a {
    color: rgba(255,255,255,0.88);
    margin: 2px 10px;
    padding: 10px 14px !important;
    border-radius: var(--sfda-radius-sm);
    transition: all 0.2s ease;
}

#sidebar-menu > ul > li > a:hover {
    color: #fff;
    background: var(--sfda-sidebar-hover);
}

#sidebar-menu > ul > li > a.active,
#sidebar-menu > ul > li.active > a {
    color: #fff !important;
    background: linear-gradient(90deg, var(--sfda-primary) 0%, var(--sfda-primary-hover) 100%) !important;
    box-shadow: 0 6px 16px rgba(27, 131, 84, 0.35);
}

#sidebar-menu .nav-second-level li a {
    color: rgba(255,255,255,0.75) !important;
    padding-inline-start: 28px;
}

#sidebar-menu .nav-second-level li a:hover {
    color: #fff !important;
}

.button-menu-mobile {
    color: var(--sfda-primary) !important;
    background: var(--sfda-primary-soft) !important;
    border-radius: 10px !important;
}

.topnav-menu .dropdown-toggle.nav-user {
    background: var(--sfda-primary-soft);
    border-radius: 999px;
    padding: 6px 14px 6px 6px !important;
    color: var(--sfda-text);
}

.topnav-menu .dropdown-toggle.nav-user img {
    border: 2px solid var(--sfda-primary);
}

.topnav-menu .pro-user-name {
    color: var(--sfda-text) !important;
}

.profile-dropdown .dropdown-item {
    color: var(--sfda-text) !important;
}

.profile-dropdown .dropdown-item:hover {
    background: var(--sfda-primary-soft) !important;
    color: var(--sfda-primary-dark) !important;
}

.content-page {
    margin-inline-start: 260px;
    padding: 24px 28px 20px;
    background: var(--sfda-primary-soft-2);
}

.footer {
    border-top: 1px solid var(--sfda-border);
    background: #fff;
    color: var(--sfda-muted);
    padding: 16px 28px;
}

.btn {
    border-radius: var(--sfda-radius-sm) !important;
    font-weight: 700 !important;
    padding-inline: 16px;
    padding-block: 7px 8px;
    line-height: 1.35 !important;
    letter-spacing: 0;
    border-width: 1px !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
    transition: all 0.15s ease !important;
}

.btn:active { transform: translateY(1px); }

/* ====== SFDA Primary / Success ====== */
body .btn-primary,
body .btn.btn-primary,
body .btn-success,
body .btn.btn-success,
body .btn-primary:focus,
body .btn-success:focus,
body .btn-primary:visited {
    background: linear-gradient(180deg, var(--sfda-primary) 0%, var(--sfda-primary-hover) 100%) !important;
    background-color: var(--sfda-primary) !important;
    border-color: var(--sfda-primary) !important;
    color: #fff !important;
    box-shadow: 0 1px 2px rgba(27, 131, 84, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

body .btn-primary:hover,
body .btn-primary:active,
body .btn-success:hover,
body .btn-success:active {
    background: linear-gradient(180deg, var(--sfda-primary-hover) 0%, var(--sfda-primary-dark) 100%) !important;
    background-color: var(--sfda-primary-dark) !important;
    border-color: var(--sfda-primary-dark) !important;
    color: #fff !important;
    box-shadow: 0 2px 6px rgba(27, 131, 84, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* ====== SFDA Outline Primary / Success ====== */
body .btn-outline-primary {
    color: var(--sfda-primary) !important;
    border-color: var(--sfda-primary) !important;
    background: #fff !important;
}

body .btn-outline-primary:hover,
body .btn-outline-primary:active {
    background: var(--sfda-primary) !important;
    color: #fff !important;
    border-color: var(--sfda-primary) !important;
}

body .btn-outline-success {
    color: var(--sfda-primary-dark) !important;
    border-color: #A7F3D0 !important;
    background: #ECFDF3 !important;
}

body .btn-outline-success:hover,
body .btn-outline-success:active {
    background: var(--sfda-primary) !important;
    color: #fff !important;
    border-color: var(--sfda-primary) !important;
}

/* ====== SFDA Accent / Warning (ذهبي الهوية) ====== */
body .btn-warning,
body .btn.btn-warning,
body .btn-warning:focus {
    background: linear-gradient(180deg, #F1CC70 0%, var(--sfda-accent) 100%) !important;
    background-color: var(--sfda-accent) !important;
    border-color: #D9B35B !important;
    color: #3E2B04 !important;
    box-shadow: 0 1px 2px rgba(217, 179, 91, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

body .btn-warning:hover,
body .btn-warning:active {
    background: linear-gradient(180deg, var(--sfda-accent) 0%, #D9B35B 100%) !important;
    border-color: #C9A54B !important;
    color: #3E2B04 !important;
}

/* ====== SFDA Danger / حذف عينة ====== */
body .btn-danger,
body .btn.btn-danger,
body .btn-danger:focus {
    background: linear-gradient(180deg, #EF4444 0%, #B91C1C 100%) !important;
    background-color: #DC2626 !important;
    border-color: #B91C1C !important;
    color: #fff !important;
    box-shadow: 0 1px 2px rgba(185, 28, 28, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

body .btn-danger:hover,
body .btn-danger:active {
    background: linear-gradient(180deg, #DC2626 0%, #991B1B 100%) !important;
    border-color: #991B1B !important;
}

/* ====== SFDA Info / Secondary / Default ====== */
body .btn-info,
body .btn.btn-info,
body .btn-info:focus {
    background: linear-gradient(180deg, #0891B2 0%, #0E7490 100%) !important;
    background-color: #0891B2 !important;
    border-color: #0E7490 !important;
    color: #fff !important;
}

body .btn-info:hover,
body .btn-info:active {
    background: linear-gradient(180deg, #0E7490 0%, #155E75 100%) !important;
    border-color: #155E75 !important;
}

body .btn-secondary,
body .btn.btn-secondary,
body .btn-default,
body .btn.btn-default,
body .btn-secondary:focus,
body .btn-default:focus {
    background: linear-gradient(180deg, #F1F5F9 0%, #E2E8F0 100%) !important;
    background-color: #F1F5F9 !important;
    border-color: #CBD5E1 !important;
    color: var(--sfda-text) !important;
}

body .btn-secondary:hover,
body .btn-secondary:active,
body .btn-default:hover,
body .btn-default:active {
    background: linear-gradient(180deg, #E2E8F0 0%, #CBD5E1 100%) !important;
    border-color: #94A3B8 !important;
    color: var(--sfda-primary-dark) !important;
}

/* ====== Outline variants باقي الألوان ====== */
body .btn-outline-warning {
    color: #A16207 !important;
    border-color: var(--sfda-accent) !important;
    background: #FFFBEB !important;
}

body .btn-outline-warning:hover,
body .btn-outline-warning:active {
    background: var(--sfda-accent) !important;
    color: #3E2B04 !important;
    border-color: #D9B35B !important;
}

body .btn-outline-danger {
    color: #991B1B !important;
    border-color: #FCA5A5 !important;
    background: #FEF2F2 !important;
}

body .btn-outline-danger:hover,
body .btn-outline-danger:active {
    background: #DC2626 !important;
    color: #fff !important;
    border-color: #B91C1C !important;
}

body .btn-outline-info {
    color: #0E7490 !important;
    border-color: #A5F3FC !important;
    background: #ECFEFF !important;
}

body .btn-outline-info:hover,
body .btn-outline-info:active {
    background: #0891B2 !important;
    color: #fff !important;
    border-color: #0E7490 !important;
}

body .btn-outline-secondary {
    color: #475569 !important;
    border-color: #CBD5E1 !important;
    background: #F8FAFC !important;
}

body .btn-outline-secondary:hover,
body .btn-outline-secondary:active {
    background: #64748B !important;
    color: #fff !important;
    border-color: #475569 !important;
}

/* ====== أزرار صغيرة (btn-sm) / كبيرة (btn-lg) ====== */
body .btn-sm,
body .btn.btn-sm {
    padding: 5px 12px !important;
    font-size: 13px !important;
}

body .btn-lg,
body .btn.btn-lg {
    padding: 10px 22px !important;
    font-size: 15px !important;
    border-radius: var(--sfda-radius-md) !important;
}

/* ====== بادج SFDA فوق بعض الأزرار لو فيه أيقونة زي Create Role + ====== */
body .btn .mdi,
body .btn .fas,
body .btn .fa {
    margin-inline-end: 4px;
    vertical-align: -1px;
}

/* =========================================================== */
/* ====== Override ألوان الـ Template القديمة (btn-blue / btn-purple / ...) ====== */
/* ====== بنحولها كلها لألوان SFDA الرسمية عشان تتجانس مع الهوية ====== */
/* ====== btn-blue / btn-indigo / btn-purple / btn-violet / btn-pink -> أخضر SFDA Primary (كما هو زر إجراء رئيسي) ====== */
body .btn.btn-blue,
body .btn-blue,
body .btn.btn-indigo,
body .btn-indigo,
body .btn.btn-purple,
body .btn-purple,
body .btn.btn-violet,
body .btn-violet,
body .btn.btn-pink,
body .btn-pink,
body .btn-blue:focus,
body .btn-indigo:focus,
body .btn-purple:focus,
body .btn-violet:focus,
body .btn-pink:focus {
    background: linear-gradient(180deg, var(--sfda-primary) 0%, var(--sfda-primary-hover) 100%) !important;
    background-color: var(--sfda-primary) !important;
    border-color: var(--sfda-primary) !important;
    color: #fff !important;
    box-shadow: 0 1px 2px rgba(27, 131, 84, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

body .btn-blue:hover,
body .btn-blue:active,
body .btn-indigo:hover,
body .btn-indigo:active,
body .btn-purple:hover,
body .btn-purple:active,
body .btn-violet:hover,
body .btn-violet:active,
body .btn-pink:hover,
body .btn-pink:active {
    background: linear-gradient(180deg, var(--sfda-primary-hover) 0%, var(--sfda-primary-dark) 100%) !important;
    background-color: var(--sfda-primary-dark) !important;
    border-color: var(--sfda-primary-dark) !important;
    color: #fff !important;
    box-shadow: 0 2px 6px rgba(27, 131, 84, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

/* ====== btn-cyan / btn-teal / btn-lime -> خضر أفتح SFDA Success-like (تناسب لون الهوية) ====== */
body .btn.btn-cyan,
body .btn-cyan,
body .btn.btn-teal,
body .btn-teal,
body .btn.btn-lime,
body .btn-lime,
body .btn-cyan:focus,
body .btn-teal:focus,
body .btn-lime:focus {
    background: linear-gradient(180deg, #0F766E 0%, #0D9488 100%) !important;
    background-color: #0F766E !important;
    border-color: #0D9488 !important;
    color: #fff !important;
    box-shadow: 0 1px 2px rgba(13, 148, 136, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

body .btn-cyan:hover,
body .btn-cyan:active,
body .btn-teal:hover,
body .btn-teal:active,
body .btn-lime:hover,
body .btn-lime:active {
    background: linear-gradient(180deg, #0D9488 0%, #115E59 100%) !important;
    border-color: #115E59 !important;
    color: #fff !important;
}

/* ====== btn-orange / btn-amber / btn-yellow -> ذهبي SFDA Accent ====== */
body .btn.btn-orange,
body .btn-orange,
body .btn.btn-amber,
body .btn-amber,
body .btn.btn-yellow,
body .btn-yellow,
body .btn-orange:focus,
body .btn-amber:focus,
body .btn-yellow:focus {
    background: linear-gradient(180deg, #F1CC70 0%, var(--sfda-accent) 100%) !important;
    background-color: var(--sfda-accent) !important;
    border-color: #D9B35B !important;
    color: #3E2B04 !important;
    box-shadow: 0 1px 2px rgba(217, 179, 91, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}

body .btn-orange:hover,
body .btn-orange:active,
body .btn-amber:hover,
body .btn-amber:active,
body .btn-yellow:hover,
body .btn-yellow:active {
    background: linear-gradient(180deg, var(--sfda-accent) 0%, #D9B35B 100%) !important;
    border-color: #C9A54B !important;
    color: #3E2B04 !important;
}

/* ====== btn-brown / btn-stone -> Neutral Dark SFDA ====== */
body .btn.btn-brown,
body .btn-brown,
body .btn.btn-stone,
body .btn-stone,
body .btn-brown:focus,
body .btn-stone:focus {
    background: linear-gradient(180deg, #475569 0%, #334155 100%) !important;
    background-color: #475569 !important;
    border-color: #334155 !important;
    color: #fff !important;
}

body .btn-brown:hover,
body .btn-brown:active,
body .btn-stone:hover,
body .btn-stone:active {
    background: linear-gradient(180deg, #334155 0%, #1E293B 100%) !important;
    border-color: #1E293B !important;
}

/* ====== Outline variants للألوان القديمة ====== */
body .btn-outline-blue,
body .btn-outline-indigo,
body .btn-outline-purple,
body .btn-outline-violet,
body .btn-outline-pink {
    color: var(--sfda-primary) !important;
    border-color: var(--sfda-primary) !important;
    background: #fff !important;
}
body .btn-outline-blue:hover,
body .btn-outline-indigo:hover,
body .btn-outline-purple:hover,
body .btn-outline-violet:hover,
body .btn-outline-pink:hover {
    background: var(--sfda-primary) !important;
    color: #fff !important;
    border-color: var(--sfda-primary) !important;
}

body .btn-outline-cyan,
body .btn-outline-teal,
body .btn-outline-lime {
    color: #0D9488 !important;
    border-color: #5EEAD4 !important;
    background: #F0FDFA !important;
}
body .btn-outline-cyan:hover,
body .btn-outline-teal:hover,
body .btn-outline-lime:hover {
    background: #0D9488 !important;
    color: #fff !important;
    border-color: #0F766E !important;
}

body .btn-outline-orange,
body .btn-outline-amber,
body .btn-outline-yellow {
    color: #A16207 !important;
    border-color: var(--sfda-accent) !important;
    background: #FFFBEB !important;
}
body .btn-outline-orange:hover,
body .btn-outline-amber:hover,
body .btn-outline-yellow:hover {
    background: var(--sfda-accent) !important;
    color: #3E2B04 !important;
    border-color: #D9B35B !important;
}

/* ====== btn-gradient كلها تصير متدرجة SFDA ====== */
body .btn-gradient-primary,
body .btn-gradient-blue,
body .btn-gradient-indigo,
body .btn-gradient-purple,
body .btn-gradient-success,
body [class*="btn-gradient"] {
    background: linear-gradient(135deg, var(--sfda-primary) 0%, var(--sfda-primary-dark) 60%, var(--sfda-accent) 100%) !important;
    background-color: var(--sfda-primary) !important;
    border-color: var(--sfda-primary) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(27, 131, 84, 0.28) !important;
}

body .btn-gradient-primary:hover,
body .btn-gradient-blue:hover,
body [class*="btn-gradient"]:hover,
body [class*="btn-gradient"]:active {
    background: linear-gradient(135deg, var(--sfda-primary-hover) 0%, var(--sfda-primary-dark) 50%, #D9B35B 100%) !important;
    border-color: var(--sfda-primary-dark) !important;
    color: #fff !important;
}

/* ====== btn-rounded محظوظة في بعض الصفحات ====== */
body .btn-rounded {
    border-radius: 999px !important;
    padding-inline: 18px;
}

.card-box {
    background: #fff;
    border-radius: var(--sfda-radius-lg);
    border: 1px solid var(--sfda-border);
    box-shadow: var(--sfda-shadow-sm);
    padding: 20px;
    margin-bottom: 18px;
}

.header-title {
    color: var(--sfda-text);
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 18px !important;
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-title::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 18px;
    border-radius: 4px;
    background: linear-gradient(180deg, var(--sfda-primary) 0%, var(--sfda-accent) 100%);
}

.sfda-hero {
    border-radius: var(--sfda-radius-lg);
    background: linear-gradient(135deg, var(--sfda-primary) 0%, var(--sfda-primary-dark) 50%, #083C29 100%);
    color: #fff;
    padding: 28px;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 14px 34px rgba(12, 82, 50, 0.24);
}

.sfda-hero::before {
    content: "";
    position: absolute;
    inset-inline-end: -80px;
    top: -80px;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(233,196,106,0.22) 0%, rgba(233,196,106,0) 70%);
}

.sfda-hero::after {
    content: "";
    position: absolute;
    inset-inline-start: -100px;
    bottom: -120px;
    width: 360px;
    height: 360px;
    background: radial-gradient(circle, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 70%);
}

.sfda-hero h1 {
    margin: 0 0 8px;
    font-size: 26px;
    font-weight: 800;
    position: relative;
    z-index: 2;
}

.sfda-hero p {
    margin: 0;
    opacity: 0.9;
    position: relative;
    z-index: 2;
    max-width: 620px;
    line-height: 1.7;
}

.sfda-hero .sfda-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
    position: relative;
    z-index: 2;
}

.sfda-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.2);
    font-size: 13px;
    backdrop-filter: blur(6px);
}

.sfda-chip.accent {
    background: var(--sfda-accent);
    color: #322217;
    border-color: transparent;
    font-weight: 700;
}

.sfda-stats-grid .card-box {
    position: relative;
    overflow: hidden;
}

.sfda-stats-grid .card-box::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    background: linear-gradient(180deg, var(--sfda-primary) 0%, var(--sfda-accent) 100%);
}

.sfda-stats-grid .avatar-sm {
    width: 52px !important;
    height: 52px !important;
    border-radius: var(--sfda-radius-md) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sfda-stats-grid .bg-primary,
.sfda-stats-grid .bg-blue { background: linear-gradient(135deg, var(--sfda-primary) 0%, var(--sfda-primary-hover) 100%) !important; }
.sfda-stats-grid .bg-success { background: linear-gradient(135deg, #059669 0%, var(--sfda-primary) 100%) !important; }
.sfda-stats-grid .bg-info { background: linear-gradient(135deg, #0F766E 0%, #0D9488 100%) !important; }
.sfda-stats-grid .bg-warning { background: linear-gradient(135deg, #D97706 0%, var(--sfda-accent) 100%) !important; }
.sfda-stats-grid .bg-secondary { background: linear-gradient(135deg, #4B5563 0%, #1F2937 100%) !important; }
.sfda-stats-grid .bg-danger { background: linear-gradient(135deg, #DC2626 0%, #B91C1C 100%) !important; }

.sfda-stats-grid .avatar-title {
    font-size: 22px !important;
    line-height: 1 !important;
    color: #fff !important;
}

.sfda-stats-grid h3 {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: var(--sfda-text);
}

.sfda-stats-grid .text-muted {
    color: var(--sfda-muted) !important;
    font-weight: 600;
}

.sfda-stats-grid a {
    color: inherit;
    text-decoration: none;
}

.sfda-stats-grid a:hover { color: var(--sfda-primary); }

.sfda-filter-card .form-group { margin-bottom: 0.8rem; }
.sfda-filter-card label {
    color: var(--sfda-text);
    font-weight: 600;
    margin-bottom: 6px;
    font-size: 13px;
}

.sfda-filter-card .form-control,
.sfda-filter-card select.form-control {
    border: 1px solid var(--sfda-border);
    border-radius: var(--sfda-radius-sm);
    background: #fff;
    color: var(--sfda-text);
}

.sfda-filter-card .form-control:focus,
.sfda-filter-card select.form-control:focus {
    border-color: var(--sfda-primary);
    box-shadow: 0 0 0 3px rgba(27, 131, 84, 0.12);
}

.sfda-card-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}

.sfda-card-title h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--sfda-text);
}

.sfda-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.sfda-badge.primary { background: var(--sfda-primary-soft); color: var(--sfda-primary-dark); }
.sfda-badge.success { background: #ECFDF5; color: #065F46; }
.sfda-badge.warning { background: #FFF7ED; color: #92400E; }
.sfda-badge.danger  { background: #FEF2F2; color: #991B1B; }

/* ====== SFDA Sampling Version Switch ====== */
.sfda-version-switch-wrap {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 5px 12px 5px 8px;
    background: var(--sfda-primary-soft);
    border: 1px solid #D1FAE5;
    border-radius: 999px;
    box-shadow: var(--sfda-shadow-sm);
}
.sfda-version-label {
    font-size: 12px;
    font-weight: 800;
    color: var(--sfda-primary-dark);
    white-space: nowrap;
}
.sfda-version-switch {
    border-radius: 999px !important;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.08);
    border: 1px solid rgba(27, 131, 84, 0.2);
}
.sfda-version-switch .btn {
    padding: 4px 12px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    border-radius: 0 !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
.sfda-version-switch .btn.btn-primary.active,
.sfda-version-switch .btn.btn-primary {
    background: linear-gradient(180deg, var(--sfda-primary) 0%, var(--sfda-primary-hover) 100%) !important;
    color: #fff !important;
    border-color: transparent !important;
}
.sfda-version-switch .btn.btn-outline-secondary {
    background: #fff !important;
    color: var(--sfda-muted) !important;
    border-color: transparent !important;
}
.sfda-version-switch .btn.btn-outline-secondary:hover {
    background: var(--sfda-primary-soft-2) !important;
    color: var(--sfda-primary-dark) !important;
}

/* ==========================================================================
   نوع المقر Badges (Workplace Type)
   - Design: Compact, pill-shaped, high contrast on any table background.
   - منفذ : أخضر SFDA داكن النص على خلفية ناعمة + حدود واضحة.
   - منشاه: ذهبي SFDA داكن النص على خلفية ذهبية ناعمة + حدود واضحة.
   ========================================================================== */

.sfda-wp-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px 5px 12px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.92rem;
    line-height: 1.1;
    border-width: 1.5px;
    border-style: solid;
    white-space: nowrap;
    user-select: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.sfda-wp-badge i {
    font-size: 1.05rem;
    line-height: 1;
}

/* منفذ — Green SFDA */
.sfda-wp-badge.sfda-wp-port {
    background-color: var(--sfda-primary-soft);     /* #ECFDF3 */
    color: var(--sfda-primary-dark);                 /* #0C5232  (داكن جداً = واضح 100%) */
    border-color: var(--sfda-primary);               /* #1B8354 */
}

/* منشاه — Gold / Warning high-contrast */
.sfda-wp-badge.sfda-wp-factory {
    background-color: #FFF8E1;
    color: #7A5610;                                   /* brownish-dark gold = واضح جداً على الخلفية الصفراء */
    border-color: var(--sfda-accent);                 /* #E9C46A  (SFDA Gold) */
}

/* التأكد أن داخل أزرار القوائم (dropdown) و td البيضاء مابيبانش لون أبيض */
table .sfda-wp-badge,
body .sfda-wp-badge {
    color: #0C5232 !important;
}

body .sfda-wp-badge.sfda-wp-factory {
    color: #7A5610 !important;
}

/* Responsive: على الشاشات الصغيرة يصغر شوي */
@media (max-width: 768px) {
    .sfda-wp-badge { padding: 4px 9px; font-size: 0.85rem; }
}

/* ==========================================================================
   مؤشر الأداء (SLA Badges) — صفحة العينات
   تصميم: مدمج (compact)، دائري/مستطيل مع حدود واضحة، تباين بصري عالي على أي خلفية.
   الألوان الأساسية لأحكام SFDA الرسمية:
     • ok      = أخضر SFDA داكن النص
     • warning = أصفر/ذهبي داكن النص
     • danger  = أحمر داكن النص
     • done    = أخضر فاتح داكن النص (تم الإنجاز — مهلة مقضية بنجاح)
   ========================================================================== */

.sfda-sla-wrap {
    min-width: 180px;
    direction: rtl;
    line-height: 1.15;
}

.sfda-sla-badge {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    padding: 6px 12px 6px 12px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.92rem;
    line-height: 1.1;
    border-width: 1.5px;
    border-style: solid;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    user-select: none;
}

.sfda-sla-badge i {
    font-size: 1.1rem;
    line-height: 1;
    flex: 0 0 auto;
}

.sfda-sla-label {
    white-space: nowrap;
}

.sfda-sla-detail {
    padding-right: 2px;
    letter-spacing: 0;
    font-weight: 500;
}

/* ====== (1) OK — ضمن المهلة ( أخضر SFDA داكن النص + أخضر فاتح الخلفية ) ====== */
.sfda-sla-badge.sfda-sla--ok {
    background: #ECFDF3;                      /* أخضر فاتح (SFDA primary soft) */
    color: #0C5232 !important;                /* أخضر داكن = وضوح عالي 100% */
    border-color: #1B8354;                    /* SFDA primary */
}
.sfda-sla-badge.sfda-sla--ok i { color: #1B8354 !important; }

/* ====== (2) DONE — تم الإنجاز (أخضر فاتح جداً واضح جداً) ====== */
.sfda-sla-badge.sfda-sla--done {
    background: #F0FDF4;
    color: #065F46 !important;
    border-color: #10B981;
}
.sfda-sla-badge.sfda-sla--done i { color: #10B981 !important; }

/* ====== (3) PENDING — بانتظار أول إجراء (أزرق سماوي فاتح يتناسب مع الهوية) ====== */
.sfda-sla-badge.sfda-sla--pending {
    background: #EFF6FF;                      /* أزرق فاتح جداً */
    color: #1E3A8A !important;                /* أزرق داكن = وضوح عالي جداً */
    border-color: #3B82F6;                    /* أزرق SFDA المعلوماتي */
}
.sfda-sla-badge.sfda-sla--pending i { color: #2563EB !important; }

/* ====== (4) WARNING — قرب انتهاء المهلة (أصفر/ذهبي SFDA) ====== */
.sfda-sla-badge.sfda-sla--warning {
    background: #FFF8E1;                      /* ذهبي فاتح */
    color: #7A5610 !important;                /* بني-ذهبي داكن = وضوح عالي جداً */
    border-color: #E9C46A;                    /* SFDA accent (الذهبي) */
}
.sfda-sla-badge.sfda-sla--warning i { color: #B45309 !important; }

/* ====== (5) DANGER — تأخر عن المهلة (أحمر قوي واضح) ====== */
.sfda-sla-badge.sfda-sla--danger {
    background: #FEF2F2;                      /* أحمر فاتح جداً */
    color: #7F1D1D !important;                /* أحمر داكن جداً = وضوح 100% */
    border-color: #DC2626;                    /* أحمر SFDA danger قوي */
}
.sfda-sla-badge.sfda-sla--danger i { color: #DC2626 !important; }

/* Fallbacks — لو أي كلاس قالب قديم كتب فوق النص بيضيع الألوان */
body .sfda-sla-badge.sfda-sla--ok,
table .sfda-sla-badge.sfda-sla--ok       { color: #0C5232 !important; }

body .sfda-sla-badge.sfda-sla--done,
table .sfda-sla-badge.sfda-sla--done     { color: #065F46 !important; }

body .sfda-sla-badge.sfda-sla--pending,
table .sfda-sla-badge.sfda-sla--pending  { color: #1E3A8A !important; }

body .sfda-sla-badge.sfda-sla--warning,
table .sfda-sla-badge.sfda-sla--warning  { color: #7A5610 !important; }

body .sfda-sla-badge.sfda-sla--danger,
table .sfda-sla-badge.sfda-sla--danger   { color: #7F1D1D !important; }

/* =========================================================
   SFDA COMPLETION RATE CARD (بطاقة نسبة الإنجاز ضمن المهلة)
   ========================================================= */

/* (1) Wrapper of the whole card with color-coded border accents */
.sfda-completion-card {
    border-radius: var(--sfda-radius-md, 10px);
    border: 1.5px solid #E5E7EB;
    background: #fff;
    transition: all 0.2s ease-in-out;
}
.sfda-completion-card:hover {
    box-shadow: 0 4px 12px rgba(27, 131, 84, 0.08);
    transform: translateY(-1px);
}

/* Color-theme variants (border-left accent) */
.sfda-completion-card.sfda-cc--green { border-right: 4px solid #1B8354; }
.sfda-completion-card.sfda-cc--amber { border-right: 4px solid #E9C46A; }
.sfda-completion-card.sfda-cc--red   { border-right: 4px solid #DC2626; }

/* SVG circular progress ring + percentage in the middle */
.sfda-progress-ring {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.sfda-cc--green .sfda-progress-ring { color: #1B8354 !important; }
.sfda-cc--amber .sfda-progress-ring { color: #D97706 !important; }
.sfda-cc--red   .sfda-progress-ring { color: #DC2626 !important; }

.sfda-progress-ring svg { filter: drop-shadow(0 1px 2px rgba(0,0,0,0.06)); }

.sfda-progress-ring__text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.9rem;
    letter-spacing: 0;
    color: inherit !important;
}

/* Horizontal progress bar under the stats */
.sfda-horizontal-progress { margin-top: 8px; }
.sfda-hp__track {
    width: 100%;
    height: 7px;
    background: #F3F4F6;
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid #E5E7EB;
}
.sfda-hp__fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.sfda-hp__fill.sfda-hp--green { background: linear-gradient(90deg, #10B981 0%, #1B8354 100%); }
.sfda-hp__fill.sfda-hp--amber { background: linear-gradient(90deg, #F59E0B 0%, #D97706 100%); }
.sfda-hp__fill.sfda-hp--red   { background: linear-gradient(90deg, #F87171 0%, #DC2626 100%); }

/* Fallback specificity overrides to beat AdminLTE defaults */
body .sfda-completion-card .sfda-progress-ring__text { color: inherit !important; }
body .sfda-horizontal-progress .sfda-hp__fill { height: 7px !important; }

/* =========================================================
   TABLE PILLS — ضمن المهلة column inside the نوع الطلب table
   ========================================================= */
.sfda-table-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1.5px solid transparent;
    font-size: 0.82rem;
    line-height: 1.3;
    direction: rtl;
    white-space: nowrap;
}
.sfda-table-pill i { font-size: 1rem; }

.sfda-table-pill.sfda-tp--green {
    background: #ECFDF3;
    color: #0C5232 !important;
    border-color: #1B8354;
}
.sfda-table-pill.sfda-tp--green i { color: #1B8354 !important; }

.sfda-table-pill.sfda-tp--amber {
    background: #FFF8E1;
    color: #7A5610 !important;
    border-color: #E9C46A;
}
.sfda-table-pill.sfda-tp--amber i { color: #B45309 !important; }

.sfda-table-pill.sfda-tp--red {
    background: #FEF2F2;
    color: #7F1D1D !important;
    border-color: #DC2626;
}
.sfda-table-pill.sfda-tp--red i { color: #DC2626 !important; }

body table .sfda-table-pill,
body .sfda-table-pill { font-weight: 600 !important; }

/* Responsive تصغير للشاشات الصغيرة عشان مايعملش Wrap للنصوص الطويلة */
@media (max-width: 768px) {
    .sfda-sla-wrap   { min-width: 160px; }
    .sfda-sla-badge  { padding: 5px 10px; font-size: 0.85rem; }
    .sfda-sla-detail { font-size: 0.75rem; }
}

.table thead th {
    background: var(--sfda-primary-soft);
    color: var(--sfda-primary-dark);
    font-weight: 700;
    border-bottom: 1px solid #D1FAE5;
    border-top: none;
    font-size: 13px;
}

.table tbody tr:hover {
    background: var(--sfda-primary-soft-2);
}

.badge-success { background: #10B981 !important; }
.badge-danger  { background: #EF4444 !important; }
.badge-warning { background: #F59E0B !important; color: #442B05 !important; }

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

a { color: var(--sfda-primary); }
a:hover { color: var(--sfda-primary-hover); }

.dropdown-menu {
    border-radius: var(--sfda-radius-md);
    border: 1px solid var(--sfda-border);
    box-shadow: var(--sfda-shadow-md);
}

.sfda-dashboard-grid {
    display: grid;
    gap: 18px;
}

.sfda-inline-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.page-title-box {
    background: #fff;
    border: 1px solid var(--sfda-border);
    border-radius: var(--sfda-radius-md);
    padding: 16px 20px;
    margin-bottom: 20px;
    box-shadow: var(--sfda-shadow-sm);
}

.page-title-box .page-title {
    color: var(--sfda-text);
    font-weight: 800;
    font-size: 20px;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.page-title-box .page-title::before {
    content: "";
    width: 4px;
    height: 22px;
    border-radius: 5px;
    display: inline-block;
    background: linear-gradient(180deg, var(--sfda-primary) 0%, var(--sfda-accent) 100%);
}

.breadcrumb {
    background: transparent !important;
    margin: 4px 0 0;
    padding: 0 !important;
}

.breadcrumb .breadcrumb-item,
.breadcrumb .breadcrumb-item a {
    color: var(--sfda-muted) !important;
    font-weight: 600;
}

.breadcrumb .breadcrumb-item.active,
.breadcrumb .breadcrumb-item a:hover {
    color: var(--sfda-primary-dark) !important;
}

.form-control,
.custom-select,
select.form-control,
select.custom-select,
textarea.form-control,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="search"],
input[type="tel"],
input[type="url"],
.input-group-text,
.note-editor.note-frame {
    border: 1px solid var(--sfda-border) !important;
    border-radius: var(--sfda-radius-sm) !important;
    background: #fff !important;
    color: var(--sfda-text) !important;
}

/* تصغير الارتفاع اللي بيه حقول كبيرة زيادة (inputs / selects) */
.form-control,
.custom-select,
select.form-control,
select.custom-select,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="search"],
input[type="tel"],
input[type="url"] {
    height: auto !important;
    min-height: 38px !important;
    padding: 7px 12px !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
}

select.form-control,
select.custom-select,
.custom-select {
    padding-block: 8px 8px;
}

/* تصغير textarea كبيرة غير ضرورية، الحد الأدنى صغير ومتوسط مايكونش طويل */
textarea.form-control:not([style*="height"]):not([rows]):not(.note-codable),
textarea.form-control[rows="10"],
textarea.form-control[rows="9"],
textarea.form-control[rows="8"],
textarea.form-control[rows="7"],
textarea.form-control[rows="6"] {
    min-height: 72px !important;
    height: 86px !important;
    resize: vertical;
}

textarea.form-control[rows="5"],
textarea.form-control[rows="4"],
textarea.form-control[rows="3"] {
    min-height: 56px !important;
    height: 68px !important;
    resize: vertical;
}

textarea[style*="height: 200"],
textarea[style*="height: 190"],
textarea[style*="height: 180"],
textarea[style*="height: 170"],
textarea[style*="height: 160"],
textarea[style*="height: 150"],
textarea[style*="height: 140"] {
    height: 110px !important;
    min-height: 110px !important;
}

textarea[style*="height: 3"],
textarea[style*="height: 4"],
textarea[style*="height: 5"],
textarea[style*="height: 6"],
textarea[style*="height: 7"],
textarea[style*="height: 8"],
textarea[style*="height: 9"] {
    height: 80px !important;
    min-height: 80px !important;
}


.form-control:focus,
.custom-select:focus,
select.form-control:focus,
select.custom-select:focus,
textarea.form-control:focus,
input:focus,
.bootstrap-select .dropdown-toggle:focus,
.note-editor.note-frame:focus-within {
    border-color: var(--sfda-primary) !important;
    box-shadow: 0 0 0 3px rgba(27, 131, 84, 0.10) !important;
}

label {
    color: var(--sfda-text);
    font-weight: 700;
    margin-bottom: 3px;
    display: block;
    font-size: 13px;
    line-height: 1.2;
}

.form-group {
    margin-bottom: 0.6rem;
    background: #FCFFFD;
    border: 1px solid #E7F6EE;
    border-radius: var(--sfda-radius-md);
    padding: 8px 12px 10px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.025);
    transition: all 0.15s ease;
}

.form-group:hover {
    border-color: #C6F1D7;
    background: #FAFFF7;
}

/* ============ الباقي: أي حقل أو كتلة فيها حقول لكنها مش في form-group ============ */
/* أي div مباشر في الفورم أو في الـ cardBox فيه input/select/textarea ولسه مش جوه form-group => نلبسه بوردر زي الباقي */
.card-box form > :not(.form-group):not(:has(.form-group)):has(label, input, select, textarea, .form-control, .custom-select),
.card-body form > :not(.form-group):not(:has(.form-group)):has(label, input, select, textarea, .form-control, .custom-select),
.card-box .row > [class*="col"] > :not(.form-group):not(:has(.form-group)):has(label, input, select, textarea, .form-control, .custom-select),
.card-box > :not(.card-header):not(.card-body):not(.card-footer):not(form):not(:has(.form-group)):has(label, input, select, textarea, .form-control, .custom-select),
.content form > :not(.form-group):not(:has(.form-group)):has(label, input, select, textarea, .form-control, .custom-select) {
    position: relative;
    margin-bottom: 0.6rem;
    background: #FCFFFD;
    border: 1px solid #E7F6EE;
    border-radius: var(--sfda-radius-md);
    padding: 8px 12px 10px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.025);
    transition: all 0.15s ease;
}

.card-box form > :not(.form-group):not(:has(.form-group)):has(label, input, select, textarea):hover,
.card-body form > :not(.form-group):not(:has(.form-group)):has(label, input, select, textarea):hover,
.card-box .row > [class*="col"] > :not(.form-group):not(:has(.form-group)):has(label, input, select, textarea):hover,
.content form > :not(.form-group):not(:has(.form-group)):has(label, input, select, textarea):hover {
    border-color: #C6F1D7;
    background: #FAFFF7;
}

/* لو العمود نفسه (مثلاً col-md-6) وله حقل واحد جواه label + input ومش جوه form-group => نلبس البوردر على العمود نفسه */
.card-box .row > [class*="col"]:not(:has(.form-group)):not(:has(> div[class], > section, > article)):has(> label, > input, > select, > textarea, > .form-control, > .custom-select) {
    margin-bottom: 0;
    padding: 8px 12px 10px;
    background: #FCFFFD;
    border: 1px solid #E7F6EE;
    border-radius: var(--sfda-radius-md);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.025);
    transition: all 0.15s ease;
}

.card-box .row > [class*="col"]:not(:has(.form-group)):has(> label, > input, > select, > textarea):hover {
    border-color: #C6F1D7;
    background: #FAFFF7;
}

.content form .row,
.card-box .row,
.card .card-body .row {
    row-gap: 4px;
    margin-inline: -6px;
}

/* تقليل المسافة الأفقية بين الأعمدة (cols) في الفورم/فلتر، عشان الحقول ما تبقاش بعيدة عن بعضها */
.content form .row > [class*="col-"],
.card-box .row > [class*="col-"],
.card .card-body .row > [class*="col-"] {
    padding-inline: 6px;
}

/* زر الفلتر الأخضر اللي فيه أيقونة Funnel (الموجود في الصورة جنب موظف السحب) */
.btn.btn-icon,
.btn.icon-btn,
button:not([class*="btn-"]).mdi,
body .btn:has(.mdi-filter-variant),
body .btn:has(.fa-filter),
body .btn:has(.mdi-filter) {
    padding-inline: 0 !important;
    padding-block: 0 !important;
    width: 42px;
    height: 38px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    float: none !important;
    border-radius: var(--sfda-radius-md) !important;
}

/* Fix زر الفلتر في أعمدة من النوع col-md-1 أو عمود صغير عشان مايتراكبش على الحقول المجاورة */
.card-box .row > [class*="col-md-1"].col-md-1:has(.btn:is(:has(.fa-filter), :has(.mdi-filter), :has(.mdi-filter-variant))),
.card-box .row > [class*="col-1"]:has(.btn:is(:has(.fa-filter), :has(.mdi-filter), :has(.mdi-filter-variant))),
.content form .row > [class*="col-md-1"]:has(.btn:is(:has(.fa-filter), :has(.mdi-filter), :has(.mdi-filter-variant))),
.content form .row > [class*="col-1"]:has(.btn:is(:has(.fa-filter), :has(.mdi-filter), :has(.mdi-filter-variant))) {
    padding-inline-start: 0;
    display: flex;
    align-items: flex-end;
    padding-bottom: 0.6rem; /* نفس margin-bottom اللي بتاع form-group */
}

/* إزالة brs اللي قدام زر الفلتر أحياناً وتخليه يتناثر */
.card-box .row > [class*="col-md-1"] .form-group > br,
.card-box .row > [class*="col-1"] .form-group > br,
.content form .row > [class*="col-md-1"] .form-group > br,
.content form .row > [class*="col-1"] .form-group > br {
    display: none;
}

/* خلي الزر ياخد ارتفاع الحقل وينسق */
.card-box .row > [class*="col-md-1"] .btn,
.card-box .row > [class*="col-1"] .btn,
.content form .row > [class*="col-md-1"] .btn,
.content form .row > [class*="col-1"] .btn {
    margin: 0;
}

.card-box:has(form),
.content-page .card-box:has(.form-group) {
    padding: 10px 14px 0;
    border: 1px solid #DFF4E7;
    background:
      linear-gradient(180deg, rgba(27, 131, 84, 0.06) 0%, rgba(27, 131, 84, 0) 120px) repeat-x top / 100% 100%,
      #fff;
    overflow: hidden;
}

.card-box:has(form) .card-box,
.content-page .card-box:has(.form-group) .card-box {
    padding: 10px 12px;
}

form {
    position: relative;
}

.card-box form::before,
form.card::before,
.card-body form::before {
    content: "";
    display: block;
    height: 3px;
    margin-bottom: 10px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--sfda-primary) 0%, var(--sfda-accent) 100%);
}

/* Action Bar (أزرار نهاية الفورم: إضافة / حذف / إلغاء ...) */
/* داخل الفورم في آخره */
.card-box form > *:last-child:has(> .btn, > div > .btn, button.btn, a.btn),
.card-body form > *:last-child:has(> .btn, > div > .btn, button.btn, a.btn),
.card-box .card-body > *:last-child:has(> .btn, > div > .btn, button.btn, a.btn),
/* خارج الفورم لكن آخر عنصر في نفس card-box الفورم */
.card-box:has(form) > *:last-child:not(form):not(.modal):has(.btn, button.btn, a.btn),
.card-box:has(.form-group) > *:last-child:not(.modal):has(.btn, button.btn, a.btn) {
    position: relative;
    margin: 12px -14px 0;
    padding: 10px 14px 12px;
    border-top: 1px solid #DFF4E7;
    background-color: #F4FBF6;
    border-end-start-radius: var(--sfda-radius-lg);
    border-end-end-radius: var(--sfda-radius-lg);
}

/* في حالة الأزرار جاية في صف row منفصل (أو سطر واحد فيه الأزرار) */
.card-box .row:has(> [class*="col"] .btn:only-child, > [class*="col"] > .btn:only-child),
.card-box .row:has(> [class*="col"] button.btn, > [class*="col"] a.btn) {
    margin-inline: -14px;
    padding-inline: 14px;
    padding-block: 10px 12px;
    margin-block: 12px 0;
    border-top: 1px solid #DFF4E7;
    background-color: #F4FBF6;
}
.card-box .row:first-child:has(.btn) {
    margin-block: 0 12px;
}

/* حواف الأزرار داخل Action Bar (تطابق الهوية) */
.card-box .btn.btn-danger { border-radius: var(--sfda-radius-sm) !important; padding-inline: 24px; }
.card-box .btn.btn-success,
.card-box .btn.btn-primary { border-radius: var(--sfda-radius-sm) !important; padding-inline: 24px; }

/* فواصل بين زرارين متلاقيين (مثل إضافة عينة / حذف عينة) */
.card-box [class*="col-"] .btn + .btn,
.card-box [class*="col-"] > * + .btn,
.card-box .card-body .btn + .btn {
    margin-inline-start: 10px;
}

.input-group-text {
    background: var(--sfda-primary-soft);
    color: var(--sfda-primary-dark);
    font-weight: 700;
}

.custom-control-input:checked ~ .custom-control-label::before,
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before,
.custom-radio .custom-control-input:checked ~ .custom-control-label::before {
    border-color: var(--sfda-primary) !important;
    background-color: var(--sfda-primary) !important;
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
    background-color: #fff !important;
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--sfda-primary) !important;
    border-color: var(--sfda-primary) !important;
}

.card {
    border: 1px solid var(--sfda-border);
    border-radius: var(--sfda-radius-lg);
    box-shadow: var(--sfda-shadow-sm);
    overflow: hidden;
}

.card .card-header,
.card-header {
    background: #fff;
    border-bottom: 1px solid var(--sfda-border);
    padding: 16px 20px;
    font-weight: 800;
    color: var(--sfda-text);
}

.card .card-header h1,
.card .card-header h2,
.card .card-header h3,
.card .card-header h4,
.card .card-header h5,
.card .card-header h6 { margin: 0; font-weight: 800; }

.card .card-body { padding: 20px; }

.card .card-footer {
    background: #fff;
    border-top: 1px solid var(--sfda-border);
    padding: 16px 20px;
}

.modal-content {
    border: 1px solid var(--sfda-border) !important;
    border-radius: var(--sfda-radius-lg) !important;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(16, 24, 40, 0.18);
}

.modal-header {
    background: linear-gradient(135deg, var(--sfda-primary) 0%, var(--sfda-primary-hover) 100%);
    color: #fff;
    border-bottom: none;
    padding: 14px 20px;
}

.modal-header h5,
.modal-header .modal-title { color: #fff; font-weight: 800; }

.modal-header .close { color: #fff; opacity: 0.9; }
.modal-header .close:hover { color: #fff; opacity: 1; }

.modal-body { padding: 20px; color: var(--sfda-text); }
.modal-footer { border-top: 1px solid var(--sfda-border); padding: 14px 20px; background: #FAFAF9; }

/* ====== المرفقات Modal ====== */
.sfda-dd-attachments {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    font-weight: 700 !important;
    color: var(--sfda-primary-dark) !important;
}
.sfda-dd-attachments:hover {
    background: var(--sfda-primary-soft) !important;
}
.sfda-attach-badge {
    margin-inline-start: auto !important;
    margin-inline-end: 0 !important;
    background: #0EA5E9 !important;
    color: #fff !important;
    padding: 2px 8px !important;
    font-size: 0.72rem !important;
    border-radius: 999px !important;
}
body .dropdown-divider { margin: 6px 0 !important; border-color: var(--sfda-border); }

.sfda-attach-modal-header {
    background: linear-gradient(135deg, var(--sfda-primary) 0%, #047857 100%) !important;
    padding: 10px 18px !important;
}
.sfda-attach-modal-header .modal-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.98rem !important;
}
.sfda-attach-modal-header .modal-title .mdi {
    font-size: 1.1rem;
}
.sfda-attach-modal-header .modal-title .badge {
    background: rgba(255,255,255,0.22) !important;
    color: #fff !important;
    padding: 2px 8px !important;
    font-size: 0.72rem !important;
    border-radius: 999px;
    font-weight: 700;
}

.sfda-attach-empty {
    background: #fff;
    border: 2px dashed var(--sfda-border);
    border-radius: var(--sfda-radius-md);
    padding: 22px 10px !important;
}
.sfda-attach-empty-icon i {
    font-size: 3.2rem !important;
    line-height: 1;
    opacity: 0.6;
}
.sfda-attach-empty h5 { font-size: 1rem !important; }
.sfda-attach-empty p  { font-size: 0.82rem !important; }

.sfda-attach-grid {
    margin: 0 -6px;
}
.sfda-attach-grid > [class*="col-"] {
    padding: 0 6px;
    margin-bottom: 12px !important;
}
.sfda-attach-grid .mb-4 { margin-bottom: 10px !important; }

.sfda-attachment-card {
    border: 1px solid var(--sfda-border);
    border-radius: var(--sfda-radius-md);
    background: #fff;
    overflow: hidden;
    transition: all 0.22s ease;
    box-shadow: var(--sfda-shadow-sm);
}
.sfda-attachment-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(16,24,40,0.08);
    border-color: #A7F3D0;
}

.sfda-attach-row {
    min-height: 100%;
}

.sfda-attach-visual {
    width: 82px !important;
    min-width: 82px !important;
    max-width: 82px !important;
    background: linear-gradient(135deg, #F0FDF4 0%, #ECFDF5 100%);
    border-inline-end: 1px solid var(--sfda-border);
    padding: 8px 6px !important;
    overflow: hidden;
}
.sfda-attach--pdf   .sfda-attach-visual { background: linear-gradient(135deg, #FEF2F2 0%, #FFF1F2 100%); }
.sfda-attach--doc   .sfda-attach-visual { background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%); }
.sfda-attach--sheet .sfda-attach-visual { background: linear-gradient(135deg, #F0FDF4 0%, #D1FAE5 100%); }
.sfda-attach--audio .sfda-attach-visual { background: linear-gradient(135deg, #FAF5FF 0%, #F3E8FF 100%); }
.sfda-attach--image .sfda-attach-visual { background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%); }

.sfda-attach-thumb {
    width: 100%;
    height: 100%;
    max-height: 86px !important;
    object-fit: cover;
    border-radius: var(--sfda-radius-sm);
    border: 1px solid rgba(0,0,0,0.08);
}

.sfda-attach-icon-wrap {
    width: 100%;
    aspect-ratio: 1 / 1;
    max-width: 60px !important;
    max-height: 60px !important;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    box-shadow: 0 4px 12px rgba(16,24,40,0.08);
}
.sfda-attach-icon-wrap i {
    font-size: 2.2rem !important;
    line-height: 1;
}
.sfda-icon-pdf   i { color: #DC2626; }
.sfda-icon-doc   i { color: #2563EB; }
.sfda-icon-sheet i { color: #059669; }
.sfda-icon-audio i { color: #7C3AED; }
.sfda-icon-image i { color: #D97706; }
.sfda-icon-file  i { color: var(--sfda-muted); }

.sfda-attach-info {
    padding: 9px 11px !important;
}
.sfda-attach-info > * {
    direction: rtl;
}
.sfda-attach-name {
    font-size: 0.86rem !important;
    color: var(--sfda-text);
    font-weight: 800;
    margin-bottom: 2px !important;
}
.sfda-attach-filename {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.68rem !important;
    opacity: 0.85;
    max-width: 220px !important;
}

.sfda-ext-badge {
    border-radius: 5px !important;
    padding: 2px 7px !important;
    font-weight: 800 !important;
    font-size: 0.65rem !important;
    letter-spacing: 0.04em;
}
.sfda-ext--pdf   { background: #FEF2F2; color: #B91C1C; border: 1px solid #FECACA; }
.sfda-ext--doc   { background: #EFF6FF; color: #1D4ED8; border: 1px solid #BFDBFE; }
.sfda-ext--sheet { background: #F0FDF4; color: #047857; border: 1px solid #A7F3D0; }
.sfda-ext--audio { background: #FAF5FF; color: #6D28D9; border: 1px solid #DDD6FE; }
.sfda-ext--image { background: #FFFBEB; color: #92400E; border: 1px solid #FDE68A; }
.sfda-ext--file  { background: #F3F4F6; color: #374151; border: 1px solid #E5E7EB; }

.sfda-audio-player {
    margin: 4px 0 6px !important;
}
.sfda-audio-player audio {
    border-radius: 999px;
    outline: none;
    height: 32px !important;
}

.sfda-attach-meta {
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px !important;
    font-size: 0.72rem !important;
}
.sfda-attach-meta .mdi {
    vertical-align: middle;
    margin-top: -1px;
    font-size: 1rem !important;
}

.sfda-attach-actions {
    margin-top: 7px !important;
    padding-top: 7px !important;
}
.sfda-attach-actions .btn {
    font-weight: 700 !important;
    border-radius: var(--sfda-radius-sm) !important;
    padding: 5px 10px !important;
    font-size: 0.75rem !important;
    line-height: 1.35 !important;
}
.sfda-attach-actions .btn i {
    font-size: 0.98rem !important;
}
.sfda-attach-actions .btn-primary {
    background: linear-gradient(135deg, var(--sfda-primary) 0%, var(--sfda-primary-hover) 100%);
    border-color: transparent !important;
}
.sfda-attach-actions .btn-primary:hover { filter: brightness(0.97); }
.sfda-attach-actions .btn-outline-success {
    color: #047857 !important;
    border-color: #10B981 !important;
}
.sfda-attach-actions .btn-outline-success:hover {
    background: #10B981 !important;
    color: #fff !important;
}
.sfda-attach-actions .gap-2 { gap: 6px !important; }

/* تصغير حجم الـ Modal نفسه عشان مايأخذش كل الشاشة */
.sfda-attachments-modal .modal-dialog {
    max-width: 860px !important;
    width: 94% !important;
}
.sfda-attachments-modal .modal-body {
    padding: 12px !important;
}
.sfda-attachments-modal .modal-footer {
    padding: 8px 14px !important;
}
.sfda-attachments-modal .modal-footer .btn {
    padding: 5px 14px !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
}

/* ====== نهاية قسم المرفقات ====== */

.nav-tabs {
    border-bottom: 1px solid var(--sfda-border);
    gap: 6px;
    margin-bottom: 18px;
    padding-inline-start: 2px;
}

.nav-tabs .nav-link,
.nav-tabs .nav-item.show .nav-link {
    border: 1px solid transparent !important;
    border-radius: var(--sfda-radius-sm) var(--sfda-radius-sm) 0 0 !important;
    color: var(--sfda-muted) !important;
    font-weight: 700;
    padding: 10px 16px;
    background: transparent;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link:hover {
    color: var(--sfda-primary-dark) !important;
    background: var(--sfda-primary-soft);
    border-color: var(--sfda-border) !important;
    border-bottom-color: #fff !important;
}

.tab-content {
    padding: 6px 2px 10px;
}

.pagination {
    gap: 6px;
}

.page-link {
    border-radius: var(--sfda-radius-sm) !important;
    border: 1px solid var(--sfda-border) !important;
    background: #fff !important;
    color: var(--sfda-text) !important;
    font-weight: 700;
    min-width: 36px;
    text-align: center;
}

.page-link:hover {
    color: var(--sfda-primary-dark) !important;
    background: var(--sfda-primary-soft) !important;
    border-color: #A7F3D0 !important;
}

.page-item.active .page-link,
.page-item.active .page-link:hover {
    background: linear-gradient(135deg, var(--sfda-primary) 0%, var(--sfda-primary-hover) 100%) !important;
    color: #fff !important;
    border-color: var(--sfda-primary) !important;
    box-shadow: 0 4px 10px rgba(27, 131, 84, 0.22);
}

.page-item.disabled .page-link {
    color: var(--sfda-muted) !important;
    background: #F9FAFB !important;
}

.alert {
    border-radius: var(--sfda-radius-md) !important;
    border: 1px solid transparent;
    font-weight: 600;
}

.alert-success {
    background: #ECFDF5 !important;
    color: #065F46 !important;
    border-color: #A7F3D0 !important;
}

.alert-danger, .alert-error {
    background: #FEF2F2 !important;
    color: #991B1B !important;
    border-color: #FECACA !important;
}

.alert-warning {
    background: #FFF7ED !important;
    color: #92400E !important;
    border-color: #FED7AA !important;
}

.alert-info {
    background: #ECFEFF !important;
    color: #155E75 !important;
    border-color: #A5F3FC !important;
}

.alert-primary {
    background: var(--sfda-primary-soft) !important;
    color: var(--sfda-primary-dark) !important;
    border-color: #A7F3D0 !important;
}

.badge {
    font-weight: 700 !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
}

.badge.bg-primary,
.badge.badge-primary,
.page-title-box .badge {
    background: linear-gradient(135deg, var(--sfda-primary) 0%, var(--sfda-primary-hover) 100%) !important;
}

.badge.bg-info, .badge.badge-info { background: #0F766E !important; }
.badge.bg-warning, .badge.badge-warning { background: var(--sfda-warning) !important; color:#fff !important;}
.badge.bg-secondary, .badge.badge-secondary { background: #475569 !important; }
.badge.bg-light, .badge.badge-light { background: #F1F5F9 !important; color: #334155 !important; }
.badge.bg-dark, .badge.badge-dark { background: #0F172A !important; }

.progress {
    background: #EEF2F7 !important;
    border-radius: 999px;
    height: 10px;
}
.progress-bar {
    background: linear-gradient(90deg, var(--sfda-primary) 0%, var(--sfda-accent) 100%) !important;
    border-radius: 999px;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--sfda-border) !important;
    border-radius: var(--sfda-radius-sm) !important;
    padding: 4px 10px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: var(--sfda-radius-sm) !important;
    border: 1px solid var(--sfda-border) !important;
    background: #fff !important;
    margin-inline-start: 4px;
    color: var(--sfda-text) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: linear-gradient(135deg, var(--sfda-primary) 0%, var(--sfda-primary-hover) 100%) !important;
    border-color: var(--sfda-primary) !important;
    color: #fff !important;
}

.swal2-popup {
    border-radius: var(--sfda-radius-md) !important;
    font-family: 'IBMPlexSansArabic', Tahoma, sans-serif !important;
}

.swal2-actions .swal2-confirm {
    background-color: var(--sfda-primary) !important;
    border-color: var(--sfda-primary) !important;
    border-radius: var(--sfda-radius-sm) !important;
}

.swal2-actions .swal2-confirm:hover {
    background-color: var(--sfda-primary-hover) !important;
}

.dropify-wrapper {
    border: 1px dashed #A7F3D0 !important;
    background: var(--sfda-primary-soft-2) !important;
    border-radius: var(--sfda-radius-md) !important;
}

.bootstrap-select .dropdown-toggle {
    border: 1px solid var(--sfda-border) !important;
    border-radius: var(--sfda-radius-sm) !important;
    background: #fff !important;
}

.select2-container .select2-selection--single,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border: 1px solid var(--sfda-border) !important;
    border-radius: var(--sfda-radius-sm) !important;
    background: #fff !important;
    min-height: 38px;
}

.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--sfda-primary) !important;
    box-shadow: 0 0 0 3px rgba(27, 131, 84, 0.10) !important;
}

.nav-pills .nav-link {
    border-radius: var(--sfda-radius-sm) !important;
    color: var(--sfda-text);
    font-weight: 700;
    margin-inline-end: 6px;
}

.nav-pills .nav-link.active,
.nav-pills .nav-link:hover {
    background: var(--sfda-primary);
    color: #fff;
}

.list-group-item {
    border: 1px solid var(--sfda-border);
    background: #fff;
    border-radius: var(--sfda-radius-sm) !important;
    margin-bottom: 8px;
    color: var(--sfda-text);
}
.list-group-item.active {
    background: var(--sfda-primary);
    border-color: var(--sfda-primary);
    color: #fff;
}

.btn-info, .btn-info:focus { background: #0F766E !important; border-color: #0F766E !important; color:#fff !important;}
.btn-info:hover, .btn-info:active { background: #115E59 !important; border-color: #115E59 !important; }

.btn-warning, .btn-warning:focus { background: #D97706 !important; border-color: #D97706 !important; color:#fff !important;}
.btn-warning:hover, .btn-warning:active { background: #B45309 !important; border-color: #B45309 !important; }

.btn-danger, .btn-danger:focus { background: #DC2626 !important; border-color: #DC2626 !important; color:#fff !important;}
.btn-danger:hover, .btn-danger:active { background: #B91C1C !important; border-color: #B91C1C !important; }

.btn-secondary, .btn-secondary:focus { background: #475569 !important; border-color: #475569 !important; color:#fff !important;}
.btn-secondary:hover, .btn-secondary:active { background: #334155 !important; border-color: #334155 !important; }

.btn-dark, .btn-dark:focus { background: #0F172A !important; border-color: #0F172A !important; color:#fff !important;}
.btn-dark:hover, .btn-dark:active { background: #020617 !important; border-color: #020617 !important; }

.btn-outline-warning,
.btn-outline-danger,
.btn-outline-info,
.btn-outline-secondary { border-radius: var(--sfda-radius-sm) !important; font-weight: 700;}

.btn-block { border-radius: var(--sfda-radius-sm) !important; }

.text-success { color: #059669 !important; }
.text-info    { color: #0891B2 !important; }
.text-warning { color: #D97706 !important; }
.text-danger  { color: #DC2626 !important; }
.text-dark    { color: var(--sfda-text) !important; }
.text-muted   { color: var(--sfda-muted) !important; }

.bg-primary   { background-color: var(--sfda-primary) !important; }
.bg-success   { background-color: #059669 !important; }
.bg-info      { background-color: #0F766E !important; }
.bg-warning   { background-color: #F59E0B !important; }
.bg-danger    { background-color: #EF4444 !important; }
.bg-secondary { background-color: #475569 !important; }
.bg-light     { background-color: var(--sfda-primary-soft-2) !important; }
.bg-dark      { background-color: #0F172A !important; }

.content > .container-fluid > .row:last-child {
    margin-bottom: 0;
}

.dataTables_wrapper { padding-bottom: 6px; }

.table td, .table th { vertical-align: middle; }
.table th { font-weight: 800; }

.alert_div {
    margin-bottom: 18px;
    position: relative;
}

.alert_div .row p {
    background: #FEF2F2;
    border: 1px solid #FECACA;
    color: #991B1B;
    padding: 10px 14px;
    border-radius: var(--sfda-radius-sm);
    margin-bottom: 8px;
    font-weight: 600;
}

.sfda-page-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.account-pages {
    background:
      radial-gradient(circle at 20% 20%, rgba(27, 131, 84, 0.18) 0%, rgba(27, 131, 84, 0) 45%),
      radial-gradient(circle at 80% 10%, rgba(233, 196, 106, 0.22) 0%, rgba(233, 196, 106, 0) 40%),
      linear-gradient(135deg, #F7FDF8 0%, #EEF9F2 100%);
    min-height: 100vh;
    padding-top: 32px;
}

.account-pages .card.bg-pattern {
    border-radius: var(--sfda-radius-lg);
    border: 1px solid var(--sfda-border);
    box-shadow: 0 28px 70px rgba(12, 82, 50, 0.18);
    overflow: hidden;
    position: relative;
    background: #fff;
}

.account-pages .card.bg-pattern::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 6px;
    background: linear-gradient(90deg, var(--sfda-primary) 0%, var(--sfda-accent) 100%);
}

.account-pages .auth-header {
    text-align: center;
    margin-bottom: 12px;
}

.account-pages .auth-header .sfda-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--sfda-primary-soft);
    color: var(--sfda-primary-dark);
    font-weight: 800;
    font-size: 13px;
    margin-bottom: 10px;
}

.account-pages .auth-header h2 {
    margin: 0 0 4px;
    font-weight: 800;
    color: var(--sfda-text);
}

.account-pages .auth-header p {
    color: var(--sfda-muted);
    font-weight: 600;
    margin: 0;
}

.account-pages .footer.footer-alt {
    color: var(--sfda-muted) !important;
    font-weight: 600;
}

.error-page-wrap {
    min-height: 100vh;
    background:
      radial-gradient(circle at 20% 20%, rgba(27, 131, 84, 0.18) 0%, rgba(27, 131, 84, 0) 45%),
      linear-gradient(135deg, #F7FDF8 0%, #EEF9F2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
}
.error-page-box {
    background: #fff;
    border-radius: var(--sfda-radius-lg);
    border: 1px solid var(--sfda-border);
    box-shadow: var(--sfda-shadow-md);
    padding: 40px;
    max-width: 620px;
    width: 100%;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.error-page-box::before {
    content:"";
    position:absolute; top:0; right:0; left:0; height:6px;
    background: linear-gradient(90deg, var(--sfda-primary) 0%, var(--sfda-accent) 100%);
}
.error-page-box h1 {
    font-size: 72px;
    font-weight: 900;
    margin: 0;
    background: linear-gradient(135deg, var(--sfda-primary) 0%, var(--sfda-accent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.error-page-box h2 { font-weight: 800; color: var(--sfda-text); margin: 8px 0 10px;}
.error-page-box p  { color: var(--sfda-muted); font-weight: 600; margin: 0 0 20px;}

@media (max-width: 991.98px) {
    .content-page {
        margin-inline-start: 0;
        padding: 16px;
    }
}