/*
 * هوية USH — تصميم «رؤية».
 * شريط علوي أخضر بنقش هندسي خفيف وفيه الشعار (مربع ذهبي)، قائمة جانبية بيضاء والعنصر النشط
 * بخلفية نعناعية، بطاقات بيضاء بزوايا 18px، ولمسات ذهبية. الخط الإسكندرية (من Branding).
 * يُحقن عبر App\Support\Filament\Branding (HEAD_END) فوق تنسيق Filament.
 */

:root {
    --v-green: #00573f;
    --v-green-2: #0a6b52;
    --v-green-3: #2e8b6a;
    --v-mint: #e6f2ec;
    --v-mint-2: #d5e7dd;
    --v-gold: #c9a86a;
    --v-gold-2: #d9be84;
    --v-gold-ink: #1e1608;
    --v-on-green: #a9d3c3;
    --v-page: #f2f5f3;
    --v-card: #ffffff;
    --v-line: #e1e8e4;
    --v-line-2: #eef3f0;
    --v-text: #0f2a21;
    --v-muted: #4f625a;
    --v-side-text: #3c5a4f;
    --v-radius: 12px;
    --v-radius-lg: 18px;
    --v-radius-sm: 10px;
    --v-on-primary: #ffffff;
    --v-on-primary-soft: #e6f3ee;
    --v-on-primary-muted: #cfe6dd;
    --v-accent-text: #a8873f;
    --v-highlight: #00573f;
    --v-row-hover: #e6f1eb;
    --v-head-bg: #dcebe2;
    --v-warn-bg: #fdf4e3;
    --v-warn-text: #5a4210;
    --v-tile-bg: linear-gradient(150deg, #f3e6c6 0%, #dfc48c 55%, #c9a86a 100%);
    --v-tile-border: rgba(255, 255, 255, 0.95);
    --v-topbar-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 22px), repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 22px);
    --v-topbar-shadow: rgba(0, 40, 28, 0.9);
    --v-sb-bg: var(--v-card);
    --v-sb-line: var(--v-line);
    --v-sb-text: var(--v-side-text);
    --v-sb-muted: var(--v-muted);
    --v-sb-hover: var(--v-line-2);
    --v-sb-active-bg: var(--v-mint);
    --v-sb-active-text: var(--v-highlight);
    --v-sb-thumb: var(--v-mint-2);
    --topbar-height: 5.75rem;
}

.dark {
    --v-mint: #12352a;
    --v-mint-2: #1b4637;
    --v-page: #0a1511;
    --v-card: #0f201a;
    --v-line: #1d3a2f;
    --v-line-2: #172e25;
    --v-text: #e3efe9;
    --v-muted: #8fb3a5;
    --v-side-text: #b4cfc4;
    --v-highlight: #7fd3b0;
    --v-row-hover: #132a22;
    --v-head-bg: #15302a;
    --v-warn-bg: #2b2411;
    --v-warn-text: #e8d6a4;
}

/* ---------- الصفحة ---------- */
.fi-body,
.fi-layout {
    background: var(--v-page);
}

.fi-header-heading {
    color: var(--v-text);
    font-weight: 600;
    letter-spacing: -0.01em;
}

.fi-header-subheading {
    color: var(--v-muted);
}

/* ---------- الشعار ---------- */
.ush-brand {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    line-height: 1.25;
}

.ush-brand-tile {
    width: 3rem;
    height: 3rem;
    border-radius: 0.95rem;
    background: var(--v-tile-bg);
    border: 1px solid var(--v-tile-border);
    display: grid;
    place-items: center;
    box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.55);
    flex-shrink: 0;
}

.ush-brand-mark {
    width: 2.2rem;
    height: 2.2rem;
    object-fit: contain;
    /* حد أبيض حول الشعار نفسه */
    filter: drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff);
}

.ush-brand-tenant .ush-brand-mark {
    filter: none;
    border-radius: 0.4rem;
}

.ush-brand-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.ush-brand-title {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--v-text);
    white-space: nowrap;
}

.ush-brand-sub {
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.09em;
    color: var(--v-accent-text);
    white-space: nowrap;
}

.fi-logo {
    height: auto !important;
}

/* ---------- الشريط العلوي (أخضر بنقش) ---------- */
.fi-topbar-ctn {
    position: sticky;
    top: 0;
    z-index: 30;
}

.fi-topbar,
.fi-topbar-ctn > nav {
    position: relative;
    min-height: var(--topbar-height);
    background-color: var(--v-green) !important;
    background-image: var(--v-topbar-image) !important;
    box-shadow: 0 10px 30px -22px var(--v-topbar-shadow) !important;
    border-bottom: 0 !important;
    color: var(--v-on-primary);
}

.fi-topbar .ush-brand-title { color: var(--v-on-primary); }
.fi-topbar .ush-brand-sub { color: var(--v-gold-2); }

