/* Start WaslCard */
.card-anim-default {
    transition: transform .18s ease, box-shadow .18s ease;
}

    .card-anim-default:hover {
        transform: translateY(-2px);
    }

.card-anim-ads {
    transition: transform .2s ease, box-shadow .2s ease;
}

    .card-anim-ads:hover {
        transform: scale(1.02) translateY(-2px);
    }

.card-anim-promo {
    transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}

    .card-anim-promo:hover {
        transform: rotate(-.3deg) translateY(-3px);
        filter: brightness(1.03);
    }

.card-anim-catalog {
    transition: transform .2s ease, box-shadow .2s ease;
}

    .card-anim-catalog:hover {
        transform: translateY(-3px);
    }

.card-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-text-area {
    min-height: 60px;
}

.cardPaper:hover {
    transform: translateY(-7px);
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.stat-card {
    transition: all 0.3s ease;
}

    .stat-card:hover {
        transform: translateY(-2px);
        box-shadow: 0px 10px 20px -5px rgba(0, 0, 0, 0.15);
    }

.card-title-1line {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.card-title-2line {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* هذا اللي يحل النص اللي بدون مسافات */
    overflow-wrap: anywhere; /* الأفضل */
    word-break: break-word; /* احتياط */
    min-width: 0; /* مهم داخل flex */
}

/* End WaslCard */

/* Start Image Preview Dialog*/
.WidthImage .mud-dialog {
    width: fit-content !important;
    max-width: none !important;
}

.WidthImage .mud-dialog-title {
    display: revert !important;
}
.WidthImage .mud-dialog-content {
    width: fit-content !important;
}
.preview-loading .mud-dialog-content {
    min-width: 70vh;
    min-height: 60vh;
    display:flex;
    justify-content:center
}
.preview-loading .mud-dialog-title {
    display: revert !important;
}

/* End Image Preview Dialog*/

/* Start Competition Card*/
.totle-card {
    padding: 8px; /* p-2 */
    border-radius: 12px; /* rounded-xl */
    border: 1px solid #f1f5f9; /* border-slate-100 */
    background: #f8fafc; /* bg-slate-50 */
}

.totle-name {
    font-size: 10px; /* text-[10px] */
    font-weight: 700; /* font-bold */
    color: #94a3b8; /* text-slate-400 */
    text-transform: uppercase; /* uppercase */
    text-align: center;
    margin-bottom: 4px; /* mb-1 */
    line-height: 1.1; /* leading-tight */
    min-height: 24px; /* h-6 */
    display: flex;
    align-items: center;
    justify-content: center;
}

.totle-number {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* font-mono */
    font-weight: 700; /* font-bold */
    color: #334155; /* text-slate-700 */
}


/* name: text-sm font-bold text-slate-800 */
.name-text {
    font-weight: 700;
    color: #1f2937; /* قريب من slate-800 */
}

.status-text {
    font-size: 10px !important;
    font-weight: 700 !important;
}

/* flex flex-col gap-1 */
.date-col {
    gap: 4px;
}

/* text-[10px] font-bold text-slate-400 uppercase tracking-wider */
.date-label {
    font-weight: 700 !important;
    color: #94a3b8 !important; /* slate-400 */
    text-transform: uppercase;
    letter-spacing: .08em; /* tracking-wider */
}

/* flex items-center text-xs font-medium px-2 py-1.5 rounded-lg border */
.date-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 500;
    padding: 6px 8px; /* قريب من px-2 py-1.5 */
    border-radius: 10px; /* rounded-lg */
    border: 1px solid;
}

/* Success: bg-emerald-50 text-emerald-700 border-emerald-100 */
.date-success {
    background: #ecfdf5;
    border-color: #d1fae5;
    color: #047857;
}

/* Error: bg-rose-50 text-rose-700 border-rose-100 */
.date-error {
    background: #fff1f2;
    border-color: #ffe4e6;
    color: #be123c;
}

/* icon size like w-3.5 h-3.5 */
.date-icon {
    font-size: 14px !important;
}

/* icon colors */
.icon-success {
    color: #10b981 !important;
}
/* emerald-500 */
.icon-error {
    color: #f43f5e !important;
}
/* rose-500 */

/* inherit text color nicely */
.date-value {
    color: inherit;
}
/* يخلي الكرت يمدد داخل MudItem */
.totle-fill {
    width: 100%;
    height: 100%;
    min-height: 92px; /* عدّلها لو تبغى أطول/أقصر */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* نفس الستايل */
.totle-card {
    padding: 8px;
    border-radius: 12px;
    border: 1px solid #f1f5f9;
    background: #f8fafc;
}

/* العنوان ثابت */
.totle-name {
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #94a3b8 !important;
    text-transform: uppercase;
    line-height: 1.1;
    min-height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* أهم جزء: الرقم لا يكسر سطر */
.totle-number {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis; /* إذا طول: 123123… */
    white-space: nowrap; /* يمنع سطرين */
    text-align: center;
}
.empty-state {
    min-height: 45vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.empty-state__icon {
    animation: floaty 2.5s ease-in-out infinite;
    opacity: 0.95;
    font-size: 3rem !important;
}

@keyframes floaty {
    0%, 100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-6px);
    }
}
/* End Competition Card*/

/* Start Status Card*/
.StatusCard .mud-card {
    border: 1px solid #E9EDF4 !important;
    border-radius: 8px;
    width: 100%;
}

.StatusCard .mud-card-actions {
    padding: 0px !important;
}
/* End Status Card*/


/* Start Avatar Component */
.app-avatar,
.contact-avatar,
.beneficiary-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

    .app-avatar .mud-avatar-content,
    .contact-avatar .mud-avatar-content,
    .beneficiary-avatar .mud-avatar-content {
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        letter-spacing: 1px;
        line-height: 1;
        white-space: nowrap;
    }
/* End Avatar Component */

/* Start Beneficiary Component */

.summary-card {
    border-radius: 16px;
    border-color: rgba(0, 0, 0, 0.08);
    background: #fff;
}

.beneficiary-summary-card {
    background: linear-gradient(180deg, #fafafa 0%, #ffffff 100%);
    overflow: hidden;
}

.section-label {
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
    display: inline-block;
}

/*.beneficiary-avatar {
    background: rgba(25, 118, 210, 0.10);
    color: var(--mud-palette-primary);
}*/
.beneficiary-avatar {
    width: 64px;
    height: 64px;
    background: rgba(25, 118, 210, 0.10);
    color: var(--mud-palette-primary);
    box-shadow: inset 0 0 0 1px rgba(25, 118, 210, 0.08);
}
.contact-card {
    border-radius: 12px;
    border-color: rgba(0, 0, 0, 0.08);
    min-height: 30px;
    transition: all 0.2s ease;
}

    .contact-card:hover {
        border-color: rgba(25, 118, 210, 0.22);
        background: rgba(25, 118, 210, 0.03);
    }

.contact-avatar {
    background: rgba(25, 118, 210, 0.12);
    color: var(--mud-palette-primary);
}

.contact-avatar-text {
    font-size: 0.70rem;
    font-weight: 700;
}

.contact-name-wrapper {
    flex: 1;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

    .contact-name-wrapper .mud-tooltip-root.mud-tooltip-inline {
        display: block;
        width: 100%;
        max-width: 100%;
    }

    .contact-name-wrapper .mud-tooltip-root {
        width: 100%;
        max-width: 100%;
    }

.contact-name {
    display: block;
    width: 100%;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}

.contact-remove-btn {
    opacity: 0.75;
}

    .contact-remove-btn:hover {
        opacity: 1;
    }

.beneficiary-type {
    max-width: 100%;
    display: block;
}

.text-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.h-100 {
    height: 100%;
}

.min-width-0 {
    min-width: 0;
}

.beneficiary-content {
    width: 100%;
    min-width: 0;
}

.beneficiary-name {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.empty-contacts-state {
/*    min-height: 140px;*/
    border-radius: 14px;
    border-style: dashed;
    color: var(--mud-palette-text-secondary);
}
.beneficiary-name-wrapper .mud-tooltip-root.mud-tooltip-inline {
    display: block;
    width: 100%;
    max-width: 100%;
}

.beneficiary-name-wrapper .mud-tooltip-root {
    width: 100%;
    max-width: 100%;
}
/* End Beneficiary Component*/


/* لون النص الثانوي - يستخدم للنصوص التوضيحية أو الوصفية */
.text-secondary {
    color: var(--mud-palette-text-secondary);
}

/* نص أقل أهمية - مثل الملاحظات الصغيرة أو المعلومات الإضافية */
.text-muted {
    opacity: .7;
}

/* نص خفيف جدًا - يستخدم للتفاصيل الثانوية جدًا مثل timestamps */
.text-soft {
    opacity: .5;
}

/* نص قوي - يستخدم للعناوين الصغيرة أو القيم المهمة */
.text-strong {
    font-weight: 600;
}
.text-bold {
    font-weight: 700;
}
.section-card {
    border-radius: 12px;
    transition: all 0.2s ease;
}

    .section-card:hover {
        border-color: rgba(25, 118, 210, 0.25);
    }

.section-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    padding-bottom: 12px;
}

.field-block {
    margin-bottom: 4px;
}

.field-label {
    display: inline-block;
    margin-bottom: 6px;
    font-weight: 600;
}
.view-container {
    position: relative;
    overflow: hidden;
}

.view {
    transition: all 0.3s ease;
}

    .view.hidden {
        opacity: 0;
        transform: translateY(10px);
        pointer-events: none;
        position: absolute;
        width: 100%;
    }

    .view.visible {
        opacity: 1;
        transform: translateY(0);
        position: relative;
    }
.segment {
    position: relative;
    display: inline-flex;
    background: #f2f2f2;
    padding: 2px;
    border-radius: 8px;
    overflow: hidden;
}

/* المؤشر المتحرك */
.slider {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 50%;
    height: calc(100% - 4px);
    background: var(--mud-palette-secondary);
    border-radius: 6px;
    transition: transform 0.3s ease;
    z-index: 0;
}

    /* يتحرك لليمين */
    .slider.to-right {
        transform: translateX(100%);
    }

/* خلي الأزرار فوق */
.segment .mud-icon-button {
    z-index: 1;
}

.seg-item {
    background: transparent;
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.75rem;
    cursor: pointer;
    color: #848484;
    transition: all 0.25s ease;
}

    .seg-item.active {
        background: var(--mud-palette-secondary);
        color: black;
        box-shadow: 0 1px 2px rgba(0,0,0,0.10);
        font-weight: 500;
        transform: scale(1.05); /* 👈 يعطي إحساس ضغط */
    }

    .seg-item:hover {
        transform: scale(1.08);
    }
/* .seg-item {
        background: transparent;
        border: none;
        padding: 6px 12px;
        border-radius: 6px;
        font-size: 0.75rem;
        cursor: pointer;
        color: #848484;
    }

        .seg-item.active {
            background: var(--mud-palette-secondary);
            color: black;
            box-shadow: 0 1px 2px rgba(0,0,0,0.10);
            font-weight: 500;
        } */
.Archives-grid {
    display: grid;
    /*    grid-template-columns: repeat(5, 1fr);*/
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

/* === Archives Grid/List === */
.archives-view {
    padding-top: 12px;
    padding-bottom: 18px;
}

.archives-grid-view {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}

.archives-card {
    border-radius: 14px !important;
    padding: 12px;
    min-height: 170px;
    display: flex;
    flex-direction: column;
}

.archives-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.archives-card-title {
    font-weight: 600;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
    word-break: break-word;
}

.archives-card-meta {
    margin-top: 2px;
    font-size: 12px;
}

.archives-card .archives-item-actions {
    opacity: 0;
    transform: translateY(-2px);
    transition: opacity .15s ease, transform .15s ease;
}

.archives-card:hover .archives-item-actions {
    opacity: 1;
    transform: translateY(0);
}

.archives-list-view {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.archives-list-row {
    padding: 10px 12px !important;
    border-radius: 14px !important;
    transition: background-color .15s ease, box-shadow .15s ease;
}

    .archives-list-row:hover {
        background: rgba(94, 118, 202, 0.05);
        box-shadow: rgba(0, 0, 0, 0.10) 0px 4px 14px;
    }

.archives-row-grid {
    display: grid;
    grid-template-columns: 1fr 140px 140px 44px;
    align-items: center;
    column-gap: 14px;
    min-width: 0;
}

.archives-row-main {
    display: flex;
    gap: 12px;
    align-items: center;
    min-width: 0;
}

.archives-row-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.archives-row-text {
    min-width: 0;
}

.archives-row-name {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.archives-row-subtitle {
    margin-top: 2px;
}

.archives-row-actions {
    display: flex;
    justify-content: flex-end;
}

.archives-list-row .archives-item-actions {
    opacity: 0;
    transition: opacity .15s ease;
}

.archives-list-row:hover .archives-item-actions {
    opacity: 1;
}

@media (hover: none) and (pointer: coarse) {
    .archives-card .archives-item-actions,
    .archives-list-row .archives-item-actions {
        opacity: 1 !important;
        transform: none !important;
    }
}

@media (max-width: 700px) {
    .archives-row-grid {
        grid-template-columns: 1fr 44px;
        grid-template-areas:
            "main actions"
            "size status";
    }

    .archives-row-main {
        grid-area: main;
    }

    .archives-row-actions {
        grid-area: actions;
    }

    .archives-row-size {
        grid-area: size;
    }

    .archives-row-status {
        grid-area: status;
    }
}

.archives-empty {
    padding: 18px;
    border-radius: 14px;
}
.mud-drawer {
    transition: all 0.25s ease-in-out;
}
.selected-item {
    border: 1px solid var(--mud-palette-primary);
    background: #f5f8ff;
}
/*th.mud-table-cell {
    font-size: 12px !important;
}*/

/*Start WasForm Button*/

.Wasl-btn {
    min-width: 106px;
/*    height: 42px;*/
    border-radius: 4px;
/*    font-weight: 600;*/
    white-space: nowrap;
/*    overflow:hidden;*/
}

/* Start Wasl Button */
.was-btn-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    overflow: hidden;
}

.was-btn-spinner {
    flex-shrink: 0;
}

.was-btn-loading-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* End Wasl Button*/

@media (max-width: 600px) {

    .Wasl-btn {
        width: 100%;
        min-width: 100%;
    }
}

/*End WasForm Button*/

/*Start PdfViewerFull page*/

.PdfViewerFull .blazorpdf-pdf__thumbnails {
    padding-left: 0.75rem !important;
    margin-left: 0rem !important;
    background-color: #F0F0F0 !important;
}

.PdfViewerFull .blazorpdf-toolbar {
    align-items: baseline !important;
}

.icontask .mud-button-label .mud-button-icon-start {
    display: inherit;
    margin-left: -4px;
    margin-right: 8px;
    margin-inline-start: -4px;
    color: #343535 !important;
    margin-inline-end: 8px;
}

.icontask .mud-button-label .mud-button-icon-end {
    display: inherit;
    margin-left: 8px;
    margin-right: -4px;
    margin-inline-start: 8px;
    margin-inline-end: -4px;
    color: #343535 !important;
}

.btnGrayOutline .mud-button-outlined {
    border: 1px solid #DDDDDD !important;
}

.ConfPaper {
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
    /* width: 855px; */
    min-width: 330px;
}

.blazorpdf-container,
.blazorpdf-pdf {
    /*height: calc(100vh - 0px);*/
}

@media (max-width: 768px) {
    .textLayer {
        height: auto !important;
        max-height: none !important;
        width: auto !important;
    }
}


.conf-paper {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
    width: min(92vw, 980px);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
}

.conf-paper__content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
}

.conf-paper__text {
    flex: 1 1 auto;
    min-width: 0;
}

    .conf-paper__text .mud-typography {
        word-break: break-word;
    }

.conf-paper__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex: 0 0 auto;
    flex-wrap: nowrap;
}

@media (max-width: 900px) {
    .conf-paper {
        width: min(94vw, 720px);
    }

    .conf-paper__content {
        flex-direction: column;
        align-items: stretch;
    }

    .conf-paper__actions {
        width: 100%;
        justify-content: flex-end;
        flex-wrap: nowrap;
    }
}

@media (max-width: 600px) {
    .conf-paper {
        bottom: 12px;
        width: calc(100vw - 16px);
        border-radius: 14px;
    }

    .conf-paper__actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .PdfViewerFull .blazorpdf-pdf {
        height: 90vh;
    }
}

/*End PdfViewerFull page*/
img {
    opacity: 0.9;
    transition: 0.3s;
}

    img:hover {
        opacity: 1;
        transform: scale(1.05);
    }
.circle-image-container {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    overflow: hidden; /* أهم سطر */

    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #e0e0e0;
    background: #f9f9f9;
}

    .circle-image-container img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* يخلي الصورة تملأ الدائرة بشكل جميل */
    }

/*svg Empty folder */
/* Container for layout (optional, but keeps SVG centered) */
.svg-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

/* Floating animation for the entire SVG */
.folder-illustration {
    width: 100%;
    max-width: 200px;
    height: auto;
    overflow: visible;
    animation: float-folder 4s ease-in-out infinite;
    filter: drop-shadow(0 15px 12px rgba(0, 0, 0, 0.06));
}

/* Sliding animation for the paper inside */
.paper-internal {
    animation: paper-peek 3s ease-in-out infinite;
}

@keyframes float-folder {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

@keyframes paper-peek {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-35px);
    }
}
/*svg Empty folder */
/*.folder-item {
    cursor: grab;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .folder-item:active {
        cursor: grabbing;
    }

.drag-active {
    opacity: 0.9;
    transform: scale(1.05);
}

.drag-ghost {
    opacity: 0.4;
}*/
/* تأثير أثناء سحب العنصر */
.node-dragging {
    opacity: 0.5;
    transform: scale(0.95);
    border: 2px dashed #ffca28 !important;
}

/* تأثير عند المرور فوق مجلد كهدف للإفلات */
.drop-target-active {
    background-color: rgba(255, 202, 40, 0.1) !important;
    border: 2px solid #ffca28 !important;
    transition: all 0.2s ease;
}

/* لتغيير شكل المؤشر عند السحب */
.folder-item {
/*    cursor: grab;*/
}

    .folder-item:active {
        cursor: grabbing;
    }

.fw-bold {
    font-weight: 600;
}


.Archive-Table .mud-table-body td {
    border-bottom: 1px solid #e0e0e0;
    cursor: pointer;
}

.Archive-Table .mud-table-head th {
    border-bottom: 2px solid #d5d5d5;
    background-color: #fafafa;
}

.node-dragging {
    opacity: 0.5;
    border: 2px dashed var(--mud-palette-primary) !important;
    cursor: grabbing !important;
}

.drop-target-active {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.1) !important;
    border: 2px solid var(--mud-palette-primary) !important;
    transform: scale(1.03);
    transition: transform 0.2s ease-in-out;
}

.folder-list .mud-list-item-text p {
    display: contents;
}
/* حاوية الفولدر */
.folder-container {
    perspective: 1500px;
    position: relative;
    width: 150px;
    height: 100px;
    cursor: pointer;
    margin-bottom: 20px;
}

.folder-back {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #d97706; /* amber-600 */
    border-radius: 12px;
    border-top-left-radius: 0;
    transition: all 0.3s ease;
}

    .folder-back::after {
        content: '';
        position: absolute;
        bottom: 99%;
        left: 0;
        width: 50px;
        height: 10px;
        background-color: #d97706;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
    }

.folder-paper {
    position: absolute;
    inset: 4px;
    background-color: #e4e4e7;
    border-radius: 8px;
    transition: all 0.3s ease;
    transform-origin: bottom;
}

.paper-1 {
    background-color: #a1a1aa;
}

.paper-2 {
    background-color: #d4d4d8;
}

.paper-3 {
    background-color: #f4f4f5;
}

.folder-front {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 90px;
    background: linear-gradient(to top, #f59e0b, #fbbf24);
    border-radius: 12px;
    border-top-right-radius: 0;
    transform-origin: bottom;
    transition: all 0.3s ease;
}

/* تأثير الـ Hover */
.folder-card:hover .folder-back {
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

.folder-card:hover .paper-1 {
    transform: rotateX(-20deg);
}

.folder-card:hover .paper-2 {
    transform: rotateX(-30deg);
}

.folder-card:hover .paper-3 {
    transform: rotateX(-38deg);
}

.folder-card:hover .folder-front {
    transform: rotateX(-46deg) translateY(1px);
    box-shadow: inset 0 15px 30px #fbbf24, inset 0 -15px 30px #d97706;
}

.folder-card:hover .folder-front-docu {
    transform: rotateX(-46deg) translateY(1px);
    box-shadow: inset 0 15px 30px #5558b1, inset 0 -15px 30px #3315ce;
}
/* تصميم المستند المتحرك */
.doc-container {
    position: relative;
    width: 100px;
    height: 120px;
    margin-bottom: 20px;
}

.doc-sleeve-back {
    position: absolute;
    inset: 0;
    background-color: #2563eb; /* Blue-600 */
    border-radius: 8px;
    transition: all 0.3s ease;
}

.doc-paper {
    position: absolute;
    inset: 6px;
    background-color: white;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s ease;
    border-top: 3px solid #60a5fa; /* Blue-400 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.doc-sleeve-front {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background-color: rgba(59, 130, 246, 0.9); /* Blue-500 with opacity */
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    backdrop-filter: blur(2px);
}

/* تأثير الانيميشن للمستند */
.folder-card:hover .doc-paper {
    transform: translateY(-35px) rotate(4deg);
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

.folder-card:hover .doc-sleeve-back {
    transform: scale(1.05);
}

/* تنسيق إضافي للمستند ليكون أزرق */
.document-theme .folder-back,
.document-theme .folder-back::after {
    background-color: #1e40af !important; /* Blue-800 */
}

.document-theme .folder-front {
    background: linear-gradient(to top, #2563eb, #60a5fa) !important;
}

    .document-theme .folder-front::after,
    .document-theme .folder-front::before {
        background-color: #60a5fa !important;
    }

/* تعديل الـ Hover للمستند */
.document-theme:hover .folder-front {
    box-shadow: inset 0 15px 30px #60a5fa, inset 0 -15px 30px #1e40af !important;
}

/* ثيم الأرشيف الروت - معدني وذهبي */
.root-theme .folder-back,
.root-theme .folder-back::after {
    background-color: #0f172a !important; /* Slate-900 */
}

.root-theme .folder-front {
    background: linear-gradient(to top, #1e293b, #475569) !important;
}

    .root-theme .folder-front::after,
    .root-theme .folder-front::before {
        background-color: #475569 !important;
    }

.root-theme:hover .folder-front {
    box-shadow: inset 0 15px 30px #94a3b8, inset 0 -15px 30px #0f172a !important;
}

/* لون الورق الداخلي للأرشيف */
.root-theme .paper-1 {
    background-color: #fde68a !important;
}
/* Amber-200 */
.root-theme .paper-2 {
    background-color: #cbd5e1 !important;
}
/* Slate-300 */
.root-theme .paper-3 {
    background-color: #ffffff !important;
}



/* حاوية الملف الرأسية */
.file-portrait-container {
    perspective: 1000px;
    position: relative;
    width: 110px; /* عرض ضيق ليوحي بالورقة */
    height: 150px; /* ارتفاع طولي */
}

/* الغلاف الخلفي */
.file-portrait-back {
    position: absolute;
    inset: 0;
    background-color: #cbd5e1;
    border-radius: 4px;
}

/* الأوراق البيضاء بالداخل */
.file-portrait-paper {
    position: absolute;
    inset: 2px;
    background-color: white;
    border-radius: 2px;
    transition: all 0.3s ease;
    transform-origin: bottom;
}

/* الغلاف الأمامي الملون */
.file-portrait-front {
    position: absolute;
    inset: 0;
    border-radius: 4px;
    transform-origin: bottom;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    align-items: center;
    justify-content: center;
    /* شكل الورقة بكسرة علوية */
    clip-path: polygon(0% 0%, 75% 0%, 100% 18%, 100% 100%, 0% 100%);
}

/* كسرة الورقة (Dog-ear) */
.file-dog-ear {
    position: absolute;
    top: 0;
    right: 0;
    width: 28px;
    height: 28px;
    background-color: rgba(0,0,0,0.2);
}

/* الأنيميشن */
.folder-card:hover .file-portrait-front {
    transform: rotateX(-40deg) translateY(2px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.folder-card:hover .file-portrait-paper {
    transform: rotateX(-20deg);
}



.context-menu-paper {
    min-width: 140px;
/*    border: 1px solid rgba(0,0,0,0.08);*/
    animation: contextMenuFadeIn 0.12s ease-out;
}

@keyframes contextMenuFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-4px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.context-menu .mud-list-item-text {
    flex: 1 1 auto;
    display: flex;
    justify-content: start;
    min-width: 0;
    margin-top: 4px;
    margin-bottom: 4px;
    cursor:pointer;
}
.context-menu .mud-list-item-gutters {
    padding-left: 8px;
    padding-right: 8px;
}
.mud-menu-item {
    padding-left: 8px;
    padding-right: 8px;
}
.mud-list-item-gutters {
    padding-left: 8px;
    padding-right: 8px;
}

.mud-list-padding {
    padding: 4px !important;
}
.Archive .mud-list {
    min-width: 140px;
/*    border: 1px solid rgba(0, 0, 0, 0.08);*/
}
.app-menu-item:hover {
    background-color: rgba(0,0,0,0.04);
    cursor: pointer;
}
.Archive.mud-list {
    min-width: 140px;
    /*    border: 1px solid rgba(0, 0, 0, 0.08);*/
}
/* الحاوية الصغيرة */
.folder-mini {
    perspective: 500px;
    position: relative;
    width: 45px;  /* عرض صغير جداً للجداول */
    height: 32px;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
}

.folder-back-mini {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #d97706;
    border-radius: 4px;
    border-top-left-radius: 0;
    transition: all 0.3s ease;
}

.folder-back-mini::after {
    content: '';
    position: absolute;
    bottom: 98%;
    left: 0;
    width: 15px; /* تصغير اللسان العلوي */
    height: 4px;
    background-color: #d97706;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

.paper-mini {
    position: absolute;
    inset: 2px;
    background-color: #e4e4e7;
    border-radius: 2px;
    transition: all 0.3s ease;
    transform-origin: bottom;
}

.folder-front-mini {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 28px;
    background: linear-gradient(to top, #f59e0b, #fbbf24);
    border-radius: 4px;
    border-top-right-radius: 0;
    transform-origin: bottom;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* التنسيق الأزرق للمستندات */
.folder-front-docu-mini {
    background: linear-gradient(to top, #2563eb, #60a5fa);
}
.folder-back-docu-mini {
    background-color: #1e40af;
}
.folder-back-docu-mini::after {
    background-color: #1e40af;
}

/* تأثير الـ Hover عند وضع الماوس على الصف أو الحاوية */
.folder-mini:hover .paper-mini {
    transform: rotateX(-20deg) translateY(-2px);
}

.folder-mini:hover .folder-front-mini {
    transform: rotateX(-40deg);
}

.Archive-Table .mud-table-row:hover .paper-mini {
    transform: rotateX(-20deg) translateY(-2px);
}

.Archive-Table .mud-table-row:hover .folder-front-mini {
    transform: rotateX(-40deg);
}

/* الحاوية الصغيرة للملف الرأسي */
.file-portrait-mini {
    perspective: 600px;
    position: relative;
    width: 32px; /* عرض صغير جداً */
    height: 42px; /* ارتفاع متناسق */
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
}

/* الغلاف الخلفي الصغير */
.file-portrait-back-mini {
    position: absolute;
    inset: 0;
    background-color: #cbd5e1;
    border-radius: 3px;
}

/* الأوراق الداخلية */
.file-portrait-paper-mini {
    position: absolute;
    inset: 1px;
    background-color: white;
    border-radius: 2px;
    transition: all 0.3s ease;
    transform-origin: bottom;
}

/* الغلاف الأمامي الملون */
.file-portrait-front-mini {
    position: absolute;
    inset: 0;
    border-radius: 3px;
    transform-origin: bottom;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    align-items: center;
    justify-content: center;
    /* الحفاظ على قصة الزاوية */
    clip-path: polygon(0% 0%, 70% 0%, 100% 22%, 100% 100%, 0% 100%);
}

/* كسرة الورقة الصغرى */
.file-dog-ear-mini {
    position: absolute;
    top: 0;
    right: 0;
    width: 10px; /* تصغير الكسرة */
    height: 10px;
    background-color: rgba(0,0,0,0.15);
    /* جعل الكسرة تبدو كمثلث مطوي */
    clip-path: polygon(0% 0%, 0% 100%, 100% 100%);
}

/* تأثير الـ Hover */
.file-portrait-mini:hover .file-portrait-front-mini {
    transform: rotateX(-35deg) translateY(1px);
}

.file-portrait-mini:hover .file-portrait-paper-mini {
    transform: rotateX(-15deg);
}


.Archive-Table .mud-table-row:hover .file-portrait-front-mini {
    transform: rotateX(-35deg) translateY(1px);
}

.Archive-Table .mud-table-row:hover .file-portrait-paper-mini {
    transform: rotateX(-15deg);
}
/* الحاوية الصغيرة جداً */
.folder-mini-inv {
    perspective: 500px;
    position: relative;
    width: 42px; /* عرض متناسق للجدول */
    height: 30px; /* ارتفاع متناسق */
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
}

/* الجزء الخلفي */
.folder-back-mini-inv {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #d97706; /* amber-600 */
    border-radius: 3px;
    border-top-left-radius: 0;
    transition: all 0.3s ease;
}

    .folder-back-mini-inv::after {
        content: '';
        position: absolute;
        bottom: 98%;
        left: 0;
        width: 14px;
        height: 4px;
        background-color: #d97706;
        border-top-left-radius: 2px;
        border-top-right-radius: 2px;
    }

/* الأوراق الداخلية */
.folder-paper-mini-inv {
    position: absolute;
    inset: 2px;
    background-color: #e4e4e7;
    border-radius: 2px;
    transition: all 0.3s ease;
    transform-origin: bottom;
}

.paper-mini-1 {
    background-color: #a1a1aa;
}

.paper-mini-2 {
    background-color: #d4d4d8;
}

.paper-mini-3 {
    background-color: #f4f4f5;
}

/* الجزء الأمامي مع الأيقونة */
.folder-front-mini-inv {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 26px;
    background: linear-gradient(to top, #f59e0b, #fbbf24);
    border-radius: 3px;
    border-top-right-radius: 0;
    transform-origin: bottom;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* تأثير الـ Hover */
.folder-mini-inv:hover .folder-front-mini-inv {
    transform: rotateX(-40deg);
}

.folder-mini-inv:hover .paper-mini-1 {
    transform: rotateX(-15deg);
}

.folder-mini-inv:hover .paper-mini-2 {
    transform: rotateX(-25deg);
}

.folder-mini-inv:hover .paper-mini-3 {
    transform: rotateX(-35deg);
}

.Archive-Table .mud-table-row:hover .folder-front-mini-inv {
    transform: rotateX(-40deg);
}

.Archive-Table .mud-table-row:hover .paper-mini-1 {
    transform: rotateX(-15deg);
}
.Archive-Table .mud-table-row:hover .paper-mini-2 {
    transform: rotateX(-25deg);
}
.Archive-Table .mud-table-row:hover .paper-mini-3 {
    transform: rotateX(-35deg);
}

/* ثيم الأرشيف الروت المصغر - معدني وذهبي */
.root-theme-mini .folder-back-mini-inv,
.root-theme-mini .folder-back-mini-inv::after {
    background-color: #0f172a !important; /* Slate-900 */
}

.root-theme-mini .folder-front-mini-inv {
    background: linear-gradient(to top, #1e293b, #475569) !important; /* Slate-800 to Slate-600 */
}

/* ألوان الورق الداخلي للثيم المصغر */
.root-theme-mini .paper-mini-1 {
    background-color: #fde68a !important; /* Amber-200 (الذهبي) */
}

.root-theme-mini .paper-mini-2 {
    background-color: #cbd5e1 !important; /* Slate-300 */
}

.root-theme-mini .paper-mini-3 {
    background-color: #ffffff !important;
}

/* تأثير الـ Hover الخاص بالثيم المعدني */
.root-theme-mini:hover .folder-front-mini-inv {
    box-shadow: inset 0 5px 10px #94a3b8, inset 0 -5px 10px #0f172a !important;
}




.border-all {
    border: 1px solid rgba(0,0,0,0.08);
}

.bg-light {
    background-color: #fcfcfc;
}

.shadow-xs {
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

/* تحسين شكل الـ TreeView */
.mud-treeview-item-content {
    border-radius: 8px;
    margin-bottom: 2px;
}

.mud-treeview-item-selected {
    background-color: var(--mud-palette-primary-hover) !important;
}

/* تنسيق جدول الصلاحيات */
.custom-acl-table .mud-table-head {
    background-color: #f8f9fa;
}

.custom-tree-scroll::-webkit-scrollbar {
    width: 4px;
}

.custom-tree-scroll::-webkit-scrollbar-thumb {
    background: #e0e0e0;
    border-radius: 10px;
}

.tree-item-text {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
    word-break: break-word;
}

.tree-item-active {
    font-weight: bold;
    color: var(--mud-palette-primary);
}


/* تحسين شكل الصف الموروث ليعطي إيحاء بأنه للقراءة فقط */
.inherited-row {
    background-color: rgba(0, 0, 0, 0.02); /* لون خلفية خفيف جداً */
    cursor: not-allowed;
}

/*Dashbord*/

/* 🌟 Premium Design System 🌟 */
@keyframes subtleFadeUp {
    0% {
        opacity: 0;
        transform: translateY(15px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ═══════════════════════════════════════════════════════════════
   Start Nav Menu & Submenu Flyout  (SaaS dashboard shell)
   ═══════════════════════════════════════════════════════════════ */

:root {
    --nav-width: 280px;
    --nav-bg: #FFFFFF;
    --nav-border: #E4E4E7;
    --nav-muted: #71717A;
    --nav-text: #18181B;
    --nav-hover: #F4F4F5;
    --nav-expanded-hint: rgba(0, 0, 0, 0.03);
    --nav-active-bg: rgba(111, 58, 250, 0.09);
    --nav-active-text: var(--mud-palette-primary);
    --nav-group-active-bg: #E8E8EC;
    --nav-group-active-text: #27272A;
    --nav-group-active-icon: #52525B;
    --nav-radius: 8px;
    --nav-radius-lg: 10px;
    --nav-flyout-height: 340px;
    --nav-transition: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Drawer shell ── */
.nav-drawer {
    width: var(--nav-width) !important;
    min-width: var(--nav-width) !important;
    max-width: var(--nav-width) !important;
    border-inline-end: 1px solid var(--nav-border) !important;
    background-color: var(--nav-bg) !important;
}

.nav-drawer .mud-drawer-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden !important;
    padding: 0 !important;
}

/* ── Sidebar layout: fixed header + scrollable nav + fixed footer ── */
.nav-sidebar {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    width: 100%;
    background: var(--nav-bg);
}

.nav-sidebar-header {
    flex: 0 0 auto;
    z-index: 2;
    background: var(--nav-bg);
    border-bottom: 1px solid var(--nav-border);
}

.nav-sidebar-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px 10px 16px;
    scroll-behavior: smooth;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #D4D4D8 transparent;
}

.nav-sidebar-scroll::-webkit-scrollbar {
    width: 5px;
}

.nav-sidebar-scroll::-webkit-scrollbar-thumb {
    background: #D4D4D8;
    border-radius: 8px;
}

.nav-sidebar-scroll::-webkit-scrollbar-thumb:hover {
    background: #A1A1AA;
}

.nav-sidebar-footer {
    flex: 0 0 auto;
    padding: 8px 10px 12px;
    border-top: 1px solid var(--nav-border);
    background: var(--nav-bg);
}

/* ── Brand header ── */
.nav-brand-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 16px 14px;
}

.nav-brand-logo {
    border-radius: var(--nav-radius);
    object-fit: contain;
    flex-shrink: 0;
}

.nav-brand-title {
    font-weight: 650 !important;
    font-size: 0.9375rem !important;
    color: var(--nav-text) !important;
    line-height: 1.3;
    letter-spacing: -0.02em;
}

/* ── Organization / business profile ── */
.nav-business-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 12px 12px;
    padding: 10px 12px;
    border-radius: var(--nav-radius-lg);
    border: 1px solid var(--nav-border);
    background: #FAFAFA;
    cursor: pointer;
    transition: border-color var(--nav-transition), background var(--nav-transition), box-shadow var(--nav-transition);
}

.nav-business-profile:hover {
    border-color: #D4D4D8;
    background: var(--nav-hover);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.nav-business-profile:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.nav-business-profile-avatar {
    width: 32px !important;
    height: 32px !important;
    border: 1px solid var(--nav-border) !important;
    background: #fff !important;
    flex-shrink: 0;
}

.nav-business-profile-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.nav-business-profile-label {
    font-size: 0.625rem !important;
    color: var(--nav-muted) !important;
    font-weight: 600 !important;
    line-height: 1.2;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.nav-business-profile-name {
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    color: var(--nav-text) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.35;
}

.nav-business-profile-chevron {
    color: #A1A1AA !important;
    flex-shrink: 0;
    font-size: 1.125rem !important;
    transition: color var(--nav-transition), transform var(--nav-transition);
}

.nav-business-profile:hover .nav-business-profile-chevron {
    color: var(--nav-muted) !important;
}

[dir="ltr"] .nav-business-profile-chevron {
    transform: rotate(180deg);
}

/* ── Nav menu base ── */
.sty-nav-link.mud-navmenu {
    padding: 0 !important;
    gap: 2px;
}

.sty-nav-link .mud-nav-item {
    font-size: 0.8125rem !important;
    margin-block: 1px;
}

.sty-nav-group .mud-nav-group {
    padding-bottom: 6px;
    margin-bottom: 2px;
}

/* ── Parent group headers ── */
.sty-nav-link .mud-nav-group > .mud-nav-link {
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    color: var(--nav-text) !important;
    min-height: 38px !important;
    padding-block: 8px !important;
    padding-inline: 10px !important;
    margin-inline: 0;
    border-radius: var(--nav-radius);
    background: transparent !important;
    transition: background var(--nav-transition), color var(--nav-transition), box-shadow var(--nav-transition);
}

/* Expanded — transparent with a hairline hint only (skip active-parent groups) */
.sty-nav-link .mud-nav-group:not(.nav-parent-active):has(.mud-collapse-container:not([style*="height: 0px"])) > .mud-nav-link:not(:hover) {
    background: transparent !important;
    color: var(--nav-text) !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    box-shadow: inset 0 -1px 0 var(--nav-expanded-hint);
}

/* Active parent — darker neutral (class-driven; wins over expanded state) */
.sty-nav-link .mud-nav-group.nav-parent-active > .mud-nav-link,
.sty-nav-link .mud-nav-group.nav-parent-active:has(.mud-collapse-container:not([style*="height: 0px"])) > .mud-nav-link:not(:hover) {
    background: var(--nav-group-active-bg) !important;
    color: var(--nav-group-active-text) !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    box-shadow: none !important;
}

.sty-nav-link .mud-nav-group.nav-parent-active > .mud-nav-link .mud-nav-link-icon,
.sty-nav-link .mud-nav-group.nav-parent-active > .mud-nav-link .mud-nav-link-expand-icon {
    color: var(--nav-group-active-icon) !important;
}

.sty-nav-link .mud-nav-group > .mud-nav-link .mud-nav-link-icon {
    color: var(--nav-muted) !important;
    font-size: 1.125rem !important;
    width: 1.125rem;
    min-width: 1.125rem;
    margin-inline-end: 10px !important;
    transition: color var(--nav-transition);
}

.sty-nav-link .mud-nav-group > .mud-nav-link:hover .mud-nav-link-icon {
    color: var(--nav-text) !important;
}

/* Expand / collapse chevron */
.sty-nav-group .mud-nav-link .mud-nav-link-expand-icon {
    color: #A1A1AA !important;
    font-size: 1.125rem !important;
    transition: transform var(--nav-transition), color var(--nav-transition);
}

.sty-nav-group .mud-nav-link .mud-nav-link-expand-icon.mud-transform {
    transform: rotate(180deg);
    color: var(--nav-muted) !important;
}

/* Hover on group headers */
.sty-nav-link .mud-nav-group > .mud-nav-link:hover {
    background: var(--nav-hover) !important;
    color: var(--nav-text) !important;
    box-shadow: none !important;
}

/* Active parent hover — stay dark neutral */
.sty-nav-link .mud-nav-group.nav-parent-active > .mud-nav-link:hover {
    background: #DCDCE1 !important;
    color: var(--nav-group-active-text) !important;
}

.sty-nav-link .mud-nav-group > .mud-nav-link:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 1px;
}

/* ── Child / nested links (MudBlazor 6.x: items live in .mud-collapse-container, not inner .mud-navmenu) ── */
.sty-nav-link .mud-nav-group .mud-nav-item .mud-nav-link,
.sty-nav-link .mud-nav-group .mud-collapse-container .mud-nav-item .mud-nav-link {
    position: relative;
    margin-inline: 4px 0;
    padding-inline: 10px 10px !important;
    padding-block: 6px !important;
    padding-inline-start: 38px !important;
    border-radius: var(--nav-radius);
    color: var(--nav-muted) !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    min-height: 32px !important;
    transition: background var(--nav-transition), color var(--nav-transition);
}

.sty-nav-link .mud-nav-group .mud-nav-item .mud-nav-link .mud-nav-link-text {
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: 1.35 !important;
}

.sty-nav-link .mud-nav-group .mud-nav-item .mud-nav-link::before,
.sty-nav-link .mud-nav-group .mud-collapse-container .mud-nav-item .mud-nav-link::before {
    content: "";
    position: absolute;
    inset-inline-start: 22px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #D4D4D8;
    transition: background var(--nav-transition), transform var(--nav-transition);
}

.sty-nav-link .mud-nav-group .mud-nav-item .mud-nav-link:hover,
.sty-nav-link .mud-nav-group .mud-collapse-container .mud-nav-item .mud-nav-link:hover {
    background: var(--nav-hover) !important;
    color: var(--nav-text) !important;
}

.sty-nav-link .mud-nav-group .mud-nav-item .mud-nav-link:hover:not(.active)::before,
.sty-nav-link .mud-nav-group .mud-collapse-container .mud-nav-item .mud-nav-link:hover:not(.active)::before {
    background: #A1A1AA;
    transform: translateY(-50%) scale(1.15);
}

/* Deeper nesting (e.g. hotel settings subgroup) */
.sty-nav-link .mud-nav-group .mud-nav-group .mud-nav-item .mud-nav-link,
.sty-nav-link .mud-nav-group .mud-nav-group .mud-collapse-container .mud-nav-item .mud-nav-link {
    padding-inline-start: 52px !important;
    font-size: 0.78125rem !important;
}

.sty-nav-link .mud-nav-group .mud-nav-group .mud-nav-item .mud-nav-link::before,
.sty-nav-link .mud-nav-group .mud-nav-group .mud-collapse-container .mud-nav-item .mud-nav-link::before {
    inset-inline-start: 36px;
    width: 3px;
    height: 3px;
}

/* Active route — child links only (group headers use nav-parent-active) */
.nav-sidebar .mud-nav-group .mud-nav-item .mud-nav-link.active:not(.mud-nav-link-disabled) {
    border-radius: var(--nav-radius) !important;
    color: var(--nav-active-text) !important;
    background: var(--nav-active-bg) !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    border-inline-start: 2px solid var(--nav-active-text);
    padding-inline-start: 36px !important;
}

.nav-sidebar .mud-nav-group > .mud-nav-link.active:not(.mud-nav-link-disabled),
.nav-sidebar .mud-nav-group.nav-parent-active > .mud-nav-link:not(.mud-nav-link-disabled) {
    border-inline-start: none !important;
    padding-inline-start: 10px !important;
    background: var(--nav-group-active-bg) !important;
    color: var(--nav-group-active-text) !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}

.nav-sidebar .mud-nav-group .mud-nav-item .mud-nav-link.active:not(.mud-nav-link-disabled)::before {
    background: var(--nav-active-text);
}

.nav-sidebar .mud-nav-group > .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-icon,
.nav-sidebar .mud-nav-group > .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-expand-icon {
    color: var(--nav-group-active-icon) !important;
}

.nav-sidebar .mud-nav-link:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 1px;
}

.sty-nav-link .iconLink .mud-icon-size-medium {
    font-size: 1.125rem !important;
    color: var(--nav-muted) !important;
}

.sty-nav-link .mud-nav-link.active .mud-nav-link-icon {
    color: var(--nav-active-text) !important;
}

.sty-nav-link .iconLink .mud-ripple {
    display: flex !important;
    align-items: center !important;
}

.sty-nav-link .iconLinkFa .fa-solid,
.sty-nav-link .iconLinkFa .fas {
    font-weight: 900;
    font-size: 0.75rem !important;
}

/* Accordion animation */
.navgroup-animated .mud-collapse-transition {
    transition: max-height 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.navgroup-animated .mud-collapse-container[style*="height: 0px"] {
    opacity: 0;
}

.navgroup-animated .mud-collapse-container:not([style*="height: 0px"]) {
    opacity: 1;
    transition: opacity 0.2s ease;
}

/* ── Flyout trigger (Additions / System Init) ── */
.nav-submenu-wrapper {
    margin-inline: 4px 0;
    padding-inline-start: 38px;
    position: relative;
}

.nav-submenu-wrapper::before {
    content: "";
    position: absolute;
    inset-inline-start: 22px;
    top: 14px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #D4D4D8;
}

.nav-submenu {
    width: 100%;
}

.nav-submenu-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 7px 10px;
    border-radius: var(--nav-radius);
    cursor: pointer;
    color: var(--nav-muted);
    font-size: 0.8125rem;
    font-weight: 500;
    user-select: none;
    transition: background var(--nav-transition), color var(--nav-transition);
}

.nav-submenu-trigger:hover,
.nav-submenu-trigger:focus-visible {
    background: var(--nav-hover);
    color: var(--nav-text);
    outline: none;
}

.nav-submenu-trigger:focus-visible {
    box-shadow: 0 0 0 2px rgba(111, 58, 250, 0.35);
}

.nav-submenu-trigger-text {
    flex: 1;
    min-width: 0;
    line-height: 1.4;
}

.nav-submenu-trigger-arrow {
    font-size: 1rem !important;
    color: #A1A1AA !important;
    flex-shrink: 0;
    transition: color var(--nav-transition), transform var(--nav-transition);
}

.nav-submenu-trigger:hover .nav-submenu-trigger-arrow {
    color: var(--nav-muted) !important;
}

[dir="rtl"] .nav-submenu-trigger:hover .nav-submenu-trigger-arrow {
    transform: translateX(-2px);
}

[dir="ltr"] .nav-submenu-trigger:hover .nav-submenu-trigger-arrow {
    transform: translateX(2px);
}

/* ── Flyout panel (modern admin popover) ── */
.nav-submenu-popover.mud-popover-open {
    border-radius: var(--nav-radius-lg) !important;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.04),
        0 8px 16px rgba(0, 0, 0, 0.06),
        0 24px 48px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid var(--nav-border) !important;
    overflow: hidden !important;
    width: 320px !important;
    min-width: 320px !important;
    max-width: min(320px, calc(100vw - 24px)) !important;
    animation: navFlyoutIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes navFlyoutIn {
    from {
        opacity: 0;
        transform: translateX(6px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

[dir="rtl"] .nav-submenu-popover.mud-popover-open {
    animation-name: navFlyoutInRtl;
}

@keyframes navFlyoutInRtl {
    from {
        opacity: 0;
        transform: translateX(-6px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

.nav-submenu-popover .mud-list,
.nav-submenu-popover .mud-list-padding {
    padding: 0 !important;
    width: 100%;
    overflow: hidden !important;
}

/* Fixed flyout shell: header + search fixed, body scrolls */
.nav-flyout-panel {
    display: flex;
    flex-direction: column;
    height: var(--nav-flyout-height);
    max-height: var(--nav-flyout-height);
    overflow: hidden;
    direction: inherit;
    text-align: start;
}

/* Flyout header */
.nav-submenu-header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    padding: 10px 12px;
    background: #FAFAFA;
    border-bottom: 1px solid var(--nav-border);
}

.nav-submenu-header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: #F4F4F5;
    border: 1px solid var(--nav-border);
    flex-shrink: 0;
}

.nav-submenu-header-icon .mud-icon-root {
    font-size: 1rem !important;
    color: var(--nav-muted) !important;
}

.nav-submenu-header-text {
    flex: 1;
    min-width: 0;
    text-align: start;
}

.nav-submenu-header-title,
.nav-submenu-header-title.mud-typography,
.nav-submenu-header-title.mud-typography-body1,
.nav-submenu-header-title.mud-typography-body2 {
    display: block;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    color: var(--nav-text) !important;
    line-height: 1.3;
    text-align: start;
}

.nav-submenu-header-sub,
.nav-submenu-header-sub.mud-typography,
.nav-submenu-header-sub.mud-typography-body2 {
    display: block;
    font-size: 0.625rem !important;
    color: var(--nav-muted) !important;
    margin-top: 1px;
    line-height: 1.25;
    text-align: start;
}

/* Flyout search — compact */
.nav-submenu-search {
    flex: 0 0 auto;
    padding: 8px 10px;
    background: #fff;
    border-bottom: 1px solid #F4F4F5;
}

.nav-submenu-search .mud-input-control {
    margin: 0 !important;
}

.nav-submenu-search .mud-input-root-outlined {
    min-height: 30px !important;
    background: #FAFAFA;
    border-radius: 6px;
}

.nav-submenu-search .mud-input-outlined-border {
    border-radius: 6px !important;
    border-color: var(--nav-border) !important;
    transition: border-color var(--nav-transition), box-shadow var(--nav-transition);
}

.nav-submenu-search .mud-input-root-outlined:hover .mud-input-outlined-border {
    border-color: #D4D4D8 !important;
}

.nav-submenu-search .mud-input-root-outlined.mud-input-root-focused .mud-input-outlined-border,
.nav-submenu-search .mud-input-root-outlined:focus-within .mud-input-outlined-border {
    border-color: #D4D4D8 !important;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.04);
}

.nav-submenu-search .mud-input-adornment {
    align-self: center !important;
}

.nav-submenu-search .mud-input-adornment .mud-icon-root {
    color: #A1A1AA !important;
    font-size: 0.9375rem !important;
}

.nav-submenu-search .mud-input > input.mud-input-root-outlined,
.nav-submenu-search .mud-input-slot.mud-input-root-outlined {
    padding-block: 4px !important;
    padding-inline: 8px !important;
    font-size: 0.75rem !important;
    color: var(--nav-text);
    line-height: 1.25 !important;
    min-height: 28px !important;
}

.nav-submenu-search .mud-input > input.mud-input-root-outlined::placeholder {
    color: #A1A1AA;
    opacity: 1;
}

/* Flyout scrollable body */
.nav-submenu-items {
    flex: 1 1 auto;
    min-height: 0;
    padding: 4px 6px 6px;
    overflow-y: auto;
    overflow-x: hidden;
    background: #fff;
    scroll-behavior: smooth;
    overscroll-behavior: contain;
}

.nav-submenu-items::-webkit-scrollbar {
    width: 5px;
}

.nav-submenu-items::-webkit-scrollbar-thumb {
    background: #D4D4D8;
    border-radius: 6px;
}

/* Dense module-selector list — override global center alignment */
.nav-submenu-popover .mud-list-item,
.nav-submenu-list .mud-list-item,
.nav-submenu-items .mud-list-item,
.nav-submenu-popover .mud-menu-item,
.nav-submenu-items .mud-menu-item {
    text-align: start !important;
    justify-content: flex-start !important;
    align-items: center !important;
    border-radius: 6px !important;
    margin: 0 !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    min-height: 28px !important;
    padding: 3px 10px !important;
    color: var(--nav-text) !important;
    transition: background var(--nav-transition), color var(--nav-transition);
}

.nav-submenu-popover .mud-list-item .mud-list-item-text,
.nav-submenu-list .mud-list-item .mud-list-item-text,
.nav-submenu-items .mud-list-item .mud-list-item-text {
    text-align: start !important;
    justify-content: flex-start !important;
    align-items: center !important;
    margin: 0 !important;
    width: 100%;
    flex: 1 1 auto;
    font-size: 0.75rem !important;
    line-height: 1.35 !important;
}

.nav-submenu-popover .mud-list-item .mud-typography,
.nav-submenu-popover .mud-menu-item .mud-typography,
.nav-submenu-items .mud-menu-item .mud-typography,
.nav-submenu-popover .mud-list-item .mud-list-item-text .mud-typography-body1,
.nav-submenu-popover .mud-menu-item .mud-typography-body1,
.nav-submenu-popover .mud-menu-item .mud-typography-body2,
.nav-submenu-items .mud-menu-item .mud-typography-body1,
.nav-submenu-items .mud-menu-item .mud-typography-body2 {
    font-size: 0.75rem !important;
    line-height: 1.35 !important;
    text-align: start !important;
    width: 100%;
}

.nav-submenu-popover .mud-list-item:hover,
.nav-submenu-list .mud-list-item:hover,
.nav-submenu-items .mud-list-item:hover,
.nav-submenu-popover .mud-menu-item:hover,
.nav-submenu-items .mud-menu-item:hover {
    background: var(--nav-hover) !important;
    color: var(--nav-text) !important;
}

/* RTL flyout — portal-safe (popover may render outside RTL subtree) */
html[dir="rtl"] .nav-submenu-popover,
[dir="rtl"] .nav-submenu-popover,
.nav-submenu-popover-rtl {
    direction: rtl !important;
    text-align: right !important;
}

html[dir="rtl"] .nav-submenu-popover .mud-list,
html[dir="rtl"] .nav-submenu-popover .mud-list-padding,
.nav-submenu-popover-rtl .mud-list,
.nav-submenu-popover-rtl .mud-list-padding {
    direction: rtl !important;
    text-align: right !important;
}

html[dir="rtl"] .nav-flyout-panel,
[dir="rtl"] .nav-flyout-panel,
.nav-submenu-popover-rtl .nav-flyout-panel {
    direction: rtl !important;
    text-align: right !important;
}

html[dir="rtl"] .nav-submenu-header,
.nav-submenu-popover-rtl .nav-submenu-header {
    flex-direction: row;
    text-align: right;
    direction: rtl;
}

html[dir="rtl"] .nav-submenu-header-text,
html[dir="rtl"] .nav-submenu-header-title,
html[dir="rtl"] .nav-submenu-header-sub,
.nav-submenu-popover-rtl .nav-submenu-header-text,
.nav-submenu-popover-rtl .nav-submenu-header-title,
.nav-submenu-popover-rtl .nav-submenu-header-sub {
    text-align: right !important;
    direction: rtl;
}

html[dir="rtl"] .nav-submenu-search,
.nav-submenu-popover-rtl .nav-submenu-search {
    direction: rtl !important;
    text-align: right;
}

html[dir="rtl"] .nav-submenu-search .mud-input-control,
html[dir="rtl"] .nav-submenu-search .mud-input-control-input-container,
.nav-submenu-popover-rtl .nav-submenu-search .mud-input-control,
.nav-submenu-popover-rtl .nav-submenu-search .mud-input-control-input-container {
    direction: rtl !important;
}

html[dir="rtl"] .nav-submenu-search .mud-input-root,
.nav-submenu-popover-rtl .nav-submenu-search .mud-input-root {
    direction: rtl !important;
    text-align: right;
}

html[dir="rtl"] .nav-submenu-search .mud-input > input.mud-input-root-outlined,
html[dir="rtl"] .nav-submenu-search .mud-input-slot.mud-input-root-outlined,
.nav-submenu-popover-rtl .nav-submenu-search .mud-input > input.mud-input-root-outlined,
.nav-submenu-popover-rtl .nav-submenu-search .mud-input-slot.mud-input-root-outlined {
    text-align: right !important;
    direction: rtl;
}

html[dir="rtl"] .nav-submenu-search .mud-input-adornment-start,
.nav-submenu-popover-rtl .nav-submenu-search .mud-input-adornment-start {
    margin-inline-end: 0 !important;
    margin-inline-start: 4px !important;
}

html[dir="rtl"] .nav-submenu-items,
.nav-submenu-popover-rtl .nav-submenu-items {
    direction: rtl !important;
    text-align: right;
    padding-inline: 6px 4px;
}

html[dir="rtl"] .nav-submenu-popover .mud-list-item,
html[dir="rtl"] .nav-submenu-list .mud-list-item,
html[dir="rtl"] .nav-submenu-items .mud-list-item,
html[dir="rtl"] .nav-submenu-popover .mud-menu-item,
.nav-submenu-popover-rtl .mud-list-item,
.nav-submenu-popover-rtl .mud-menu-item {
    text-align: right !important;
    justify-content: flex-start !important;
    direction: rtl !important;
    padding-inline: 10px 4px !important;
}

html[dir="rtl"] .nav-submenu-popover .mud-list-item .mud-list-item-text,
html[dir="rtl"] .nav-submenu-popover .mud-list-item .mud-typography,
.nav-submenu-popover-rtl .mud-list-item .mud-list-item-text,
.nav-submenu-popover-rtl .mud-list-item .mud-typography,
.nav-submenu-popover-rtl .mud-menu-item .mud-typography {
    text-align: right !important;
    direction: rtl;
    width: 100%;
}

html[dir="rtl"] .nav-submenu-empty,
.nav-submenu-popover-rtl .nav-submenu-empty {
    text-align: center;
    direction: rtl;
}

.nav-submenu-list .mud-list-item:focus-visible,
.nav-submenu-popover .mud-menu-item:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

.nav-submenu-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 24px 16px;
    font-size: 0.75rem;
    color: var(--nav-muted);
    text-align: center;
}

.nav-submenu-empty::before {
    content: "";
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #F4F4F5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23A1A1AA' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E") center / 18px no-repeat;
}

/* Footer logout */
.nav-sidebar-footer .nav-footer-link,
.nav-sidebar-footer .nav-footer-link.mud-nav-link {
    margin: 0 !important;
    border-radius: var(--nav-radius) !important;
    min-height: 38px !important;
    padding-inline: 10px !important;
    color: var(--nav-muted) !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    text-transform: none !important;
    transition: background var(--nav-transition), color var(--nav-transition);
}

.nav-sidebar-footer .nav-footer-link:hover {
    background: var(--nav-hover) !important;
    color: var(--nav-text) !important;
}

/* Responsive */
@media (max-width: 600px) {
    .nav-drawer {
        width: min(100vw, 300px) !important;
        min-width: min(100vw, 300px) !important;
        max-width: min(100vw, 300px) !important;
    }

    .nav-submenu-popover.mud-popover-open {
        width: min(300px, calc(100vw - 32px)) !important;
        min-width: min(300px, calc(100vw - 32px)) !important;
    }

    :root {
        --nav-flyout-height: 300px;
    }
}

/* End Nav Menu & Submenu Flyout */