/* v5.css — Dashboard v5 Redesign Styles
   All classes prefixed with v5- to avoid conflicts with main.css
   Phases: topbar, sidemenu, layout, views, hero cards, health bar, skeleton, attention bar, animations, mobile */

@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&display=swap');

/* ===== ANIMATIONS ===== */
@keyframes v5-fadeSlideUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes v5-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
@keyframes v5-slideDown {
    from { transform: translateY(-100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
@keyframes v5-pulseGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(237,137,54,0.3); }
    50% { box-shadow: 0 0 0 6px rgba(237,137,54,0); }
}

/* ===== TOPBAR RESTYLE ===== */
.user-bar.v5-topbar {
    /* Self-positioning so events portal (and any other consumer that
     * doesn't load main.css's .user-bar rule) still pins the topbar. */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--kfcris-primary, #266A74);
    font-family: 'Sakkal Majalla', 'Tajawal', 'Segoe UI', Tahoma, sans-serif;
    height: 60px;
    padding: 0 20px;
    font-size: 13px;
    color: #ffffff;
}
/* Self-defined spacer rule — main.css has the same but events doesn't load it.
 * The flex:1 is what pushes the user menu to the far edge of the topbar. */
.user-bar.v5-topbar .spacer { flex: 1; }

/* ===== THEME TOGGLE BUTTON =====
 * Sits between the spacer and the user-menu — in RTL flex that places
 * it visually to the right of the avatar. Same shape as the contacts
 * portal theme button (p-2 rounded-md text-white/80 hover:bg-white/10). */
.user-bar .v5-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px !important;
    border-radius: 6px !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    color: rgba(255, 255, 255, 0.8) !important;
    cursor: pointer;
    transition: background-color 150ms, color 150ms;
    font-family: inherit;
    box-shadow: none !important;
}
.user-bar .v5-theme-toggle:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}
.user-bar .v5-theme-toggle:focus { outline: 0 !important; }
/* Icon visibility tied to html.dark — moon shown in light mode (default),
 * sun shown when dark mode is active. */
.user-bar .v5-theme-toggle .v5-icon-sun  { display: none; }
html.dark .user-bar .v5-theme-toggle .v5-icon-moon { display: none; }
html.dark .user-bar .v5-theme-toggle .v5-icon-sun  { display: inline-block; }
.v5-topbar-logo {
    height: 44px;
    width: auto;
    margin-inline-start: 8px;
    margin-inline-end: 4px;
    object-fit: contain;
    vertical-align: middle;
    flex-shrink: 0;
}

/* ===== NAV TABS (left of the logo in RTL) =====
 * Verbatim values from contacts nav links:
 *   px-3 py-2 text-sm font-medium rounded-md transition-colors
 *   Inactive: text-white/80 hover:bg-white/10 hover:text-white
 *   Active:   bg-white/20 text-white underline underline-offset-4
 */
.user-bar .v5-nav-tabs {
    display: flex;
    align-items: center;
    gap: 4px;                                          /* gap-1 */
    flex-shrink: 0;
}
.user-bar .v5-nav-tab {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px !important;                      /* px-3 py-2 */
    font-size: 14px;                                   /* text-sm */
    font-weight: 500;                                  /* font-medium */
    border-radius: 6px;                                /* rounded-md */
    color: rgba(255, 255, 255, 0.8) !important;        /* text-white/80 */
    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: background-color 150ms, color 150ms;
    font-family: inherit;
    line-height: 1.2;
    box-shadow: none !important;
}
.user-bar .v5-nav-tab:hover {
    background: rgba(255, 255, 255, 0.1) !important;   /* hover:bg-white/10 */
    color: #ffffff !important;
}
.user-bar .v5-nav-tab:focus { outline: 0 !important; }
.user-bar .v5-nav-tab.active {
    background: rgba(255, 255, 255, 0.2) !important;   /* bg-white/20 */
    color: #ffffff !important;
    text-decoration: underline !important;             /* underline */
    text-underline-offset: 4px;                        /* underline-offset-4 */
}
@media (max-width: 768px) {                            /* hidden md:flex equivalent */
    .user-bar .v5-nav-tabs { display: none; }
}

/* ===== USER MENU — verbatim copy of kfcris-contacts Navbar identity unit.
 * Source: rendered HTML of <nav> on kfcris-contacts.vercel.app
 *   + src/components/layout/Navbar.tsx + SelfAvatarButton.tsx in the cloned repo.
 * Tailwind classes → resolved hex/px values. !important present only where
 * needed to beat main.css's .user-bar button rule (border + color + padding). */