/* الشعار ظاهر دائماً في الشريط (القائمة الجانبية تحته بلا رأس) */
.fi-topbar-start {
    display: flex !important;
    visibility: visible !important;
    align-items: center;
    gap: 0.75rem;
    padding-block: 0.4rem;
}

.fi-main-sidebar .fi-sidebar-header {
    display: none !important;
}

/* أزرار الأيقونات في الشريط (القائمة، الإشعارات...) */
.fi-topbar .fi-icon-btn,
.fi-topbar .fi-icon-btn .fi-icon {
    color: var(--v-on-primary-soft) !important;
}

.fi-topbar .fi-icon-btn:hover {
    background: color-mix(in srgb, var(--v-on-primary) 12%, transparent) !important;
}

.fi-topbar .fi-icon-btn-badge-ctn .fi-badge {
    background: var(--v-gold) !important;
    color: var(--v-gold-ink) !important;
    --tw-ring-color: transparent !important;
}

/* البحث الشامل بخلفية شفافة على الأخضر */
.fi-topbar .fi-global-search-field .fi-input-wrp {
    background: color-mix(in srgb, var(--v-on-primary) 12%, transparent) !important;
    --tw-ring-color: color-mix(in srgb, var(--v-on-primary) 18%, transparent) !important;
    box-shadow: none !important;
    border-radius: var(--v-radius-sm) !important;
    min-width: 16rem;
}

.fi-topbar .fi-global-search-field .fi-input,
.fi-topbar .fi-global-search-field .fi-input-wrp-prefix .fi-icon {
    color: var(--v-on-primary) !important;
}

.fi-topbar .fi-global-search-field .fi-input::placeholder {
    color: var(--v-on-primary-muted) !important;
}

/* قائمة المستخدم */
.fi-topbar .fi-user-menu-trigger .fi-avatar {
    background: var(--v-on-primary);
    color: var(--v-green);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--v-on-primary) 35%, transparent);
}

/* بوابة الموظف (تنقّل علوي) */
.fi-topbar-item > .fi-topbar-item-btn .fi-topbar-item-label,
.fi-topbar-item > .fi-topbar-item-btn .fi-topbar-item-icon {
    color: var(--v-on-primary-soft) !important;
}

.fi-topbar-item > .fi-topbar-item-btn:hover {
    background: color-mix(in srgb, var(--v-on-primary) 10%, transparent) !important;
}

.fi-topbar-item.fi-active > .fi-topbar-item-btn {
    background: color-mix(in srgb, var(--v-on-primary) 14%, transparent) !important;
    box-shadow: inset 0 -2px 0 var(--v-gold);
    border-radius: var(--v-radius-sm) var(--v-radius-sm) 0 0 !important;
}

.fi-topbar-item.fi-active .fi-topbar-item-label,
.fi-topbar-item.fi-active .fi-topbar-item-icon {
    color: var(--v-on-primary) !important;
}

/* ---------- القائمة الجانبية (بيضاء تحت الشريط) ---------- */
.fi-sidebar,
.fi-main-sidebar {
    background: var(--v-sb-bg) !important;
    border-inline-end: 1px solid var(--v-sb-line) !important;
}

@media (min-width: 64rem) {
    .fi-main-sidebar {
        top: var(--topbar-height) !important;
        height: calc(100dvh - var(--topbar-height)) !important;
    }
}

.fi-sidebar-nav {
    padding-top: 1.1rem;
}

.fi-main-sidebar,
.fi-main-sidebar .fi-sidebar-nav {
    scrollbar-width: thin;
    scrollbar-color: var(--v-sb-thumb) transparent;
    overscroll-behavior: contain;
}

.fi-main-sidebar ::-webkit-scrollbar,
.fi-main-sidebar::-webkit-scrollbar { width: 6px; }
.fi-main-sidebar ::-webkit-scrollbar-track,
.fi-main-sidebar::-webkit-scrollbar-track { background: transparent; }
.fi-main-sidebar ::-webkit-scrollbar-thumb,
.fi-main-sidebar::-webkit-scrollbar-thumb { background: var(--v-sb-thumb); border-radius: 999px; }
.fi-main-sidebar ::-webkit-scrollbar-thumb:hover,
.fi-main-sidebar::-webkit-scrollbar-thumb:hover { background: var(--v-green-3); }

.fi-main-sidebar .fi-sidebar-group-label,
.fi-main-sidebar .fi-sidebar-group-btn .fi-sidebar-group-label {
    color: var(--v-sb-muted) !important;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.fi-main-sidebar .fi-sidebar-group-btn .fi-icon,
.fi-main-sidebar .fi-sidebar-group-collapse-btn {
    color: var(--v-sb-muted) !important;
}

.fi-main-sidebar .fi-sidebar-item-btn {
    border-radius: var(--v-radius-sm) !important;
}

.fi-main-sidebar .fi-sidebar-item-label,
.fi-main-sidebar .fi-sidebar-item-icon {
    color: var(--v-sb-text) !important;
}

.fi-main-sidebar .fi-sidebar-item-btn:hover,
.fi-main-sidebar .fi-sidebar-item-btn:focus-visible {
    background: var(--v-sb-hover) !important;
}

.fi-main-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background: var(--v-sb-active-bg) !important;
    box-shadow: none;
}

