﻿/* 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*/