.user-bar .v5-user-menu {                              /* container: flex items-center gap-1 */
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

/* Avatar wrap = `<div class="relative">`. Anchor for the status dot. */
.user-bar .v5-self-avatar-wrap {
    position: relative;
    line-height: 0;
    flex-shrink: 0;
}

/* Avatar button: rounded-full, w-7 h-7 (28px), text-white font-semibold,
 * p-0 border-0 overflow-hidden, hover:scale-105 transition-all.
 * Inline-style equivalents from rendered HTML:
 *   width:28px; height:28px;
 *   background-color: rgb(255, 193, 7);   <-- #FFC107 amber, Hajjar's user color
 *   font-size:12px;
 *   box-shadow: 0 0 0 3px #FFC107, 0 0 0 4px var(--ring-bg, white);
 *
 * --ring-bg defaults to white per contacts globals.css. */
.user-bar .v5-self-avatar {
    width: 28px !important;
    height: 28px !important;
    border-radius: 9999px;                             /* rounded-full */
    background-color: #ffffff;                         /* clean white circle (no yellow) */
    color: var(--kfcris-primary, #266A74);             /* brand teal initial */
    font-size: 12px;
    font-weight: 600;                                  /* font-semibold */
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;                             /* p-0 */
    border: 0 !important;                              /* border-0; also kills main.css */
    outline: 0 !important;
    overflow: hidden;                                  /* overflow-hidden */
    cursor: pointer;
    transition: transform 150ms, box-shadow 150ms;     /* transition-all */
    box-shadow: none !important;                       /* no glow — that recipe is for presence rings; we don't have presence here */
    font-family: inherit;
    line-height: 1;
    margin: 0;
}
.user-bar .v5-self-avatar:hover { transform: scale(1.05); }
.user-bar .v5-self-avatar:focus { outline: 0 !important; }

/* Status dot: absolute bottom-0 end-0, w-2.5 h-2.5 (9px from inline style),
 * rounded-full, ring-2 ring-white (= box-shadow 0 0 0 2px white),
 * pointer-events-none, z-1.
 * background-color: rgb(76,175,80) = #4CAF50 (status online). */
.user-bar .v5-self-avatar-status {
    position: absolute;
    bottom: 0;
    inset-inline-end: 0;
    width: 9px;
    height: 9px;
    border-radius: 9999px;
    background-color: #4CAF50;
    box-shadow: 0 0 0 2px #ffffff;
    pointer-events: none;
    z-index: 1;
}

/* Name wrap = `<div class="relative">`. Anchor for the dropdown. */
.user-bar .v5-name-wrap {
    position: relative;
    flex-shrink: 0;
}

/* Name trigger button: flex items-center gap-2 px-2 py-1.5 rounded-md
 * text-white/80 hover:bg-white/10 hover:text-white transition-colors. */
.user-bar .v5-user-trigger {
    display: flex !important;
    align-items: center;
    gap: 8px;                                          /* gap-2 */
    padding: 6px 8px !important;                       /* py-1.5 px-2 */
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    color: rgba(255, 255, 255, 0.8);                   /* text-white/80 */
    border-radius: 6px;                                /* rounded-md */
    cursor: pointer;
    font-family: inherit;
    transition: background-color 150ms, color 150ms;
    box-shadow: none !important;
}
.user-bar .v5-user-trigger:hover {
    background: rgba(255, 255, 255, 0.1) !important;   /* hover:bg-white/10 */
    color: #ffffff;
}
.user-bar .v5-user-trigger:focus { outline: 0 !important; }

/* Name span: text-sm font-medium. */
.user-bar .v5-user-name {
    font-size: 14px;                                   /* text-sm */
    font-weight: 500;                                  /* font-medium */
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Chevron: w-4 h-4 transition-transform; rotate-180 when open. */
.user-bar .v5-user-chevron {
    width: 16px;
    height: 16px;
    transition: transform 150ms;
    flex-shrink: 0;
}
.user-bar .v5-user-trigger[aria-expanded="true"] .v5-user-chevron {
    transform: rotate(180deg);
}

/* Dropdown panel: absolute end-0 mt-1 w-60 rounded-md shadow-lg
 * bg-white ring-1 ring-black/10 overflow-hidden. */
.user-bar .v5-user-dropdown {
    position: absolute;
    top: calc(100% + 4px);                             /* mt-1 */
    inset-inline-end: 0;                               /* end-0 */
    width: 240px;                                      /* w-60 */
    background: #ffffff;                               /* bg-white */
    border-radius: 6px;                                /* rounded-md */
    /* shadow-lg + ring-1 ring-black/10 */
    box-shadow:
        0 10px 15px -3px rgba(0, 0, 0, 0.1),
        0 4px 6px -4px rgba(0, 0, 0, 0.1),
        0 0 0 1px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    z-index: 1300;
}

/* User-info header: px-4 py-3 border-b border-gray-200. */
.user-bar .v5-user-info {
    padding: 12px 16px;
    border-bottom: 1px solid #e5e7eb;                  /* border-gray-200 */
}
.user-bar .v5-user-info-name {
    margin: 0;
    font-size: 14px;                                   /* text-sm */
    font-weight: 500;                                  /* font-medium */
    color: #111827;                                    /* text-gray-900 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Position pill — copy of contacts roleBadge:
 * inline-block mt-1 px-2 py-0.5 text-xs font-medium rounded-full
 * bg-primary/10 text-primary. */
.user-bar .v5-user-info-pill {
    display: inline-block;
    margin-top: 4px;                                   /* mt-1 */
    padding: 2px 8px;                                  /* py-0.5 px-2 */
    border-radius: 9999px;                             /* rounded-full */
    background: var(--kfcris-primary-tint-10, rgba(38, 106, 116, 0.1));
    color: var(--kfcris-primary, #266A74);
    font-size: 12px;                                   /* text-xs */
    font-weight: 500;                                  /* font-medium */
    line-height: 1.4;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Items group: py-1 — wraps each section of items. */
.user-bar .v5-user-dropdown-items { padding: 4px 0; }

/* Divider between sections: border-t border-gray-200. */
.user-bar .v5-user-dropdown-divider {
    border-top: 1px solid #e5e7eb;
    height: 0;
}

/* Dropdown item (DropdownItem from contacts): flex items-center gap-3
 * w-full text-start px-4 py-2 text-sm transition-colors
 * text-gray-700 hover:bg-gray-100. */
.user-bar .v5-dropdown-item {
    display: flex !important;
    align-items: center;
    gap: 12px;                                         /* gap-3 */
    width: 100%;
    padding: 8px 16px !important;                      /* py-2 px-4 */
    border: 0 !important;
    outline: 0 !important;
    background: transparent;
    color: #374151 !important;                         /* text-gray-700 */
    font-size: 14px;                                   /* text-sm */
    font-weight: 400;
    font-family: inherit;
    text-align: start;
    cursor: pointer;
    text-decoration: none;
    border-radius: 0;
    transition: background-color 150ms;
    box-shadow: none !important;
}
.user-bar .v5-dropdown-item:hover { background: #f3f4f6 !important; }   /* hover:bg-gray-100 — colour stays, only bg changes */
.user-bar .v5-dropdown-item:focus { outline: 0 !important; }
.user-bar .v5-dropdown-item .v5-di-icon { width: 16px; height: 16px; flex-shrink: 0; }

/* Logout: text-red-600 dark:text-red-400 hover:bg-gray-100 (NOT a red bg). */
.user-bar .v5-dropdown-item-danger { color: #dc2626 !important; }       /* text-red-600 */
.user-bar .v5-dropdown-item-danger:hover { background: #f3f4f6 !important; color: #dc2626 !important; }
.user-bar.v5-topbar .user-name {
    font-weight: 700;
    font-size: 13px;
}
.user-bar.v5-topbar button,
.user-bar.v5-topbar .bar-link {
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.75);
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 11px;
    transition: all 0.15s;
}
.user-bar.v5-topbar button:hover,
.user-bar.v5-topbar .bar-link:hover {
    background: rgba(255,255,255,0.14);
    color: white;
}

/* ===== V5 BODY ===== */
body.v5-active {
    font-family: 'Sakkal Majalla', 'Tajawal', 'Segoe UI', Tahoma, sans-serif;
    background: #f4f6fb;
    padding: 60px 0 0 0;   /* reserve 60px top for fixed v5-topbar (overrides main.css's 20px + has-user-bar's 52px) */
    margin: 0;
    height: 100vh;          /* HARD lock to viewport so children can't push the footer off-screen */
    overflow: hidden;       /* page itself never scrolls — internal scroll lives in v5-main */
    display: flex;
    flex-direction: column;
    color: #1F2937;
}
/* Minimal dark-mode coverage so the theme toggle has visible effect.
 * Deep page-content theming is a follow-up. */
html.dark body.v5-active { background: var(--kfcris-bg-dark, #1A1C24); color: var(--kfcris-text-on-dark, #ffffff); }
html.dark .v5-sidemenu { background: var(--kfcris-bg-dark-card, #2A2D35); border-inline-start-color: var(--kfcris-border-dark, #3A3D45); }
html.dark .v5-menu-item { color: rgba(255, 255, 255, 0.7); }
html.dark .v5-menu-item:hover { background: var(--kfcris-bg-dark-hover, #353840); color: #ffffff; }
html.dark .v5-menu-item svg { color: rgba(255, 255, 255, 0.6); }
html.dark .v5-menu-item:hover svg { color: #ffffff; }
html.dark .v5-mi-label { color: rgba(255, 255, 255, 0.7); }
html.dark .v5-menu-item:hover .v5-mi-label { color: #ffffff; }
html.dark .v5-menu-divider { background: var(--kfcris-border-dark, #3A3D45); }
/* Active pill keeps teal on white in dark mode too — strong identity. */

/* Topbar in dark mode — same recipe as the contacts portal navbar:
 * deep dark bg (#0A0B12) so it stays cohesive with the dark page. */
html.dark .user-bar.v5-topbar {
    background: var(--kfcris-bg-dark-deep, #0A0B12);
    border-bottom: 1px solid var(--kfcris-border-dark, #3A3D45);
    color: #ffffff;
}

/* Page titles: invert to white in dark mode. Covers every header
 * across the suite — overview SPA, projects_table, events pages. */
html.dark .v5-page-title,
html.dark .v5-view-header-title,
html.dark .pt-header h1,
html.dark .page-header h1 {
    color: #ffffff !important;
}
/* Subtitles + page-header description text become lighter gray
 * (still readable, not a flat white). */
html.dark .v5-page-subtitle,
html.dark .page-header p {
    color: #9CA3AF !important;   /* gray-400 */
}

/* ===== LAYOUT ===== */
.v5-layout {
    display: flex;
    flex: 1;          /* fill the space between fixed topbar (60px reserved via body padding-top) and footer */
    min-height: 0;
}

/* ===== FOOTER ===== */
.v5-footer {
    flex-shrink: 0;
    padding: 8px 16px;
    text-align: center;
    font-size: 12px;
    line-height: 1.4;
    color: #6B7280;
    border-top: 1px solid var(--kfcris-border, #E0E0E0);
    cursor: default;
    background: transparent;   /* inherit body bg (#f4f6fb) so footer is continuous with the page */
}
.v5-footer p { margin: 0; }
.v5-footer p + p { margin-top: 2px; }
html.dark .v5-footer {
    color: #9CA3AF;
    border-top-color: var(--kfcris-border-dark, #3A3D45);
    background: transparent;
}

/* ===== SIDE MENU ===== */
/* EXPERIMENT 2026-05-20: light sidebar with teal-pill active state,
 * mirroring the kfcris-contacts left-rail pattern. Inverts the
 * previous dark-teal sidebar so it doesn't visually clash with the
 * dark topbar. Topbar styling unchanged. */
.v5-sidemenu {
    width: 68px;
    background: #ffffff;                                 /* was: brand primary teal */
    border-inline-start: 1px solid var(--kfcris-border, #E0E0E0);   /* trailing-edge border (LEFT in RTL) */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 0;
    gap: 2px;
    position: sticky;
    top: 60px;
    height: calc(100vh - 60px - 56px);
    overflow: hidden;
    flex-shrink: 0;
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 100;
}
.v5-sidemenu:hover {
    width: 180px;
    box-shadow: -6px 0 24px rgba(0, 0, 0, 0.08);          /* lighter shadow against light bg */
}
.v5-menu-item {
    width: calc(100% - 16px);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 8px 9px 12px;
    border-radius: 9999px;                                /* full pill — matches contacts */
    cursor: pointer;
    transition: all 0.15s;
    text-decoration: none;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    border: none;
    background: none;
    font-family: inherit;
    color: #4B5563;                                       /* gray-600 — dark text on white bg */
}
.v5-menu-item:hover { background: #F3F4F6; color: #111827; }   /* gray-100 hover, gray-900 text */
.v5-menu-item.active {
    background: var(--kfcris-primary, #266A74);           /* teal pill */
    color: #ffffff;
}
/* Old accent bar removed — the pill IS the indicator now. Keep the rule
 * present but inert so any future restyle can re-enable it cleanly. */
.v5-menu-item.active::before { content: none; }
.v5-menu-item svg {
    width: 20px; height: 20px; min-width: 20px;
    color: #6B7280;                                       /* gray-500 — visible on white */
    transition: color 0.15s;
}
.v5-menu-item:hover svg { color: #111827; }
.v5-menu-item.active svg { color: #ffffff; }              /* white icon on teal pill */
.v5-mi-label {
    font-size: 12px; font-weight: 600;
    color: #4B5563;                                       /* same as parent gray text */
    opacity: 0; transition: opacity 0.2s;
}
.v5-sidemenu:hover .v5-mi-label { opacity: 1; }
.v5-menu-item:hover .v5-mi-label { color: #111827; }
.v5-menu-item.active .v5-mi-label { color: #ffffff; }     /* white label on teal pill */
.v5-mi-badge {
    position: absolute; top: 3px; left: 6px;
    min-width: 16px; height: 16px;
    background: #e53e3e; color: white;
    font-size: 9px; font-weight: 700;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    padding: 0 3px;
}
.v5-menu-divider { width: 32px; height: 1px; background: var(--kfcris-border, #E0E0E0); margin: 8px 0; }
.v5-menu-spacer { flex: 1; }

/* ===== MAIN CONTENT ===== */
.v5-main {
    flex: 1;
    padding: 20px 32px 40px;
    min-width: 0;
    /* No max-width: v5-main fills the full v5-layout width so the
     * scrollbar lives at the actual left edge of the viewport (RTL).
     * Inner content (page-container, v5-hero-row, etc.) imposes its
     * own max-width + margin:auto to stay centered when needed. */
    overflow-y: auto;     /* internal scroll — keeps topbar + footer pinned */
    min-height: 0;
}
/* Centre the legacy hero/priority/calendar rows on wide monitors now
 * that v5-main no longer caps width itself. */
.v5-hero-row,
.v5-priority-row,
.v5-cal-row,
.v5-page-header,
.v5-tabs-row,
.v5-view-header,
.v5-tracks-grid,
.v5-act-grid,
.v5-del-grid,
.v5-team-stats {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* ===== VIEW PANELS ===== */
.v5-view-panel { display: none; }
.v5-view-panel.active { display: block; }

/* ===== PAGE HEADER ===== */
.v5-page-header {
    text-align: center;
    margin-bottom: 16px;
    animation: v5-fadeSlideUp 0.4s ease-out;
}
.v5-page-title { font-size: 24px; font-weight: 800; color: var(--kfcris-teal-700, #1a365d); font-family: 'Greta Arabic', 'Sakkal Majalla', 'Tajawal', 'Segoe UI', Tahoma, sans-serif; }
.v5-page-subtitle { font-size: 13px; color: #718096; font-weight: 500; margin-top: 2px; }

/* ===== TABS ROW ===== */
.v5-tabs-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    animation: v5-fadeSlideUp 0.4s ease-out 0.05s both;
}
.v5-my-pill {
    display: inline-flex; align-items: center; gap: 5px;
    background: white; border: 1.5px solid #e2e8f0; border-radius: 20px;
    padding: 5px 14px; font-size: 12px; font-weight: 600; color: #718096; cursor: pointer;
    transition: all 0.15s; font-family: inherit;
}
.v5-my-pill:hover { border-color: var(--kfcris-primary, #3182ce); color: var(--kfcris-primary, #3182ce); }
.v5-my-pill.active { border-color: #38a169; color: #38a169; background: #f0fff4; }
.v5-my-pill svg { width: 14px; height: 14px; }
.v5-initiation-pills {
    display: inline-flex; background: white; border-radius: 10px; padding: 3px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 0 1px rgba(0,0,0,0.04);
}
.v5-init-pill {
    padding: 7px 16px; font-size: 12px; font-weight: 600; color: #718096;
    text-decoration: none; border-radius: 8px; transition: all 0.2s; cursor: pointer;
    font-family: inherit; border: none; background: none;
}
.v5-init-pill:hover { color: #2d3748; background: #f7fafc; }

/* ===== HERO CARDS ===== */
.v5-hero-row { display: flex; gap: 12px; margin-bottom: 24px; }
.v5-hero-card {
    flex: 1; padding: 12px 14px; border-radius: 12px; text-align: center;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08), 0 4px 16px rgba(0,0,0,0.04);
    animation: v5-fadeSlideUp 0.5s ease-out both;
}
.v5-hero-card:nth-child(1) { animation-delay: 0.1s; }
.v5-hero-card:nth-child(2) { animation-delay: 0.2s; }
.v5-hero-card:nth-child(3) { animation-delay: 0.3s; }
.v5-hero-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.15), 0 2px 8px rgba(0,0,0,0.06); }
.v5-hero-card:active { transform: translateY(-1px) scale(0.98); box-shadow: 0 2px 6px rgba(0,0,0,0.1); }
.v5-hero-card .v5-h-count { display: block; font-size: 26px; font-weight: 800; color: white; line-height: 1; }
.v5-hero-card .v5-h-label { display: block; font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.85); margin-top: 3px; }
.v5-hero-card.completed { background: linear-gradient(135deg, #2f855a, #1a4731); }
.v5-hero-card.in-progress { background: linear-gradient(135deg, var(--kfcris-primary, #2b6cb0), var(--kfcris-teal-700, #1a365d)); }
.v5-hero-card.not-started { background: linear-gradient(135deg, #718096, #4a5568); }

/* ===== STACKED HEALTH BAR ===== */
.v5-health-bar-wrap { margin-top: 10px; }
.v5-health-bar-stack {
    display: flex; height: 6px; border-radius: 3px; overflow: hidden;
    background: rgba(255,255,255,0.15);
}
.v5-health-bar-seg { height: 100%; transition: width 0.6s ease-out; cursor: pointer; }
.v5-health-bar-seg.green { background: #68d391; }
.v5-health-bar-seg.amber { background: #f6ad55; }
.v5-health-bar-seg.red { background: #fc8181; }
.v5-health-bar-legend {
    display: flex; justify-content: center; gap: 10px; margin-top: 5px;
}
.v5-health-legend-item {
    display: flex; align-items: center; gap: 3px;
    font-size: 10px; color: rgba(255,255,255,0.75); font-weight: 600;
    cursor: pointer;
}
.v5-health-legend-item:hover { color: white; }
.v5-health-legend-dot { width: 6px; height: 6px; border-radius: 50%; }

/* ===== SECTION ===== */
.v5-section { margin-bottom: 24px; }
.v5-section-title {
    font-size: 13px; font-weight: 700; color: #a0aec0;
    margin-bottom: 10px; display: flex; align-items: center; gap: 8px;
}
.v5-section-title::after { content: ''; flex: 1; height: 1px; background: #e8ecf2; }

/* ===== PRIORITY ROW ===== */
.v5-priority-row { display: flex; gap: 10px; flex-wrap: wrap; }
.v5-pri-card {
    flex: 1; min-width: 180px; background: white; border-radius: 12px; padding: 16px;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.02);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s;
    display: flex; align-items: center; gap: 14px;
    border-right: 4px solid transparent;
    animation: v5-fadeSlideUp 0.5s ease-out both;
}
.v5-pri-card:nth-child(1) { animation-delay: 0.15s; }
.v5-pri-card:nth-child(2) { animation-delay: 0.25s; }
.v5-pri-card:nth-child(3) { animation-delay: 0.35s; }
.v5-pri-card:nth-child(4) { animation-delay: 0.45s; }
.v5-pri-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.1), 0 2px 6px rgba(0,0,0,0.04); }
.v5-pri-card:active { transform: translateY(0) scale(0.98); }
.v5-pri-card.special { border-right-color: #2f855a; }
.v5-pri-card.directives { border-right-color: var(--kfcris-primary, #2c5282); }
.v5-pri-card.unserved { border-right-color: #c53030; }
.v5-pri-card.approval { border-right-color: #dd6b20; }
.v5-pri-card.missing { border-right-color: #d69e2e; }
.v5-pri-icon {
    width: 40px; height: 40px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.v5-pri-icon svg { width: 20px; height: 20px; color: white; }
.v5-pri-info { flex: 1; min-width: 0; }
.v5-pri-count { font-size: 24px; font-weight: 800; line-height: 1; }
.v5-pri-label { font-size: 12px; font-weight: 500; color: #718096; margin-top: 2px; }

/* ===== CALENDAR ROW ===== */
.v5-cal-row { display: flex; gap: 10px; }
.v5-cal-card {
    flex: 1; background: white; border-radius: 12px; padding: 18px 16px;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.02);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s;
    display: flex; align-items: flex-start; gap: 14px;
    animation: v5-fadeSlideUp 0.5s ease-out both;
}
.v5-cal-card:nth-child(1) { animation-delay: 0.2s; }
.v5-cal-card:nth-child(2) { animation-delay: 0.3s; }
.v5-cal-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.1), 0 2px 6px rgba(0,0,0,0.04); }
.v5-cal-card:active { transform: translateY(0) scale(0.98); }
.v5-cal-icon-wrap {
    width: 48px; height: 48px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.v5-cal-icon-wrap svg { width: 24px; height: 24px; }
.v5-cal-info { flex: 1; }
.v5-cal-label { font-size: 15px; font-weight: 700; }
.v5-cal-detail { font-size: 11px; color: #a0aec0; margin-top: 6px; line-height: 1.6; }
.v5-cal-detail span { display: block; }

/* ===== VIEW HEADER ===== */
.v5-view-header {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 20px; padding-bottom: 14px;
    border-bottom: 1px solid #e8ecf2;
    animation: v5-fadeSlideUp 0.4s ease-out;
}
.v5-view-header-icon {
    width: 40px; height: 40px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
}
.v5-view-header-icon svg { width: 20px; height: 20px; color: white; }
.v5-view-header-title { font-size: 20px; font-weight: 800; color: var(--kfcris-teal-700, #1a365d); font-family: 'Greta Arabic', 'Sakkal Majalla', 'Tajawal', 'Segoe UI', Tahoma, sans-serif; }
.v5-view-header-sub { font-size: 12px; color: #a0aec0; }

/* ===== TRACKS VIEW ===== */
.v5-tracks-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.v5-track-card {
    background: white; border-radius: 12px; padding: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.02);
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s;
    border-top: 3px solid;
    animation: v5-fadeSlideUp 0.5s ease-out both;
}
.v5-track-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.1), 0 2px 6px rgba(0,0,0,0.04); }
.v5-track-card:active { transform: translateY(-1px) scale(0.98); }
.v5-track-name { font-size: 13px; font-weight: 700; color: var(--kfcris-teal-700, #1a365d); margin-bottom: 8px; }
.v5-track-count { font-size: 28px; font-weight: 800; line-height: 1; }
.v5-track-label { font-size: 11px; color: #a0aec0; margin-top: 2px; }
.v5-track-bar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; margin-top: 10px; gap: 1px; }
.v5-track-bar-seg { height: 100%; border-radius: 2px; }
.v5-track-programs { font-size: 10px; color: #a0aec0; margin-top: 8px; line-height: 1.5; }
.v5-track-programs span {
    display: inline-block; background: #f7fafc; padding: 1px 6px;
    border-radius: 4px; margin: 1px 0; margin-left: 3px;
}

/* ===== ACTIVITIES VIEW ===== */
.v5-act-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.v5-act-card {
    background: white; border-radius: 12px; padding: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.02);
    display: flex; align-items: center; gap: 14px;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s;
    animation: v5-fadeSlideUp 0.5s ease-out both;
}
.v5-act-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.1); }
.v5-act-card:active { transform: translateY(0) scale(0.98); }
.v5-act-icon {
    width: 44px; height: 44px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; flex-shrink: 0;
}
.v5-act-info { flex: 1; }
.v5-act-name { font-size: 13px; font-weight: 700; color: #2d3748; }
.v5-act-count { font-size: 22px; font-weight: 800; }
.v5-act-sub { font-size: 11px; color: #a0aec0; }

/* ===== DELIVERABLES VIEW ===== */
.v5-del-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.v5-del-card {
    background: white; border-radius: 12px; padding: 18px 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.02);
    text-align: center; cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s;
    animation: v5-fadeSlideUp 0.5s ease-out both;
}
.v5-del-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
.v5-del-card:active { transform: translateY(-1px) scale(0.98); }
.v5-del-icon { font-size: 28px; margin-bottom: 6px; }
.v5-del-count { font-size: 32px; font-weight: 800; line-height: 1; }
.v5-del-name { font-size: 12px; font-weight: 600; color: #718096; margin-top: 4px; }
.v5-del-subs { font-size: 10px; color: #a0aec0; margin-top: 4px; }

/* ===== TEAM VIEW ===== */
.v5-team-stats { display: flex; gap: 10px; margin-bottom: 16px; }
.v5-team-stat {
    flex: 1; background: white; border-radius: 12px; padding: 14px; text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.02);
    animation: v5-fadeSlideUp 0.5s ease-out both;
}
.v5-team-stat .v5-ts-count { font-size: 28px; font-weight: 800; color: var(--kfcris-teal-700, #1a365d); line-height: 1; }
.v5-team-stat .v5-ts-label { font-size: 11px; color: #a0aec0; margin-top: 2px; }
.v5-team-tabs {
    display: flex; gap: 0; margin-bottom: 12px; border-radius: 8px; overflow: hidden; border: 1px solid var(--kfcris-primary, #2b6cb0);
}
.v5-team-tab {
    flex: 1; padding: 8px; text-align: center; cursor: pointer;
    font-size: 13px; font-weight: 600; border: none; font-family: inherit;
    transition: all 0.15s;
}
.v5-team-tab.active { background: var(--kfcris-primary, #2b6cb0); color: white; }
.v5-team-tab:not(.active) { background: white; color: var(--kfcris-primary, #2b6cb0); }

/* ===== UNSERVED VIEW ===== */
.v5-ko-grid { display: flex; flex-direction: column; gap: 10px; }
.v5-ko-card {
    background: white; border-radius: 12px; padding: 16px 18px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.02);
    border-right: 4px solid #c53030;
    animation: v5-fadeSlideUp 0.5s ease-out both;
}
.v5-ko-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.v5-ko-code {
    background: #fed7d7; color: #9b2c2c; font-size: 12px; font-weight: 700;
    padding: 3px 10px; border-radius: 6px;
}
.v5-ko-title { font-size: 14px; font-weight: 700; color: var(--kfcris-teal-700, #1a365d); flex: 1; }
.v5-ko-count-badge { font-size: 11px; color: #c53030; background: #fff5f5; padding: 2px 8px; border-radius: 6px; }
.v5-unserved-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; background: #fff5f5; border-radius: 8px;
    cursor: pointer; transition: all 0.15s; margin-bottom: 6px;
}
.v5-unserved-item:hover { background: #fed7d7; transform: translateX(-2px); }
.v5-unserved-code { font-size: 11px; font-weight: 700; color: #c53030; min-width: 36px; }
.v5-unserved-name { font-size: 12px; color: #4a5568; flex: 1; }
.v5-unserved-count { font-size: 11px; color: #c53030; font-weight: 600; }

/* ===== SKELETON LOADING ===== */
.v5-skeleton-screen {
    position: fixed; inset: 0; z-index: 9999;
    background: #f4f6fb;
    display: flex; flex-direction: column;
    transition: opacity 0.3s;
}
.v5-skeleton-screen.fade-out { opacity: 0; pointer-events: none; }
.v5-skel-topbar { height: 60px; background: var(--kfcris-primary, #266A74); }
.v5-skel-body { display: flex; flex: 1; }
.v5-skel-menu { width: 68px; background: var(--kfcris-primary, #266A74); }
.v5-skel-main { flex: 1; padding: 24px 32px; }
.v5-skel-block {
    border-radius: 12px;
    background: linear-gradient(90deg, #e2e8f0 25%, #edf2f7 50%, #e2e8f0 75%);
    background-size: 400% 100%;
    animation: v5-shimmer 1.5s ease-in-out infinite;
}
.v5-skel-title { width: 200px; height: 28px; margin: 0 auto 12px; }
.v5-skel-sub { width: 140px; height: 16px; margin: 0 auto 20px; }
.v5-skel-row { display: flex; gap: 12px; margin-bottom: 16px; }
.v5-skel-card { flex: 1; height: 80px; }
.v5-skel-wide { height: 64px; margin-bottom: 12px; }

/* ===== ATTENTION BAR ===== */
.v5-attention-bar {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 20px;
    background: linear-gradient(90deg, #fefcbf, #fef3cd);
    border-bottom: 2px solid #ecc94b;
    font-size: 12px; font-weight: 600; color: #744210;
    animation: v5-slideDown 0.4s ease-out;
    position: sticky; top: 60px; z-index: 90;
    margin-right: 68px;
    transition: margin-right 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.v5-attention-bar .v5-att-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #dd6b20;
    animation: v5-pulseGlow 2s infinite;
    flex-shrink: 0;
}
.v5-attention-bar .v5-att-text { flex: 1; }
.v5-attention-bar .v5-att-action {
    background: #dd6b20; color: white;
    padding: 3px 12px; border-radius: 6px;
    font-size: 11px; font-weight: 700; cursor: pointer;
    border: none; font-family: inherit;
    transition: background 0.15s;
}
.v5-attention-bar .v5-att-action:hover { background: #c05621; }
.v5-attention-bar .v5-att-close {
    background: none; border: none; color: #975a16;
    font-size: 16px; cursor: pointer; padding: 0 4px;
    line-height: 1;
}

/* ===== PROFILE VIEW ===== */
.v5-profile-card {
    background: white; border-radius: 12px; padding: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.02);
    margin-bottom: 16px;
    animation: v5-fadeSlideUp 0.5s ease-out both;
}
.v5-profile-card-title {
    font-size: 16px; font-weight: 700; color: var(--kfcris-teal-700, #1a365d); margin-bottom: 12px;
}
.v5-profile-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 0; border-bottom: 1px solid #f0f0f0;
}
.v5-profile-row:last-child { border-bottom: none; }
.v5-profile-row-label { color: #718096; font-size: 13px; }
.v5-profile-row-value { font-weight: 500; font-size: 14px; color: #2d3748; }
.v5-profile-badge {
    color: white; padding: 2px 14px; border-radius: 10px;
    font-size: 13px; font-weight: 600;
}

/* ===== GOALS ===== */
.v5-goals-pillar { border-bottom: 1px solid #f0f0f0; }
.v5-goals-pillar:last-child { border-bottom: none; }
.v5-goals-pillar-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 20px; border-right: 4px solid;
    background: #fafbfc;
}
.v5-goal-item {
    cursor: pointer; transition: background 0.15s;
}
.v5-goal-item:hover { background: #f7fafc; }
.v5-goal-header {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 20px;
}
.v5-goal-seq {
    width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.v5-goal-text {
    flex: 1; font-size: 13px; color: #2d3748; line-height: 1.5;
}
.v5-goal-weight {
    font-size: 12px; font-weight: 700; color: #718096;
    background: #edf2f7; padding: 2px 8px; border-radius: 6px; flex-shrink: 0;
}
.v5-goal-detail {
    padding: 0 20px 16px 20px; margin-right: 38px;
    border-top: 1px dashed #e2e8f0;
}
.v5-goal-detail-row {
    margin-top: 10px;
}
.v5-goal-detail-label {
    display: block; font-size: 11px; font-weight: 700; color: #a0aec0;
    margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px;
}
.v5-goal-detail-value {
    font-size: 12px; color: #4a5568; line-height: 1.6;
    padding: 2px 0;
}

/* ===== GOAL CHIPS & ACTIVITY LINKS ===== */
.v5-goals-serve-bar {
    margin: 0 20px 12px; padding: 8px 14px;
    border-radius: 8px; font-size: 13px; font-weight: 600;
    text-align: center;
}
.v5-goals-serve-warn {
    background: #fffbeb; color: #b7791f; border: 1px solid #fbd38d;
}
.v5-goals-serve-ok {
    background: #f0fff4; color: #276749; border: 1px solid #9ae6b4;
}
.v5-goal-warn {
    font-size: 16px; color: #d69e2e; flex-shrink: 0; margin-right: -2px;
}
.v5-goal-chips-row {
    display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px;
}
.v5-align-chip {
    display: inline-block; padding: 3px 10px; border-radius: 12px;
    font-size: 11px; font-weight: 700; cursor: pointer;
    transition: filter 0.15s, transform 0.1s; user-select: none;
}
.v5-align-chip:hover { filter: brightness(0.92); transform: scale(1.05); }
.v5-align-chip-ko { background: #ebf4ff; color: var(--kfcris-primary, #2c5282); border: 1px solid #bee3f8; }
.v5-align-chip-sa { background: #f0fff4; color: #276749; border: 1px solid #9ae6b4; }
.v5-align-chip-kpi { background: #faf5ff; color: #6b46c1; border: 1px solid #d6bcfa; }
#v5-chip-popup {
    display: none; position: absolute; z-index: 1000;
    background: white; border: 1px solid #e2e8f0; border-radius: 10px;
    padding: 12px 16px; max-width: 350px; font-size: 12px;
    color: #2d3748; line-height: 1.6;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.v5-goal-activity {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 0; font-size: 12px; color: #4a5568;
}
.v5-goal-activity-id {
    font-family: 'SF Mono', 'Menlo', monospace; font-size: 11px;
    background: #edf2f7; color: #2d3748; padding: 2px 7px;
    border-radius: 4px; font-weight: 600; flex-shrink: 0;
}
.v5-goal-activity-name { flex: 1; }
.v5-goal-activity-match {
    font-size: 10px; font-weight: 700; color: #276749;
    background: #c6f6d5; padding: 2px 8px; border-radius: 8px; flex-shrink: 0;
}
.v5-goal-no-activity {
    font-size: 12px; color: #a0aec0; font-style: italic; padding: 4px 0;
}

/* ===== GOAL INDICATORS ===== */
.v5-goal-indicators {
    padding: 4px 0 4px 28px; margin-top: 2px;
}
.v5-indicator-row {
    display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 12px; color: #4a5568;
}
.v5-ind-bullet {
    width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.v5-ind-text {
    flex: 1; line-height: 1.5;
}
.v5-ind-target {
    background: #edf2f7; color: #4a5568; padding: 1px 8px; border-radius: 8px; font-size: 11px; font-weight: 600; white-space: nowrap;
}
.v5-ind-proj {
    background: #ebf8ff; color: var(--kfcris-primary, #2c5282); padding: 1px 6px; border-radius: 4px; font-size: 10px; font-family: 'SF Mono','Fira Code',monospace; cursor: pointer; white-space: nowrap;
}
.v5-ind-proj:hover { background: #bee3f8; }

/* ===== MY GOALS (أهدافي) ===== */

/* Employee selector */
.mg-emp-selector {
    margin-bottom: 16px;
    animation: v5-fadeSlideUp 0.4s ease-out 0.05s both;
}
.mg-emp-selector select {
    width: 100%; padding: 10px 14px; border-radius: 10px;
    border: 1.5px solid #e2e8f0; font-family: inherit; font-size: 14px;
    font-weight: 600; color: #2d3748; background: white;
    cursor: pointer; appearance: auto;
}
.mg-emp-selector select:focus { border-color: #38a169; outline: none; }

/* Summary cards */
.mg-summary-row {
    display: flex; gap: 10px; margin-bottom: 20px;
    animation: v5-fadeSlideUp 0.4s ease-out 0.1s both;
}
.mg-stat-card {
    flex: 1; background: white; border-radius: 12px; padding: 16px; text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.02);
}
.mg-stat-num { font-size: 28px; font-weight: 800; color: var(--kfcris-teal-700, #1a365d); line-height: 1; }
.mg-stat-label { font-size: 11px; color: #a0aec0; margin-top: 4px; font-weight: 500; }

/* Goals section */
.mg-goals-section {
    animation: v5-fadeSlideUp 0.4s ease-out 0.15s both;
}
.mg-pillar {
    background: white; border-radius: 12px; margin-bottom: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.02);
    overflow: hidden;
}
.mg-pillar-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 20px; border-right: 4px solid; background: #fafbfc;
}
.mg-pillar-tag { font-size: 14px; font-weight: 700; color: white; padding: 3px 12px; border-radius: 6px; }
.mg-pillar-meta { font-size: 12px; color: #718096; }

.mg-goal-card { padding: 16px 20px; border-bottom: 1px solid #f0f0f0; }
.mg-goal-card:last-child { border-bottom: none; }
.mg-goal-top { display: flex; align-items: center; gap: 10px; }
.mg-goal-seq {
    width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.mg-goal-text { flex: 1; font-size: 13px; color: #2d3748; line-height: 1.6; }
.mg-goal-weight {
    font-size: 12px; font-weight: 700; color: #718096;
    background: #edf2f7; padding: 2px 8px; border-radius: 6px; flex-shrink: 0;
}

/* Indicators */
.mg-indicators { padding: 8px 0 0 38px; }
.mg-indicator-row {
    display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 12px; color: #4a5568;
    flex-wrap: wrap;
}
.mg-ind-bullet { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.mg-ind-text { flex: 1; min-width: 120px; line-height: 1.5; }
.mg-ind-projects { display: flex; gap: 4px; flex-wrap: wrap; }
.mg-ind-proj {
    background: #ebf8ff; color: var(--kfcris-primary, #2c5282); padding: 2px 7px; border-radius: 4px;
    font-size: 10px; font-family: 'SF Mono','Fira Code',monospace;
    cursor: pointer; white-space: nowrap;
}
.mg-ind-proj:hover { background: #bee3f8; }
.mg-ind-count {
    font-size: 11px; font-weight: 700; color: #38a169;
    background: #f0fff4; padding: 2px 8px; border-radius: 6px; white-space: nowrap; flex-shrink: 0;
}
.mg-ind-count.mg-ind-gap { color: #e53e3e; background: #fff5f5; }
.mg-ind-gap-label {
    font-size: 11px; color: #e53e3e; font-style: italic; padding: 0 0 0 54px;
}

/* Milestones (expandable R1-R4) */
.mg-milestones {
    margin: 8px 0 0 38px; cursor: pointer;
}
.mg-ms-toggle {
    font-size: 11px; color: #718096; font-weight: 600; padding: 4px 0;
    transition: color 0.15s;
}
.mg-milestones:hover .mg-ms-toggle { color: #2d3748; }
.mg-milestones.open .mg-ms-toggle { color: var(--kfcris-primary, #2c5282); }
.mg-milestones.open .mg-ms-toggle::first-letter { display: inline-block; }
.mg-ms-content {
    display: none; padding: 6px 0 2px; margin-right: 12px;
}
.mg-milestones.open .mg-ms-content { display: block; }
.mg-ms-item {
    display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 12px;
}
.mg-ms-label {
    font-weight: 700; color: var(--kfcris-primary, #2c5282); background: #ebf8ff; padding: 1px 8px;
    border-radius: 4px; font-size: 11px; white-space: nowrap;
}
.mg-ms-value { color: #4a5568; line-height: 1.5; }

/* Section divider */
.mg-section-divider {
    font-size: 13px; font-weight: 700; color: #a0aec0; display: flex; align-items: center; gap: 8px;
    margin: 28px 0 12px;
}
.mg-section-divider::after { content: ''; flex: 1; height: 1px; background: #e8ecf2; }

/* Disclaimer */
.mg-disclaimer {
    background: #ebf8ff; border: 1px solid #bee3f8; border-radius: 10px;
    padding: 10px 16px; font-size: 13px; color: var(--kfcris-primary, #2c5282); text-align: center;
    margin-bottom: 16px; font-weight: 500;
}

/* Scoring section */
.mg-scoring-section { animation: v5-fadeSlideUp 0.4s ease-out 0.2s both; }

/* Score panel (sticky) */
.mg-score-panel {
    background: var(--kfcris-teal-700, #1a365d); border-radius: 12px; padding: 14px 20px; margin-bottom: 16px;
    position: sticky; top: 60px; z-index: 80;
    box-shadow: 0 4px 16px rgba(26,54,93,0.3);
}
.mg-score-row {
    font-size: 13px; color: rgba(255,255,255,0.85); font-weight: 600;
    text-align: center; direction: ltr; unicode-bidi: embed;
}
.mg-score-row strong { color: white; font-size: 14px; }
.mg-score-formula {
    font-size: 11px; color: rgba(255,255,255,0.5); text-align: center;
    margin-top: 4px; direction: ltr; unicode-bidi: embed;
}
.mg-score-grade {
    display: inline-block; background: rgba(255,255,255,0.15);
    padding: 1px 8px; border-radius: 4px; margin-right: 8px;
    font-weight: 700; color: rgba(255,255,255,0.8);
}

/* Score pillar group */
.mg-score-pillar { margin-bottom: 12px; }
.mg-score-pillar-label {
    font-size: 14px; font-weight: 700; margin-bottom: 8px; padding: 8px 0;
}

/* Score goal card */
.mg-score-goal {
    background: white; border-radius: 12px; padding: 16px 20px; margin-bottom: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.02);
}
.mg-score-goal-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }

/* Evidence */
.mg-evidence {
    display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px;
}
.mg-evidence-badge {
    font-size: 11px; background: #f0fff4; color: #276749; padding: 3px 10px;
    border-radius: 6px; border: 1px solid #c6f6d5;
}

/* Radio buttons */
.mg-radio-row {
    display: flex; gap: 6px; justify-content: center; flex-wrap: wrap;
}
.mg-radio {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 10px 12px; border-radius: 10px; cursor: pointer;
    border: 2px solid #e2e8f0; transition: all 0.15s; min-width: 70px;
    text-align: center;
}
.mg-radio:hover { border-color: #a0aec0; background: #f7fafc; }
.mg-radio.mg-radio-active { border-color: #38a169; background: #f0fff4; }
.mg-radio-dot {
    width: 16px; height: 16px; border-radius: 50%;
    border: 2px solid #cbd5e0; transition: all 0.15s;
}
.mg-radio-dot.checked {
    border-color: #38a169; background: #38a169;
    box-shadow: inset 0 0 0 3px white;
}
.mg-radio-num { font-size: 16px; font-weight: 800; color: #2d3748; }
.mg-radio-label { font-size: 9px; color: #718096; font-weight: 600; white-space: nowrap; }

/* Rubric toggle */
.mg-rubric-toggle {
    font-size: 11px; color: #718096; cursor: pointer; padding: 6px 0;
    font-weight: 600; transition: color 0.15s;
}
.mg-rubric-toggle:hover { color: #2d3748; }
.mg-rubric-toggle.open { color: var(--kfcris-primary, #2c5282); }
.mg-rubric-content {
    display: none; padding: 8px 0;
}
.mg-rubric-content.open { display: block; }
.mg-rubric-item {
    font-size: 12px; color: #4a5568; padding: 4px 0; line-height: 1.6;
    border-bottom: 1px solid #f0f0f0;
}
.mg-rubric-item:last-child { border-bottom: none; }

/* Action bar */
.mg-action-bar {
    display: flex; gap: 10px; margin-top: 20px; justify-content: center;
}
.mg-btn-save, .mg-btn-email {
    padding: 10px 28px; border-radius: 10px; font-size: 14px;
    font-weight: 700; font-family: inherit; cursor: pointer;
    border: none; transition: all 0.2s;
}
.mg-btn-save {
    background: #38a169; color: white;
}
.mg-btn-save:hover { background: #2f855a; }
.mg-btn-save:disabled { opacity: 0.5; cursor: not-allowed; }
.mg-btn-email {
    background: white; color: var(--kfcris-primary, #2c5282); border: 2px solid var(--kfcris-primary, #2c5282);
}
.mg-btn-email:hover { background: #ebf8ff; }
.mg-btn-email:disabled { opacity: 0.5; cursor: not-allowed; }

/* Method section (collapsible) */
.mg-method-section {
    margin-top: 28px; background: white; border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.02);
    overflow: hidden;
    animation: v5-fadeSlideUp 0.4s ease-out 0.25s both;
}
.mg-method-toggle {
    padding: 16px 20px; font-size: 14px; font-weight: 700; color: #718096;
    cursor: pointer; transition: color 0.15s;
}
.mg-method-toggle:hover { color: #2d3748; }
.mg-method-content {
    display: none; padding: 0 20px 20px;
}
.mg-method-section.open .mg-method-content { display: block; }
.mg-method-section.open .mg-method-toggle { color: var(--kfcris-primary, #2c5282); border-bottom: 1px solid #f0f0f0; }

.mg-method-block { margin-bottom: 16px; }
.mg-method-title {
    font-size: 13px; font-weight: 700; color: var(--kfcris-primary, #2c5282); margin-bottom: 6px;
}
.mg-method-text { font-size: 12px; color: #4a5568; line-height: 1.7; }

/* Grade weights table */
.mg-method-table { display: flex; flex-direction: column; gap: 0; }
.mg-mt-row {
    display: flex; font-size: 12px; padding: 6px 0; border-bottom: 1px solid #f0f0f0;
}
.mg-mt-row:last-child { border-bottom: none; }
.mg-mt-row span { flex: 1; text-align: center; }
.mg-mt-header { font-weight: 700; color: var(--kfcris-primary, #2c5282); background: #ebf8ff; padding: 8px 0; border-radius: 6px; }

/* Level definitions */
.mg-method-levels { display: flex; flex-direction: column; gap: 8px; }
.mg-level {
    display: flex; align-items: flex-start; gap: 10px; font-size: 12px; color: #4a5568; line-height: 1.6;
}
.mg-level-num {
    width: 24px; height: 24px; border-radius: 50%; color: white;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; flex-shrink: 0;
}

/* ===== HAMBURGER (mobile) ===== */
.v5-hamburger {
    display: none;
    background: none; border: none; color: white;
    cursor: pointer; padding: 4px; font-size: 20px;
    font-family: inherit;
}

/* ===== MOBILE ===== */
@media (max-width: 768px) {
    .v5-sidemenu {
        position: fixed;
        top: 60px;
        right: 0;
        width: 220px;
        transform: translateX(100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 500;
        box-shadow: -6px 0 24px rgba(0,0,0,0.2);
    }
    .v5-sidemenu.open {
        transform: translateX(0);
    }
    .v5-sidemenu .v5-mi-label { opacity: 1; }
    .v5-main { padding: 16px; }
    .v5-hamburger { display: block; }
    .v5-hero-row { flex-direction: column; }
    .v5-priority-row { flex-direction: column; }
    .v5-cal-row { flex-direction: column; }
    .v5-tracks-grid { grid-template-columns: 1fr; }
    .v5-act-grid { grid-template-columns: 1fr; }
    .v5-del-grid { grid-template-columns: repeat(2, 1fr); }
    .v5-team-stats { flex-direction: column; }
    .v5-attention-bar { margin-right: 0; }
    .mg-summary-row { flex-direction: column; }
    .mg-radio-row { gap: 4px; }
    .mg-radio { min-width: 56px; padding: 8px 6px; }
    .mg-action-bar { flex-direction: column; }
    .mg-btn-save, .mg-btn-email { width: 100%; }
    .mg-indicator-row { flex-wrap: wrap; }
    .mg-score-panel { position: static; }
    .v5-mobile-overlay {
        display: none;
        position: fixed; inset: 0; background: rgba(0,0,0,0.3); z-index: 400;
    }
    .v5-mobile-overlay.show { display: block; }
}

/* ===== TREE in v5 context ===== */
.v5-main .tree { margin-top: 20px; }
.v5-main .tree.hidden { display: none; }

/* ============================================================
   SUPERIOR ASSESSMENT (تقييم المدير)
   ============================================================ */

.sup-error {
    background: #fed7d7;
    color: #9b2c2c;
    border: 1px solid #fc8181;
    padding: 16px;
    border-radius: 12px;
    text-align: center;
    margin: 20px 0;
    font-size: 14px;
}

.sup-empty {
    background: white;
    border: 1px dashed #cbd5e0;
    border-radius: 14px;
    padding: 40px 20px;
    text-align: center;
    color: #718096;
    margin: 20px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}
.sup-empty svg { width: 56px; height: 56px; color: #cbd5e0; }

.sup-period {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    background: white;
    padding: 14px 18px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    margin: 16px 0;
}
.sup-period-label {
    font-size: 12px;
    font-weight: 700;
    color: #4a5568;
}
.sup-period-select {
    padding: 6px 12px;
    border: 1px solid #cbd5e0;
    border-radius: 8px;
    font-size: 13px;
    background: white;
    cursor: pointer;
    font-family: inherit;
}
.sup-period-select:focus { outline: none; border-color: #805ad5; }
.sup-period-now {
    margin-right: auto;
    padding: 6px 14px;
    background: #f0e6fa;
    color: #553c9a;
    border: 1px solid #d6bcfa;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
}
.sup-period-now:hover { background: #e9d8fd; }

.sup-disclaimer {
    background: #fffaf0;
    border-right: 4px solid #d69e2e;
    padding: 12px 16px;
    border-radius: 8px;
    color: #744210;
    font-size: 12px;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* Form (employee mode) */
.sup-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.sup-cat {
    background: white;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
}
.sup-cat-header {
    background: linear-gradient(135deg, #805ad5, #553c9a);
    color: white;
    padding: 12px 18px;
    font-size: 14px;
    font-weight: 800;
}
.sup-criterion {
    padding: 16px 18px;
    border-bottom: 1px solid #f7fafc;
}
.sup-criterion:last-child { border-bottom: none; }
.sup-criterion-name {
    font-size: 14px;
    font-weight: 700;
    color: #2d3748;
    margin-bottom: 4px;
}
.sup-criterion-desc {
    font-size: 12px;
    color: #718096;
    margin-bottom: 10px;
}
.sup-radio-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.sup-radio {
    flex: 1;
    min-width: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 6px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    cursor: pointer;
    transition: all .15s ease;
    background: white;
}
.sup-radio:hover { border-color: #b794f4; background: #faf5ff; }
.sup-radio-active { border-color: #805ad5; background: #faf5ff; box-shadow: 0 0 0 1px #805ad5; }
.sup-radio-num {
    font-size: 18px;
    font-weight: 800;
    color: #2d3748;
}
.sup-radio-active .sup-radio-num { color: #553c9a; }
.sup-radio-label {
    font-size: 9px;
    color: #718096;
    font-weight: 600;
    white-space: nowrap;
}

.sup-action-bar {
    position: sticky;
    bottom: 0;
    background: white;
    border-top: 2px solid #e2e8f0;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 24px -20px -20px -20px;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.04);
}
.sup-progress {
    font-size: 13px;
    color: #4a5568;
    font-weight: 700;
}
.sup-btn-save {
    background: linear-gradient(135deg, #805ad5, #553c9a);
    color: white;
    border: none;
    padding: 10px 28px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    transition: all .15s ease;
}
.sup-btn-save:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(85,60,154,0.3); }
.sup-btn-save:disabled { opacity: .7; cursor: not-allowed; }

/* Manager view */
.sup-mgr-overview {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}
.sup-mgr-overall {
    background: white;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    padding: 24px;
    text-align: center;
    border-top: 4px solid #38a169;
}
.sup-mgr-overall.sup-color-orange { border-top-color: #d69e2e; }
.sup-mgr-overall.sup-color-red    { border-top-color: #c53030; }
.sup-mgr-overall-num {
    font-size: 48px;
    font-weight: 900;
    color: #38a169;
    line-height: 1;
}
.sup-mgr-overall.sup-color-orange .sup-mgr-overall-num { color: #d69e2e; }
.sup-mgr-overall.sup-color-red    .sup-mgr-overall-num { color: #c53030; }
.sup-mgr-overall-label {
    font-size: 12px;
    color: #718096;
    margin-top: 6px;
    font-weight: 700;
}
.sup-mgr-respondents {
    background: white;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    padding: 24px;
    text-align: center;
}
.sup-mgr-respondents-num {
    font-size: 36px;
    font-weight: 900;
    color: var(--kfcris-primary, #2c5282);
    line-height: 1;
}
.sup-mgr-respondents-label {
    font-size: 12px;
    color: #718096;
    margin-top: 6px;
    font-weight: 700;
}
.sup-mgr-cats {
    background: white;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.sup-mgr-cat-row {
    display: grid;
    grid-template-columns: 1.5fr 2fr 50px;
    gap: 12px;
    align-items: center;
}
.sup-mgr-cat-name {
    font-size: 12px;
    font-weight: 700;
    color: #4a5568;
}
.sup-mgr-cat-bar {
    background: #edf2f7;
    height: 10px;
    border-radius: 5px;
    overflow: hidden;
}
.sup-mgr-cat-fill {
    height: 100%;
    border-radius: 5px;
    transition: width .3s ease;
}
.sup-color-bg-green  { background: linear-gradient(90deg, #68d391, #38a169); }
.sup-color-bg-orange { background: linear-gradient(90deg, #f6ad55, #d69e2e); }
.sup-color-bg-red    { background: linear-gradient(90deg, #fc8181, #c53030); }
.sup-mgr-cat-val {
    font-size: 13px;
    font-weight: 800;
    text-align: center;
    color: #2d3748;
}
.sup-mgr-note {
    font-size: 11px;
    color: #718096;
    text-align: center;
    margin-top: 16px;
    padding: 12px;
    background: #f7fafc;
    border-radius: 8px;
}

/* Admin view */
.sup-admin-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}
.sup-admin-stats .sup-stat {
    background: white;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    padding: 16px;
    text-align: center;
}
.sup-stat-num {
    font-size: 24px;
    font-weight: 900;
    color: #553c9a;
}
.sup-stat-label {
    font-size: 11px;
    color: #718096;
    font-weight: 700;
}
.sup-admin-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.sup-admin-card {
    background: white;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    transition: all .15s ease;
}
.sup-admin-card-expanded { box-shadow: 0 4px 16px rgba(85,60,154,0.08); }
.sup-admin-card-head {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 16px;
    padding: 16px 20px;
    cursor: pointer;
    align-items: center;
}
.sup-admin-card-head:hover { background: #faf5ff; }
.sup-admin-card-title {
    font-size: 15px;
    font-weight: 800;
    color: #2d3748;
}
.sup-admin-card-meta {
    display: flex;
    align-items: center;
    gap: 12px;
}
.sup-admin-card-num {
    font-size: 22px;
    font-weight: 900;
}
.sup-admin-card-num.sup-color-green  { color: #38a169; }
.sup-admin-card-num.sup-color-orange { color: #d69e2e; }
.sup-admin-card-num.sup-color-red    { color: #c53030; }
.sup-admin-card-resp {
    font-size: 11px;
    color: #718096;
    background: #edf2f7;
    padding: 4px 10px;
    border-radius: 12px;
    font-weight: 700;
}
.sup-admin-card-share {
    font-size: 10px;
    padding: 4px 10px;
    border-radius: 12px;
    font-weight: 800;
}
.sup-share-on  { background: #c6f6d5; color: #22543d; }
.sup-share-off { background: #edf2f7; color: #718096; }
.sup-share-btn {
    padding: 8px 16px;
    background: white;
    border: 1px solid #805ad5;
    color: #553c9a;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: all .15s ease;
}
.sup-share-btn:hover { background: #faf5ff; }

.sup-admin-card-expanded .sup-admin-cats {
    background: #faf5ff;
    border-top: 1px solid #e9d8fd;
    border-radius: 0;
}
.sup-admin-table {
    background: white;
    border-top: 1px solid #e2e8f0;
    padding: 16px;
    overflow-x: auto;
}
.sup-admin-table-title {
    font-size: 12px;
    font-weight: 800;
    color: #4a5568;
    margin-bottom: 10px;
}
.sup-admin-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}
.sup-admin-table th {
    background: #f7fafc;
    color: #4a5568;
    padding: 6px 8px;
    text-align: center;
    border: 1px solid #e2e8f0;
    font-weight: 700;
}
.sup-admin-table td {
    padding: 6px 8px;
    text-align: center;
    border: 1px solid #e2e8f0;
}
.sup-emp-cell {
    text-align: right !important;
    font-weight: 700;
    color: #2d3748;
    background: #f7fafc;
}
.sup-cell-green  { background: #c6f6d5; color: #22543d; font-weight: 700; }
.sup-cell-orange { background: #feebc8; color: #7b341e; font-weight: 700; }
.sup-cell-red    { background: #fed7d7; color: #742a2a; font-weight: 700; }
.sup-cell-gray   { background: #f7fafc; color: #a0aec0; }

@media (max-width: 720px) {
    .sup-mgr-overview { grid-template-columns: 1fr; }
    .sup-admin-stats { grid-template-columns: 1fr; }
    .sup-admin-card-head {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .sup-radio { min-width: 0; padding: 8px 4px; }
    .sup-radio-num { font-size: 16px; }
    .sup-radio-label { font-size: 8px; }
}