.fi-main-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-label {
    color: var(--v-sb-active-text) !important;
    font-weight: 600;
}

.fi-main-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-icon {
    color: var(--v-sb-active-text) !important;
}

.fi-main-sidebar .fi-sidebar-item-grouped-border-part,
.fi-main-sidebar .fi-sidebar-item-grouped-border-part-not-first,
.fi-main-sidebar .fi-sidebar-item-grouped-border-part-not-last {
    background: var(--v-sb-line) !important;
}

.fi-main-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-grouped-border-part {
    background: var(--v-sb-active-text) !important;
}

.fi-main-sidebar .fi-badge {
    background: var(--v-sb-active-bg) !important;
    color: var(--v-sb-active-text) !important;
    --tw-ring-color: transparent !important;
}

.fi-sidebar-footer {
    border-top: 1px solid var(--v-sb-line);
}

/* ---------- القائمة الفرعية (صفحة الإعدادات) ---------- */
.fi-page-sub-navigation-sidebar {
    background: var(--v-card);
    border: 1px solid var(--v-line);
    border-radius: var(--v-radius-lg);
    padding: 0.75rem;
}

@media (min-width: 768px) {
    .fi-page-sub-navigation-sidebar-ctn {
        position: sticky;
        top: calc(var(--topbar-height) + 1rem);
        align-self: flex-start;
    }

    .fi-page-sub-navigation-sidebar {
        max-height: calc(100vh - var(--topbar-height) - 2rem);
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: var(--v-line) transparent;
    }
}

.fi-page-sub-navigation-sidebar .fi-sidebar-group-label {
    color: var(--v-muted);
    font-size: 0.72rem;
    font-weight: 600;
}

.fi-page-sub-navigation-sidebar .fi-sidebar-item-btn {
    border-radius: var(--v-radius-sm) !important;
}

.fi-page-sub-navigation-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background: var(--v-mint) !important;
}

.fi-page-sub-navigation-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-label,
.fi-page-sub-navigation-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-icon {
    color: var(--v-highlight) !important;
    font-weight: 600;
}

/* ---------- البطاقات ---------- */
.fi-section:not(.fi-section-not-contained),
.fi-ta-ctn,
.fi-wi-stats-overview-stat,
.fi-wi-chart .fi-section,
.fi-fo-tabs,
.fi-sc-tabs,
.fi-modal-window,
.fi-dropdown-panel {
    border-radius: var(--v-radius-lg) !important;
}

.fi-section:not(.fi-section-not-contained),
.fi-ta-ctn,
.fi-wi-stats-overview-stat {
    background: var(--v-card) !important;
    box-shadow: none !important;
    --tw-ring-color: var(--v-line) !important;
    outline: none;
    border: 1px solid var(--v-line);
    --tw-ring-shadow: 0 0 #0000 !important;
}

.fi-section-header-heading {
    color: var(--v-text);
    font-weight: 600;
}

.fi-wi-stats-overview-stat {
    padding: 1.3rem 1.4rem !important;
}

.fi-wi-stats-overview-stat-label {
    color: var(--v-muted) !important;
    font-size: 0.8rem;
    font-weight: 500;
}

.fi-wi-stats-overview-stat-value {
    color: var(--v-text) !important;
    font-size: 1.85rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em;
}

.fi-wi-stats-overview-stat .fi-icon {
    color: var(--v-highlight);
}

/* رؤوس الجداول */
.fi-ta-header-cell {
    color: var(--v-muted) !important;
    font-weight: 500 !important;
}

.fi-ta-row:hover {
    background: color-mix(in srgb, var(--v-mint) 45%, transparent) !important;
}

/* ---------- الأزرار والحقول ---------- */
.fi-btn {
    border-radius: var(--v-radius-sm) !important;
    box-shadow: none !important;
    font-weight: 600 !important;
}

.fi-btn.fi-color-primary:not(.fi-outlined) {
    background: var(--v-green) !important;
    color: var(--v-on-primary) !important;
}

.fi-btn.fi-color-primary:not(.fi-outlined):hover {
    background: var(--v-green-2) !important;
}

.fi-btn.fi-color-primary:not(.fi-outlined) .fi-icon {
    color: var(--v-gold-2) !important;
}

/* زر ذهبي للإجراء الأهم في رأس الصفحة (أول زر رئيسي) */
.fi-header .fi-ac .fi-btn.fi-color-primary:not(.fi-outlined):last-child {
    background: var(--v-gold) !important;
    color: var(--v-gold-ink) !important;
}

.fi-header .fi-ac .fi-btn.fi-color-primary:not(.fi-outlined):last-child .fi-icon {
    color: var(--v-gold-ink) !important;
}

.fi-header .fi-ac .fi-btn.fi-color-primary:not(.fi-outlined):last-child:hover {
    background: var(--v-gold-2) !important;
}

