/* ===========================================
   HighEndProtection Theme v2.0
   يعتمد على MudBlazor Theme
   =========================================== */

:root {
    /* الألوان الرئيسية من MudBlazor */
    --hep-primary: var(--mud-palette-primary);
    --hep-primary-hover: var(--mud-palette-primary-darken);
    --hep-secondary: var(--mud-palette-secondary);
    --hep-success: var(--mud-palette-success);
    --hep-warning: var(--mud-palette-warning);
    --hep-danger: var(--mud-palette-error);
    --hep-info: var(--mud-palette-info);
    /* الخلفيات */
    --hep-background: var(--mud-palette-background);
    --hep-surface: var(--mud-palette-surface);
    /* النصوص */
    --hep-text: var(--mud-palette-text-primary);
    --hep-text-light: var(--mud-palette-text-secondary);
    /* القائمة الجانبية */
    --hep-sidebar: var(--mud-palette-drawer-background);
    --hep-sidebar-text: var(--mud-palette-drawer-text);
    --hep-sidebar-icon: var(--mud-palette-drawer-icon);
    --hep-sidebar-hover: var(--mud-palette-action-default-hover);
    /* الحدود */
    --hep-border: var(--mud-palette-divider);
    /* الحواف */
    --hep-radius: 14px;
    /* الظلال */
    --hep-shadow-small: 0 2px 8px rgba(0, 0, 0, .06);
    --hep-shadow-medium: 0 8px 24px rgba(0, 0, 0, .08);
    --hep-shadow-large: 0 14px 34px rgba(0, 0, 0, .12);
    /* سرعة الحركة */
    --hep-transition: .25s ease-in-out;
}

/* ===========================================
   الخط العام
   =========================================== */

html,
body {
    font-family: "Cairo", "Segoe UI", Tahoma, sans-serif;
    background: var(--hep-background);
    color: var(--hep-text);
}

/* ===========================================
   العناوين
   =========================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
    color: var(--hep-text);
}

/* ===========================================
   الروابط
   =========================================== */

a {
    color: var(--hep-primary);
    text-decoration: none;
    transition: var(--hep-transition);
}

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

/* ===========================================
   البطاقات العامة
   =========================================== */

.hep-card {
    background: var(--hep-surface);
    border: 1px solid var(--hep-border);
    border-radius: var(--hep-radius);
    box-shadow: var(--hep-shadow-small);
    transition: var(--hep-transition);
}

    .hep-card:hover {
        box-shadow: var(--hep-shadow-medium);
    }

/* ===========================================
   الأزرار
   =========================================== */

.hep-button {
    border-radius: 10px;
    transition: var(--hep-transition);
}

/* ===========================================
   الحقول
   =========================================== */

input,
select,
textarea {
    border-radius: 10px;
}

/* ===========================================
   شريط التمرير
   =========================================== */

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-thumb {
    background: var(--mud-palette-lines-inputs);
    border-radius: 20px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: var(--mud-palette-text-disabled);
    }
.hep-field-label {
    display: block;
    margin-bottom: 4px;
    color: var(--mud-palette-text-secondary);
    font-weight: 600;
}
/* تحسين تباعد عناوين حقول MudBlazor */
.mud-input-control {
    margin-top: 10px;
}

.mud-input-label {
    line-height: 1.4;
}
/* ===========================================
   MudBlazor fields - unified external labels v4
   =========================================== */

/*
 * السياسة الموحدة:
 * 1) عنوان الحقل ثابت في صف مستقل فوق الإطار.
 * 2) لا يوجد Floating Label داخل الإطار ولا حركة عند Focus.
 * 3) يتم إلغاء فتحة الـ notch التي يتركها Outlined للعنوان القديم.
 * 4) يعمل مع TextField / Numeric / Select / Autocomplete / DatePicker
 *    وعلى RTL والجوال دون قص جزء من حدود الحقل.
 */

/* ألغِ أي إزاحة عامة قديمة على الكنترول نفسه. */
.mud-input-control {
    margin-top: 0 !important;
}

/* هذه هي الحاوية الصحيحة لحجز مكان حقيقي للعنوان. */
.mud-input-control .mud-input-control-input-container {
    position: relative !important;
    padding-top: 24px !important;
    overflow: visible !important;
}

/* العنوان يصبح ثابتاً في المساحة المحجوزة فوق الحقل. */
.mud-input-control label.mud-input-label.mud-input-label-inputcontrol {
    position: absolute !important;
    top: 2px !important;
    inset-inline-start: 0 !important;
    inset-inline-end: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 2px !important;
    transform: none !important;
    transform-origin: initial !important;
    color: var(--mud-palette-text-primary) !important;
    background: transparent !important;
    font-size: .82rem !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    text-align: start !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    pointer-events: none !important;
    z-index: 2 !important;
}

/* امنع MudBlazor من إعادة تحريك العنوان عند التركيز أو وجود قيمة. */
.mud-input-control .mud-input-label.mud-input-label-inputcontrol.mud-input-label-animated,
.mud-input-control .mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined,
.mud-input-control .mud-input:focus-within ~ .mud-input-label,
.mud-input-control .mud-shrink ~ .mud-input-label {
    top: 2px !important;
    transform: none !important;
    max-width: 100% !important;
}

/*
 * Outlined يحتفظ عادة بفتحة في الإطار للـFloating Label.
 * بما أن العنوان أصبح خارج الإطار، نلغي هذه الفتحة تماماً.
 */
.mud-input-control .mud-input-outlined-border legend,
.mud-input-control fieldset.mud-input-outlined-border legend {
    width: 0 !important;
    max-width: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.mud-input-control .mud-input-outlined-border legend > span,
.mud-input-control fieldset.mud-input-outlined-border legend > span {
    display: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* الحقول التي لا تحتوي Label داخلياً لا نضيف لها فراغاً غير مطلوب. */
.hep-dynamic-field .mud-input-control .mud-input-control-input-container {
    padding-top: 0 !important;
}

/* الجوال: عنوان واضح ومساحة لمس كاملة بدون تداخل. */
@media (max-width: 600px) {
    .mud-input-control {
        width: 100% !important;
        min-width: 0 !important;
    }

    .mud-input-control .mud-input-control-input-container {
        padding-top: 26px !important;
    }

    .mud-input-control label.mud-input-label.mud-input-label-inputcontrol {
        top: 2px !important;
        font-size: .80rem !important;
        line-height: 1.4 !important;
    }

    .hep-dynamic-field .mud-input-control .mud-input-control-input-container {
        padding-top: 0 !important;
    }
}