:root {
    --primary: #76bc21;
    --primary-dark: #5e9a1b;

    --secondary: #8a1a9b;
    --secondary-dark: #6f147d;

    --accent: #a855f7;
    --accent-dark: #8b3fd1;
    
        --neutral: #4b5563;       
    --neutral-dark: #374151;  
}

[x-cloak] {
    display: none !important;
}

.btn {
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    color: #fff;
    transition: background-color .2s ease, filter .2s ease;
}
.btn-primary {
    background-color: var(--primary);
    color: #fff;
}

.btn-primary:hover {
    background-color: var(--primary-dark);
}

.btn-secondary {
    background-color: var(--secondary);
    color: #fff;
}

.btn-secondary:hover {
    background-color: var(--secondary-dark);
}

.btn-accent {
    background-color: var(--accent);
    color: #fff;
}

.btn-accent:hover {
    background-color: var(--accent-dark);
}

.btn-neutral {
    background-color: var(--neutral);
}

.btn-neutral:hover {
    background-color: var(--neutral-dark);
}

.text-primary {
    color: var(--primary);
}

.text-primary:hover {
    color: var(--primary-dark);
}

.menu-item.active {
    background-color: rgba(118, 188, 33, 0.12);
    color: var(--primary);
}

.menu-item.active i {
    color: var(--primary);
}

.badge-primary {
    background-color: var(--primary);
    color: #fff;
}

.btn {
    transition: background-color .2s ease;
}

.btn-primary {
    background: var(--primary);
}

.btn-primary:hover {
    filter: brightness(0.9); /* يغمق تلقائي */
}

.header-gradient {
    background: linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );
    color: #fff;
}


.header-gradient,
.header-gradient-soft {
    position: relative;
    overflow: hidden;
}

.header-gradient::after,
.header-gradient-soft::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at top right,
        rgba(255,255,255,.15),
        transparent 60%
    );
}


.soft-bg {
    background: linear-gradient(
        135deg,
        rgba(118, 188, 33, 0.12),   /* primary soft */
        rgba(168, 85, 247, 0.10),  /* accent soft */
        rgba(138, 26, 155, 0.08)   /* secondary softer */
    );
}

/* الصفحة */
.login-page {
    min-height: 95vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(
        120deg,
        rgba(118, 188, 33, 0.10),
        rgba(168, 85, 247, 0.08),
        rgba(255, 255, 255, 0.95)
    );
    position: relative;
    overflow: hidden;
}

/* نقاط خفيفة بالخلفية */
.login-page::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
    background-size: 28px 28px;
    opacity: .25;
}

/* كرت الدخول */
.login-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 380px;
    background: rgba(255,255,255,.95);
    border-radius: 16px;
    padding: 28px;
    box-shadow: 0 20px 50px rgba(0,0,0,.25);
}

/* الحقول */
.login-input {
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    outline: none;
    transition: .2s;
}

.login-input:focus {
    border-color: #8a1a9b;
    box-shadow: 0 0 0 3px rgba(138,26,155,.15);
}