.fi-input-wrp {
    border-radius: var(--v-radius-sm) !important;
}

.fi-badge {
    border-radius: 999px !important;
}

/* التبويبات */
.fi-tabs-item.fi-active {
    background: var(--v-mint) !important;
}

.fi-tabs-item.fi-active .fi-tabs-item-label,
.fi-tabs-item.fi-active .fi-icon {
    color: var(--v-highlight) !important;
}

/* ---------- بطاقة الترحيب ---------- */
.ush-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.75rem 2rem;
    background: var(--v-card);
    border: 1px solid var(--v-line);
    border-radius: var(--v-radius-lg);
    position: relative;
    overflow: hidden;
}

.ush-hero-date {
    color: var(--v-muted);
    font-size: 0.8rem;
    font-weight: 500;
    margin: 0 0 0.35rem;
}

.ush-hero-title {
    color: var(--v-text);
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0;
}

.ush-hero-sub {
    color: var(--v-muted);
    margin: 0.35rem 0 0;
}

.ush-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1.25rem;
}

.ush-hero-mark {
    width: 6.5rem;
    height: auto;
    flex-shrink: 0;
    opacity: 0.95;
}

@media (max-width: 640px) {
    .ush-hero { padding: 1.25rem; }
    .ush-hero-title { font-size: 1.3rem; }
    .ush-hero-mark { display: none; }
}

/* ---------- الفوتر ---------- */
.ush-footer {
    margin-top: auto;
    padding: 0 1rem;
}

.ush-footer-inner {
    max-width: 80rem;
    margin: 2rem auto 0;
    padding: 1.1rem 0 1.4rem;
    border-top: 1px solid var(--v-line);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    color: var(--v-muted);
    font-size: 0.8rem;
}

.ush-footer-copy { margin: 0; }

.ush-footer-end {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.ush-footer-social {
    display: flex;
    gap: 0.35rem;
}

.ush-footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 10px;
    color: var(--v-muted);
    transition: color 0.15s, background 0.15s;
}

.ush-footer-social a:hover {
    color: var(--v-highlight);
    background: var(--v-mint);
}

.ush-footer-social svg {
    width: 1rem;
    height: 1rem;
}

.ush-footer-version {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border: 1px solid var(--v-line);
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.72rem;
    color: var(--v-text);
    background: var(--v-card);
}

/* ---------- صفحات الدخول (التخطيط البسيط) ---------- */
.fi-simple-layout {
    background-color: var(--v-page);
    background-image:
        radial-gradient(circle at 85% -10%, color-mix(in srgb, var(--v-green) 16%, transparent), transparent 45%),
        radial-gradient(circle at 0% 110%, color-mix(in srgb, var(--v-gold) 18%, transparent), transparent 40%);
}

.fi-simple-layout .ush-footer-inner {
    max-width: 32rem;
    justify-content: center;
    border-top: 0;
    text-align: center;
}

.fi-simple-main {
    border-radius: 22px !important;
    box-shadow: 0 24px 60px -32px color-mix(in srgb, var(--v-green) 45%, transparent) !important;
    --tw-ring-color: var(--v-line) !important;
    border-top: 4px solid var(--v-green);
}

.fi-simple-layout .ush-brand-tile {
    width: 3.75rem;
    height: 3.75rem;
}

.fi-simple-layout .ush-brand-mark {
    width: 2.75rem;
    height: 2.75rem;
}

.fi-simple-layout .ush-brand-title { font-size: 0.95rem; }
.fi-simple-layout .ush-brand-sub { font-size: 0.7rem; }

/*
 * شريط تمرير الصفحة على اليسار في الواجهة العربية: Chrome يضع شريط النافذة يميناً دائماً،
 * أما العنصر القابل للتمرير باتجاه rtl فشريطه يساراً. لذا يصبح body هو حاوية التمرير
 * (العناصر اللاصقة كالشريط العلوي والقائمة الجانبية تلتصق به كما كانت بالنافذة).
 */
html[dir="rtl"] {
    height: 100%;
    overflow: hidden;
}

html[dir="rtl"] body {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

/* حاوية اللوحة بارتفاع المحتوى لا بارتفاع الشاشة، وإلا لا تجد العناصر اللاصقة مساحة تلتصق فيها. */
html[dir="rtl"] .fi-layout {
    height: auto;
    min-height: 100%;
}

/* ---------- بطاقات لوحة الأداء («رؤية») ---------- */
.ush-muted-text { color: var(--v-muted); font-size: 0.85rem; margin: 0; }

.ush-health-link {
    color: var(--v-highlight);
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none;
}
.ush-health-link:hover { text-decoration: underline; }
.dark .ush-health-link { color: var(--v-highlight); }

.ush-health {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.75rem;
    padding: 1.5rem 1.75rem;
    background: var(--v-card);
    border: 1px solid var(--v-line);
    border-radius: 22px;
}

.ush-health-ring {
    position: relative;
    width: 10rem;
    height: 10rem;
    flex: none;
    border-radius: 50%;
    background: conic-gradient(var(--v-green) calc(var(--score) * 1%), var(--v-mint) 0);
}

.ush-health-ring-inner {
    position: absolute;
    inset: 0.85rem;
    border-radius: 50%;
    background: var(--v-card);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.ush-health-score {
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1;
    color: var(--v-highlight);
}
.dark .ush-health-score { color: var(--v-highlight); }

.ush-health-of { font-size: 0.75rem; color: var(--v-muted); margin-top: 0.3rem; }

.ush-health-body { flex: 1 1 18rem; min-width: 0; }

.ush-health-title { margin: 0; font-size: 1.05rem; font-weight: 600; color: var(--v-text); }

.ush-health-grade { margin: 0.25rem 0 0.9rem; color: var(--v-muted); font-size: 0.8rem; }

.ush-health-bars { display: flex; flex-direction: column; gap: 0.6rem; font-size: 0.8rem; color: var(--v-text); }

.ush-health-bar-head { display: flex; justify-content: space-between; margin-bottom: 0.3rem; }

.ush-health-track {
    display: block;
    flex: 1;
    height: 6px;
    border-radius: 6px;
    background: var(--v-mint);
    overflow: hidden;
}
.ush-health-track > * { display: block; height: 100%; border-radius: 6px; }

.ush-health-facts {
    list-style: none;
    margin: 0;
    padding: 0 1.25rem 0 0;
    border-inline-start: 1px solid var(--v-line);
    display: grid;
    gap: 0.65rem;
    flex: 0 1 15rem;
    font-size: 0.8rem;
    color: var(--v-muted);
}
.ush-health-facts li { display: flex; align-items: baseline; gap: 0.5rem; }
.ush-health-fact-value { font-size: 1.15rem; font-weight: 700; color: var(--v-text); min-width: 2rem; }

@media (max-width: 768px) {
    .ush-health-facts { border-inline-start: 0; padding: 0; flex-basis: 100%; }
}

.ush-dept-table-wrap { overflow-x: auto; margin: -0.25rem -0.25rem 0; }
.ush-dept-table { width: 100%; min-width: 30rem; border-collapse: collapse; font-size: 0.85rem; color: var(--v-text); }
.ush-dept-table th, .ush-dept-table td { text-align: start; padding: 0.7rem 0.5rem; }
.ush-dept-table thead th { color: var(--v-muted); font-weight: 500; font-size: 0.75rem; }
.ush-dept-table tbody tr { border-top: 1px solid var(--v-line-2); }
.ush-dept-table tbody th { font-weight: 600; }
.ush-dept-usage-col { width: 36%; }
.ush-dept-usage { display: flex; align-items: center; gap: 0.5rem; }
.ush-dept-end { text-align: end !important; }

.ush-stack-bar {
    display: flex;
    height: 12px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--v-mint);
}

.ush-stack-legend {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    margin-top: 0.9rem;
    font-size: 0.78rem;
    color: var(--v-muted);
}
.ush-stack-legend strong { display: block; color: var(--v-text); font-size: 0.95rem; }
.ush-stack-legend span { display: inline-flex; align-items: center; gap: 0.35rem; }
.ush-stack-legend i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }

.ush-eco {
    height: 100%;
    box-sizing: border-box;
    padding: 1.4rem 1.5rem;
    border-radius: 22px;
    border: 1px solid var(--v-mint-2);
    background: linear-gradient(160deg, var(--v-mint), var(--v-card));
}
.ush-eco-head { display: flex; align-items: center; gap: 0.5rem; color: var(--v-highlight); font-weight: 600; }
.dark .ush-eco-head { color: var(--v-highlight); }
.ush-eco-value { font-size: 1.8rem; font-weight: 700; color: var(--v-text); margin-top: 0.6rem; }
.ush-eco-value span { font-size: 0.85rem; font-weight: 400; color: var(--v-muted); }
.ush-eco-note { color: var(--v-side-text); font-size: 0.82rem; margin: 0.4rem 0 0.8rem; line-height: 1.7; }

/* ---------- تعديلات التباين ---------- */
/* رأس الجدول وتمرير الصفوف بأخضر أوضح */
.fi-ta-header-cell,
.fi-ta-table > thead > tr {
    background: var(--v-head-bg) !important;
}

.fi-ta-header-cell,
.fi-ta-header-cell .fi-ta-header-cell-label {
    color: var(--v-side-text) !important;
}

.fi-ta-row:hover {
    background: var(--v-row-hover) !important;
}

/* تلميحات الأزرار: خط المنصة وحجم أصغر */
.tippy-box {
    font-family: inherit;
    font-size: 0.75rem !important;
    line-height: 1.4;
}