/* زر الدخول */
.login-btn {
    width: 100%;
    padding: 10px;
    border-radius: 12px;
    background: linear-gradient(135deg, #8a1a9b, #a855f7);
    color: #fff;
    font-weight: 500;
    transition: .2s;
}

.login-btn:hover {
    filter: brightness(.95);
}

.animate-enter {
    animation: fadeSlideUp .7s ease forwards;
}

@keyframes fadeSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px) scale(.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


/* ===============================
   Beneficiary Page – Brand Theme
================================ */

/* Page background */
.beneficiary-page {
    background: linear-gradient(180deg, #f4faef 0%, #ffffff 60%);
}

/* Main card */
.beneficiary-card {
    background: #fff;
    border-top: 4px solid #76bc21;
    border-radius: 1.25rem;
    box-shadow: 0 20px 40px rgba(0,0,0,0.06);
    padding: 20px;
}

/* Page title */
.page-title {
    color: #8a1a9b;
}



/* Section titles */
.section-title {
    color: #76bc21;
    font-weight: 600;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: .5rem;
    margin-bottom: 1rem;
}

/* Info cards */
.info-card {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: .75rem;
    padding: 1rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}

/* Accent blocks (session notes مثلاً) */
.accent-card {
    background: #f7f2fd;
    border: 1px solid #e5d9fb;
    border-radius: .75rem;
    padding: .75rem;
}

/* ===============================
   Table – Brand Style
================================ */

.table-head {
    background: linear-gradient(90deg, #f3f9ee, #f7f2fd);
    color: #6b7280;
}

.table-head th {
    padding: 12px;
    font-weight: 600;
    text-align: start;
}

.table-head a {
    color: #8a1a9b;
    text-decoration: none;
}

.table-body td {
    padding: 12px;
    border-bottom: 1px solid #e5e7eb;
}

.table-row {
    transition: background-color .15s ease;
}

.table-row:hover {
    background-color: #f9fafb;
}

/* Badges */
.badge {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

/*
.badge-primary {
    background: #eef7e6;
    color: #76bc21;
}
*/

.badge-secondary {
    background: #f3e8f7;
    color: #8a1a9b;
}

/* Status */
.badge-status.active {
    background: #e8f7ed;
    color: #16a34a;
}

.badge-status.inactive {
    background: #fdecec;
    color: #dc2626;
}

/* Actions */
.action-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Empty */
.empty-state {
    text-align: center;
    padding: 40px;
    color: #9ca3af;
}

.sort-link{
    color:#8a1a9b;
    font-weight:600;
    text-decoration:none;
}
.sort-link:hover{
    text-decoration:underline;
}
.sort-link.active{
    color:#76bc21;
}










    .required-star {
        color: red;
        font-weight: bold;
        margin-right: 3px;
    }

select {
    color: #1f2937 !important; /* gray-800 */
    background-color: #ffffff !important;
}

select option {
    color: #1f2937 !important;
    background-color: #ffffff !important;
}


    .form-input {
        @apply w-full border border-gray-300 rounded-md px-3 py-2
               focus:ring-2 focus:ring-blue-500 focus:border-blue-500;
    }



.menu-item {
    @apply flex items-center gap-3 px-4 py-3 rounded-xl transition
           text-gray-600 hover:bg-gray-100 hover:text-gray-900;
    font-size: 14px;
}

/* الأيقونات */
.menu-item i {
    @apply text-lg text-gray-400 transition;
}

/* عند hover */
.menu-item:hover i {
    @apply text-gray-600;
}

/* العنصر النشط */
.menu-item.active,
.menu-item[aria-current="page"] {
    @apply bg-gray-100 text-gray-900 font-medium;
}

.menu-item.active i {
    @apply text-gray-700;
}

/* Submenu */
.submenu {
    @apply flex items-center gap-3 px-4 py-2 rounded-lg text-sm
           text-gray-500 hover:bg-gray-50 hover:text-gray-800 transition;
}

.submenu i {
    @apply text-base text-gray-400;
}

.submenu:hover i {
    @apply text-gray-600;
}

/* مسافة إضافية قبل الأقسام الكبيرة */
.sidebar-section {
    margin-top: 0.75rem;
}

/* اللون الافتراضي للأيقونات */
.menu-item i,
.submenu i {
    color: #9CA3AF; /* رمادي فاتح (gray-400) */
}

/* عند المرور Hover */
.menu-item:hover i,
.submenu:hover i {
    color: #6B7280; /* رمادي أغمق (gray-500) */
}

/* العنصر النشط */
.menu-item.active i {
    color: #4B5563; /* رمادي داكن (gray-600) */
}


.card-soft,
.beneficiary-card {
    transition: transform .2s ease, box-shadow .2s ease;
}



.table-row.completed {
    background: #f0fdf4;
}

.table-row.cancelled {
    background: #fef2f2;
}

.table-row.pending {
    background: #fffbeb;
}

.badge {
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
    letter-spacing: .3px;
}

.page-header-accent {
    border-right: 4px solid var(--secondary);
    padding-right: 1rem;
}

.empty-state {
    font-size: 15px;
    background: linear-gradient(
        135deg,
        rgba(118,188,33,.08),
        rgba(168,85,247,.08)
    );
    border-radius: 12px;
}

.input-error {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 3px rgba(220,38,38,.15);
}

.label-soft {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--neutral-dark);
    margin-bottom: 4px;
}

.card-soft {
    background: #fff;
    border-radius: 1.25rem;
    padding: 1.5rem;
    box-shadow: 0 10px 25px rgba(0,0,0,.06);
}

.table-head th {
    background: linear-gradient(90deg,#f4faef,#f7f2fd);
}

.badge-soft {
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}

.badge-soft.beneficiary {
    background: #eef4ff;
    color: #355cff;
}

.badge-soft.dependent {
    background: #ecfdf5;
    color: #059669;
}

/* ========== Inputs / Selects (Soft – Borderless) ========== */
.input-soft {
    width: 100%;
    background: #f9fafb;           /* خلفية خفيفة */
    border: 1px solid #e5e7eb;
    outline: none;
    padding: 10px 12px;
    font-size: 14px;
    border-radius: 10px;            /* ناعم بدون مبالغة */
    color: #111827;
    transition: all .2s ease;
}

/* Placeholder */
.input-soft::placeholder {
    color: #9ca3af;
}

/* Focus */
.input-soft:focus {
    border-color: #8a1a9b;
    box-shadow: 0 0 0 3px rgba(138,26,155,.15);
}

/* Select arrow fix */
select.input-soft {
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, #6b7280 50%),
        linear-gradient(135deg, #6b7280 50%, transparent 50%);
    background-position:
        calc(100% - 18px) 55%,
        calc(100% - 13px) 55%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 36px;
}

.btn-danger {
    background-color: #dc2626; /* red-600 */
    color: #fff;
}

.btn-danger:hover {
    background-color: #b91c1c; /* red-700 */
}

.p-1 {
    width: 200px;
}