/* ===== مركز المساعدة ===== */
.ush-help {
    display: grid;
    grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.ush-help-nav {
    position: sticky;
    top: 5rem;
    max-height: calc(100vh - 6.5rem);
    overflow-y: auto;
    background: var(--v-card);
    border: 1px solid var(--v-line);
    border-radius: var(--v-radius);
    padding: 0.75rem;
}

.ush-help-search {
    width: 100%;
    border: 1px solid var(--v-line);
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    font: inherit;
    font-size: 0.875rem;
    color: var(--v-text);
    background: var(--v-page);
}

.ush-help-search:focus {
    outline: 2px solid var(--v-green-3);
    outline-offset: 0;
}

.ush-help-group {
    margin: 1rem 0.25rem 0.25rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--v-muted);
}

.ush-help-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ush-help-link {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 0.125rem;
    text-align: start;
    padding: 0.4rem 0.6rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    color: var(--v-side-text);
    cursor: pointer;
}

.ush-help-link small {
    font-size: 0.7rem;
    color: var(--v-muted);
}

.ush-help-link:hover {
    background: var(--v-mint);
}

.ush-help-link.is-active {
    background: var(--v-green);
    color: var(--v-on-primary);
    font-weight: 600;
}

.ush-help-count,
.ush-help-empty {
    margin: 0.75rem 0.25rem 0.25rem;
    font-size: 0.8rem;
    color: var(--v-muted);
}

.ush-help-article {
    background: var(--v-card);
    border: 1px solid var(--v-line);
    border-radius: var(--v-radius);
    padding: 1.75rem 2rem;
    line-height: 1.9;
    color: var(--v-text);
    min-width: 0;
}

.ush-help-crumb {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--v-gold);
}

.ush-help-article h2 {
    margin: 0.25rem 0 0.5rem;
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--v-highlight);
}

.ush-help-summary {
    margin: 0 0 1rem;
    font-size: 1rem;
    color: var(--v-muted);
}

.ush-help-toc {
    margin: 1rem 0 1.5rem;
    padding: 0.75rem 1rem;
    background: var(--v-mint);
    border-radius: 0.75rem;
    font-size: 0.875rem;
}

.ush-help-toc ol {
    margin: 0.25rem 0 0;
    padding-inline-start: 1.25rem;
    list-style: decimal;
}

.ush-help-toc a {
    color: var(--v-highlight);
    text-decoration: none;
}

.ush-help-toc a:hover {
    text-decoration: underline;
}

.ush-help-section {
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--v-line-2);
    scroll-margin-top: 5rem;
}

.ush-help-section h3 {
    margin: 0 0 0.5rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--v-text);
}

.ush-help-section p {
    margin: 0.5rem 0;
}

.ush-help-items,
.ush-help-steps {
    margin: 0.5rem 0;
    padding-inline-start: 1.5rem;
}

.ush-help-items {
    list-style: disc;
}

.ush-help-steps {
    list-style: decimal;
}

.ush-help-items li,
.ush-help-steps li {
    margin: 0.25rem 0;
}

.ush-help-steps li::marker {
    font-weight: 700;
    color: var(--v-highlight);
}

.ush-help-note {
    margin: 0.75rem 0;
    padding: 0.6rem 0.9rem;
    border-radius: 0.6rem;
    font-size: 0.9rem;
    border-inline-start: 4px solid;
}

.ush-help-note.is-tip {
    background: var(--v-mint);
    border-color: var(--v-green-3);
}

.ush-help-note.is-warning {
    background: var(--v-warn-bg);
    border-color: var(--v-gold);
    color: var(--v-warn-text);
}

/* زر «مساعدة» في رأس الشاشات */
.ush-help-button {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--v-line);
    border-radius: 0.5rem;
    background: var(--v-card);
    color: var(--v-highlight);
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
}

.ush-help-button:hover {
    background: var(--v-mint);
}

.dark .ush-help-article h2,
.dark .ush-help-toc a,
.dark .ush-help-button {
    color: var(--v-highlight);
}

@media (max-width: 960px) {
    .ush-help {
        grid-template-columns: minmax(0, 1fr);
    }

    .ush-help-nav {
        position: static;
        max-height: 18rem;
    }

    .ush-help-article {
        padding: 1.25rem 1rem;
    }
}

/* ===== عبارة الترحيب في صفحة الدخول (من الثيم) ===== */
.ush-login-intro {
    margin-bottom: 0.5rem;
    text-align: center;
}

.ush-login-headline {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--v-highlight);
}

.ush-login-subtitle {
    margin: 0.35rem 0 0;
    font-size: 0.875rem;
    color: var(--v-muted);
    line-height: 1.7;
}

/* ===== استوديو الثيمات ===== */
.ush-studio-presets h3 {
    margin: 0 0 0.6rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--v-muted);
}

.ush-studio-preset-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.ush-studio-preset {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.8rem 0.45rem 0.6rem;
    border: 1px solid var(--v-line);
    border-radius: 999px;
    background: var(--v-card);
    color: var(--v-text);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}

.ush-studio-preset:hover { border-color: var(--v-green-3); }
.ush-studio-preset.is-active { border-color: var(--v-green); box-shadow: 0 0 0 2px color-mix(in srgb, var(--v-green) 25%, transparent); }

.ush-studio-swatch {
    position: relative;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.ush-studio-swatch i {
    position: absolute;
    inset-inline-end: 0;
    bottom: 0;
    width: 50%;
    height: 50%;
}

.ush-studio {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 1.5rem;
    align-items: start;
    margin-top: 1rem;
}

.ush-studio-side {
    position: sticky;
    top: calc(var(--topbar-height) + 1rem);
    display: grid;
    gap: 1rem;
}

.ush-studio-tabs {
    display: flex;
    gap: 0.35rem;
    padding: 0.3rem;
    background: var(--v-card);
    border: 1px solid var(--v-line);
    border-radius: var(--v-radius);
}

.ush-studio-tabs button {
    flex: 1;
    padding: 0.45rem;
    border-radius: var(--v-radius-sm);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--v-muted);
    cursor: pointer;
}

.ush-studio-tabs button.is-active { background: var(--v-mint); color: var(--v-highlight); }

.ush-studio-checks {
    padding: 1rem 1.1rem;
    background: var(--v-card);
    border: 1px solid var(--v-line);
    border-radius: var(--v-radius-lg);
    font-size: 0.82rem;
}

.ush-studio-checks h4 { margin: 0 0 0.5rem; font-weight: 700; color: var(--v-text); }
.ush-studio-checks ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.3rem; }
.ush-studio-checks li { display: flex; justify-content: space-between; color: var(--v-side-text); }
.ush-studio-checks li b { color: #13906b; direction: ltr; }
.ush-studio-checks li.is-fail b { color: #c0392b; }
.ush-studio-checks p { margin: 0.6rem 0 0; color: var(--v-muted); line-height: 1.7; }

/* المعاينة: نسخة مصغّرة من الواجهة بمتغيرات الثيم المحصورة في هذا العنصر */
.ush-studio-preview {
    border: 1px solid var(--v-line);
    border-radius: var(--v-radius-lg);
    overflow: hidden;
    background: var(--v-page);
    color: var(--v-text);
    font-size: 0.8rem;
    min-height: 26rem;
}

.ush-pv-topbar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.9rem;
    background-color: var(--v-green);
    background-image: var(--v-topbar-image);
    color: var(--v-on-primary);
}

.ush-pv-tile {
    width: 2.1rem;
    height: 2.1rem;
    display: grid;
    place-items: center;
    border-radius: 0.7rem;
    background: var(--v-tile-bg);
    border: 1px solid var(--v-tile-border);
    flex-shrink: 0;
}

.ush-pv-tile img { width: 1.5rem; height: 1.5rem; object-fit: contain; }
.ush-pv-tile.is-lg { width: 3rem; height: 3rem; margin: 0 auto 0.6rem; }
.ush-pv-tile.is-lg img { width: 2.1rem; height: 2.1rem; }

.ush-pv-brand { display: flex; flex-direction: column; line-height: 1.2; }
.ush-pv-brand b { font-size: 0.72rem; }
.ush-pv-brand small { font-size: 0.6rem; color: var(--v-gold-2); }

.ush-pv-search {
    margin-inline-start: auto;
    padding: 0.3rem 0.8rem;
    border-radius: var(--v-radius-sm);
    background: color-mix(in srgb, var(--v-on-primary) 12%, transparent);
    color: var(--v-on-primary-muted);
    font-size: 0.7rem;
}

.ush-pv-body { display: grid; grid-template-columns: 9rem minmax(0, 1fr); min-height: 22rem; }

.ush-pv-sidebar {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.8rem 0.5rem;
    background: var(--v-sb-bg);
    border-inline-end: 1px solid var(--v-sb-line);
}

.ush-pv-sidebar p { margin: 0 0.4rem 0.3rem; font-size: 0.65rem; font-weight: 600; color: var(--v-sb-muted); }

.ush-pv-sidebar span {
    display: flex;
    justify-content: space-between;
    padding: 0.4rem 0.55rem;
    border-radius: var(--v-radius-sm);
    color: var(--v-sb-text);
}

.ush-pv-sidebar span.is-active { background: var(--v-sb-active-bg); color: var(--v-sb-active-text); font-weight: 600; }
.ush-pv-sidebar em { font-style: normal; padding: 0 0.4rem; border-radius: 999px; background: var(--v-sb-active-bg); color: var(--v-sb-active-text); font-size: 0.65rem; }

.ush-pv-page { padding: 0.9rem; display: grid; gap: 0.7rem; align-content: start; }

.ush-pv-header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.ush-pv-header strong { font-size: 1rem; color: var(--v-text); }
.ush-pv-header span { display: flex; gap: 0.35rem; }

.ush-pv-btn {
    padding: 0.35rem 0.8rem;
    border-radius: var(--v-radius-sm);
    background: var(--v-green);
    color: var(--v-on-primary);
    font-weight: 600;
    font-size: 0.72rem;
}

.ush-pv-btn.is-gold { background: var(--v-gold); color: var(--v-gold-ink); }
.ush-pv-btn.is-outline { background: var(--v-card); color: var(--v-text); border: 1px solid var(--v-line); }
.ush-pv-btn.is-block { width: 100%; padding: 0.55rem; margin-top: 0.4rem; }

.ush-pv-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }

.ush-pv-stats div {
    padding: 0.7rem;
    background: var(--v-card);
    border: 1px solid var(--v-line);
    border-radius: var(--v-radius-lg);
    display: flex;
    flex-direction: column;
}

.ush-pv-stats small { color: var(--v-muted); font-size: 0.68rem; }
.ush-pv-stats b { font-size: 1.15rem; color: var(--v-text); }

.ush-pv-table { background: var(--v-card); border: 1px solid var(--v-line); border-radius: var(--v-radius-lg); overflow: hidden; }
.ush-pv-table div { display: grid; grid-template-columns: 1fr 1.3fr 0.9fr; padding: 0.45rem 0.7rem; border-top: 1px solid var(--v-line-2); align-items: center; }
.ush-pv-table div.is-head { background: var(--v-head-bg); color: var(--v-side-text); border-top: 0; font-weight: 600; font-size: 0.7rem; }
.ush-pv-table div.is-hover { background: var(--v-row-hover); }

.ush-pv-badge { justify-self: start; padding: 0.1rem 0.5rem; border-radius: 999px; background: #e3f4ec; color: #13906b; font-size: 0.65rem; font-weight: 600; }

.ush-pv-actions { display: flex; align-items: center; gap: 0.8rem; margin: 0; }
.ush-pv-link { color: var(--v-highlight); font-weight: 600; text-decoration: underline; cursor: default; }

.ush-pv-login {
    min-height: 26rem;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    background-color: var(--v-page);
    background-image:
        radial-gradient(circle at 85% -10%, color-mix(in srgb, var(--v-green) 16%, transparent), transparent 45%),
        radial-gradient(circle at 0% 110%, color-mix(in srgb, var(--v-gold) 18%, transparent), transparent 40%);
    background-size: cover;
    background-position: center;
}

.ush-pv-login-card {
    width: min(18rem, 100%);
    padding: 1.3rem;
    background: var(--v-card);
    border-radius: calc(var(--v-radius-lg) + 4px);
    border-top: 4px solid var(--v-green);
    text-align: center;
    display: grid;
    gap: 0.45rem;
}

.ush-pv-headline { margin: 0; font-weight: 700; font-size: 0.95rem; color: var(--v-highlight); }
.ush-pv-subtitle { margin: 0; color: var(--v-muted); font-size: 0.72rem; }

.ush-pv-input {
    display: block;
    padding: 0.5rem 0.7rem;
    text-align: start;
    border: 1px solid var(--v-line);
    border-radius: var(--v-radius-sm);
    color: var(--v-muted);
    font-size: 0.72rem;
}

.ush-pv-docs { padding: 1rem; display: grid; gap: 1rem; background: #eef0f2; min-height: 26rem; align-content: start; }

.ush-pv-doc { background: #fff; border-radius: 6px; overflow: hidden; box-shadow: 0 6px 18px -12px rgba(0, 0, 0, 0.35); color: #1e293b; }
.ush-pv-doc-head { display: flex; justify-content: space-between; align-items: center; padding: 0.7rem 0.9rem; background: var(--v-doc); color: var(--v-doc-on); }
.ush-pv-doc.is-line .ush-pv-doc-head { background: #fff; color: var(--v-doc); border-bottom: 3px solid var(--v-doc); }
.ush-pv-doc-table { padding: 0.7rem 0.9rem; }
.ush-pv-doc-table div { display: grid; grid-template-columns: 1fr 1.4fr; padding: 0.35rem 0.5rem; border-bottom: 1px solid #e2e8f0; }
.ush-pv-doc-table div.is-head { background: var(--v-doc-soft); color: var(--v-doc); font-weight: 700; }

.ush-pv-mail { background: #fff; border-radius: 6px; padding: 1rem; text-align: center; color: #334155; box-shadow: 0 6px 18px -12px rgba(0, 0, 0, 0.35); }
.ush-pv-mail p { margin: 0 0 0.7rem; }
.ush-pv-mail-btn { display: inline-block; padding: 0.5rem 1.1rem; border-radius: 6px; background: var(--v-mail); color: var(--v-mail-on); font-weight: 700; }

@media (max-width: 1100px) {
    .ush-studio { grid-template-columns: minmax(0, 1fr); }
    .ush-studio-side { position: static; }
}

/* ===== مبدّل لغة الزائر (التسجيل والدخول) ===== */
.ush-locale-switch {
    position: fixed;
    top: 1rem;
    inset-inline-end: 1rem;
    z-index: 40;
}

.ush-locale-switch a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.85rem;
    border: 1px solid var(--v-line);
    border-radius: 999px;
    background: var(--v-card);
    color: var(--v-highlight);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 6px 18px -12px rgba(0, 0, 0, 0.4);
}

.ush-locale-switch a:hover {
    background: var(--v-mint);
}