/* /Components/Layout/LoginLayout.razor.rz.scp.css */
/* =========================================================
   Login layout shell
   ========================================================= */

.login-shell[b-wskqzs44tq] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mkc-jet-black);
    /* Subtle radial glow behind the card */
    background-image: radial-gradient(ellipse 60% 50% at 50% 40%, rgba(125, 57, 196, 0.18) 0%, transparent 70%);
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* =========================================================
   App Shell Layout - MKC AI
   ========================================================= */

.app-shell[b-0sybkrplt3] {
    display: flex;
    min-height: 100vh;
}

/* ── Main area (shifts right when sidebar is open) ── */
.app-main[b-0sybkrplt3] {
    flex: 1;
    margin-left: 240px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    transition: margin-left 0.25s ease;
}

    .app-main.sidebar-collapsed[b-0sybkrplt3] {
        margin-left: 0;
    }

/* ── Topbar ── */
.app-topbar[b-0sybkrplt3] {
    display: flex;
    align-items: center;
    height: 56px;
    padding: 0 24px;
    border-bottom: 1px solid var(--mkc-grey-6);
    background: #111111;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 99;
    gap: 12px;
}

.app-topbar__toggle[b-0sybkrplt3] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--mkc-grey-3);
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
}

    .app-topbar__toggle:hover[b-0sybkrplt3] {
        background: rgba(255, 255, 255, 0.06);
        color: var(--mkc-white);
    }

.app-topbar__spacer[b-0sybkrplt3] {
    flex: 1;
}

.app-topbar__user[b-0sybkrplt3] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.app-topbar__avatar[b-0sybkrplt3] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--mkc-accent-dark);
    color: var(--mkc-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
}

/* ── Content area ── */
.app-content[b-0sybkrplt3] {
    flex: 1;
    padding: 0;
}

/* ── Blazor error UI ── */
#blazor-error-ui[b-0sybkrplt3] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-0sybkrplt3] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/* ── Responsive: collapse sidebar on small screens ── */
@media (max-width: 768px) {
    .app-main[b-0sybkrplt3] {
        margin-left: 0 !important;
    }
}

/* /Components/Layout/NavSidebar.razor.rz.scp.css */
/* =========================================================
   App Sidebar Navigation - MKC AI
   Ported from NuekRoadMap admin-nav styles
   ========================================================= */

.app-nav[b-s1lxztmfo8] {
    width: 240px;
    flex-shrink: 0;
    background: #111111;
    border-right: 1px solid var(--mkc-grey-6);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
}

    .app-nav.open[b-s1lxztmfo8] {
        transform: translateX(0);
    }

/* ── Logo ── */
.app-nav__logo[b-s1lxztmfo8] {
    border-bottom: 1px solid var(--mkc-grey-6);
    flex-shrink: 0;
}

    .app-nav__logo a[b-s1lxztmfo8] {
        height: 56px;
        padding: 0 16px;
        display: flex;
        align-items: center;
        gap: 10px;
        text-decoration: none;
    }

.app-nav__logo-text[b-s1lxztmfo8] {
    font-family: var(--mkc-font);
    font-size: 17px;
    font-weight: 400;
    letter-spacing: -0.02em;
    color: var(--mkc-white);
}

    .app-nav__logo-text strong[b-s1lxztmfo8] {
        color: var(--mkc-accent-light);
        font-weight: 700;
    }

/* ── Menu ── */
.app-nav__menu[b-s1lxztmfo8] {
    flex: 1;
    padding: 12px 0;
    overflow-y: auto;
}

    .app-nav__menu ul[b-s1lxztmfo8] {
        list-style: none;
        margin: 0;
        padding: 0;
    }

/* ── Separator ── */
.app-nav__separator[b-s1lxztmfo8] {
    padding: 16px 24px 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mkc-grey-4);
    position: relative;
}

    .app-nav__separator[b-s1lxztmfo8]::before {
        content: "";
        display: block;
        height: 1px;
        background: var(--mkc-grey-6);
        margin-bottom: 12px;
    }

/* ── Nav links ── */
[b-s1lxztmfo8] .app-nav__link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 400;
    font-family: var(--mkc-font);
    color: var(--mkc-grey-1);
    text-decoration: none;
    border: none;
    background: none;
    width: 100%;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    border-radius: 0;
}

    [b-s1lxztmfo8] .app-nav__link:hover {
        background: rgba(255, 255, 255, 0.04);
        color: var(--mkc-white);
    }

    /* Blazor NavLink sets "active" class automatically */
    [b-s1lxztmfo8] .app-nav__link.active {
        color: var(--mkc-white);
        background: var(--mkc-accent-dark);
        font-weight: 500;
        position: relative;
    }

        [b-s1lxztmfo8] .app-nav__link.active::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 3px;
            background: var(--mkc-accent-light);
            border-radius: 0 2px 2px 0;
        }

/* ── Footer ── */
.app-nav__footer[b-s1lxztmfo8] {
    padding: 12px 0;
    border-top: 1px solid var(--mkc-grey-6);
    flex-shrink: 0;
}

.app-nav__logout[b-s1lxztmfo8] {
    color: var(--mkc-grey-4) !important;
}

    .app-nav__logout:hover[b-s1lxztmfo8] {
        color: #f87171 !important;
        background: rgba(220, 53, 69, 0.07) !important;
    }
/*
.nav-logo-mkc {
    padding: 12px;
    display: flex;
    justify-content:center;
}*/

.admin-nav__logo img[b-s1lxztmfo8] {
    height: 100%;
}

.admin-nav__logo a[b-s1lxztmfo8] {
    height: 55px;
    padding: 12px;
    display: flex;
    justify-content: center;
}

.admin-nav__logo[b-s1lxztmfo8] {
    border-bottom: 1px solid #393939;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-xsppe0exz1],
.components-reconnect-repeated-attempt-visible[b-xsppe0exz1],
.components-reconnect-failed-visible[b-xsppe0exz1],
.components-pause-visible[b-xsppe0exz1],
.components-resume-failed-visible[b-xsppe0exz1],
.components-rejoining-animation[b-xsppe0exz1] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-xsppe0exz1],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-xsppe0exz1],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-xsppe0exz1],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-xsppe0exz1],
#components-reconnect-modal.components-reconnect-retrying[b-xsppe0exz1],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-xsppe0exz1],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-xsppe0exz1],
#components-reconnect-modal.components-reconnect-failed[b-xsppe0exz1],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-xsppe0exz1] {
    display: block;
}


#components-reconnect-modal[b-xsppe0exz1] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-xsppe0exz1 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-xsppe0exz1 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-xsppe0exz1 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-xsppe0exz1]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-xsppe0exz1 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-xsppe0exz1 {
    0% {
        transform: translateY(30px) scale(0.95);
    }

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

@keyframes components-reconnect-modal-fadeInOpacity-b-xsppe0exz1 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-xsppe0exz1 {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-xsppe0exz1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-xsppe0exz1] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-xsppe0exz1] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-xsppe0exz1] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-xsppe0exz1] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-xsppe0exz1] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-xsppe0exz1] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-xsppe0exz1 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-xsppe0exz1] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-xsppe0exz1 {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Evidences.razor.rz.scp.css */
/* =========================================================
   Evidences - Page styles
   ========================================================= */

.evidences-page[b-h3khrf5wy8] {
    padding: 28px;
    min-height: calc(100vh - 56px);
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ── Page header ── */
.evidences-header[b-h3khrf5wy8] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.evidences-title[b-h3khrf5wy8] {
    font-family: var(--mkc-font);
    font-size: 28px;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--mkc-white);
    margin: 0 0 4px 0;
}

.evidences-subtitle[b-h3khrf5wy8] {
    font-size: 14px;
    color: var(--mkc-grey-3);
    margin: 0;
}

/* ── Actions ── */
.evidences-header__actions[b-h3khrf5wy8] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.evidences-btn[b-h3khrf5wy8] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 10px;
    font-family: var(--mkc-font);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.evidences-btn--primary[b-h3khrf5wy8] {
    background: linear-gradient(135deg, var(--mkc-accent-light), var(--mkc-accent-dark));
    color: var(--mkc-white);
    border: 1px solid transparent;
}

    .evidences-btn--primary:hover[b-h3khrf5wy8] {
        opacity: 0.88;
    }

    .evidences-btn--primary:disabled[b-h3khrf5wy8] {
        opacity: 0.55;
        cursor: not-allowed;
    }

.evidences-btn--ghost[b-h3khrf5wy8] {
    background: transparent;
    color: var(--mkc-grey-3);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

    .evidences-btn--ghost:hover[b-h3khrf5wy8] {
        background: rgba(255, 255, 255, 0.05);
        color: var(--mkc-grey-1);
    }

    .evidences-btn--ghost:disabled[b-h3khrf5wy8] {
        opacity: 0.55;
        cursor: not-allowed;
    }

/* ── Toolbar ── */
.evidences-toolbar[b-h3khrf5wy8] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.evidences-squad-selector[b-h3khrf5wy8] {
    flex: 1;
    max-width: 360px;
}

/* ── Squad selector (panel-style) ── */
.panel-selector-label[b-h3khrf5wy8] {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mkc-grey-4);
}

.panel-selector-wrapper[b-h3khrf5wy8] {
    position: relative;
    display: flex;
    align-items: center;
}

.panel-selector-icon[b-h3khrf5wy8] {
    position: absolute;
    left: 12px;
    color: var(--mkc-grey-4);
    pointer-events: none;
    flex-shrink: 0;
}

.panel-selector-chevron[b-h3khrf5wy8] {
    position: absolute;
    right: 12px;
    color: var(--mkc-grey-4);
    pointer-events: none;
    flex-shrink: 0;
}

.panel-selector[b-h3khrf5wy8] {
    width: 100%;
    padding: 11px 36px;
    font-family: var(--mkc-font);
    font-size: 14px;
    color: var(--mkc-white);
    background: #1a1a1a;
    border: 1px solid var(--mkc-grey-6);
    border-radius: 10px;
    outline: none;
    appearance: none;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}

    .panel-selector:focus[b-h3khrf5wy8] {
        border-color: var(--mkc-accent-light);
        box-shadow: 0 0 0 3px rgba(164, 77, 255, 0.15);
    }

    .panel-selector option[b-h3khrf5wy8] {
        background: #1a1a1a;
        color: var(--mkc-white);
    }

.evidences-select[b-h3khrf5wy8] {
    width: 100%;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: var(--mkc-white);
    font-family: var(--mkc-font);
    font-size: 14px;
    outline: none;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    appearance: none;
}

    .evidences-select:focus[b-h3khrf5wy8] {
        border-color: rgba(164, 77, 255, 0.5);
        background: rgba(255, 255, 255, 0.07);
    }

    .evidences-select option[b-h3khrf5wy8] {
        background: #1e1e1e;
        color: var(--mkc-white);
    }

/* ── Empty / loading state ── */
.evidences-empty[b-h3khrf5wy8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 72px 24px;
    color: var(--mkc-grey-4);
    text-align: center;
}

    .evidences-empty svg[b-h3khrf5wy8] {
        opacity: 0.3;
    }

    .evidences-empty p[b-h3khrf5wy8] {
        font-size: 14px;
        margin: 0;
    }

.evidences-loading[b-h3khrf5wy8] {
    display: flex;
    justify-content: center;
    padding: 64px 0;
}

/* ── Table wrapper ── */
.evidences-table-wrapper[b-h3khrf5wy8] {
    overflow-x: auto;
    border-radius: var(--mkc-radius);
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.03);
}

/* ── Table ── */
.evidences-table[b-h3khrf5wy8] {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

    .evidences-table thead tr[b-h3khrf5wy8] {
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .evidences-table th[b-h3khrf5wy8] {
        padding: 14px 16px;
        text-align: left;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        color: var(--mkc-grey-4);
        white-space: nowrap;
    }

    .evidences-table td[b-h3khrf5wy8] {
        padding: 14px 16px;
        color: var(--mkc-grey-1);
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        vertical-align: top;
    }

    .evidences-table tbody tr:last-child td[b-h3khrf5wy8] {
        border-bottom: none;
    }

    .evidences-table tbody tr:hover td[b-h3khrf5wy8] {
        background: rgba(255, 255, 255, 0.03);
    }

.evidences-table__date[b-h3khrf5wy8] {
    white-space: nowrap;
    color: var(--mkc-grey-3) !important;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.evidences-table__description[b-h3khrf5wy8] {
    max-width: 400px;
    word-break: break-word;
}

.evidences-table__files[b-h3khrf5wy8] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 26px;
}

.evidences-table__user[b-h3khrf5wy8] {
    white-space: nowrap;
    color: var(--mkc-grey-3) !important;
    font-size: 13px;
}

/* ── File badge ── */
.evidences-file-badge[b-h3khrf5wy8] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 6px;
    background: rgba(164, 77, 255, 0.1);
    border: 1px solid rgba(164, 77, 255, 0.22);
    color: var(--mkc-accent-light);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

/* ── Spinner ── */
.evidences-spinner[b-h3khrf5wy8] {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top-color: var(--mkc-accent-light);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.evidences-spinner--sm[b-h3khrf5wy8] {
    width: 14px;
    height: 14px;
    border-width: 2px;
}

@@keyframes spin {
    to[b-h3khrf5wy8] { transform: rotate(360deg); }
}

/* ── Modal overlay ── */
.evidences-modal-overlay[b-h3khrf5wy8] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 24px;
}

.evidences-modal[b-h3khrf5wy8] {
    background: #181818;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--mkc-radius);
    width: 100%;
    max-width: 560px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
}

.evidences-modal__header[b-h3khrf5wy8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 24px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.evidences-modal__title[b-h3khrf5wy8] {
    font-family: var(--mkc-font);
    font-size: 17px;
    font-weight: 500;
    color: var(--mkc-white);
    margin: 0;
}

.evidences-modal__close[b-h3khrf5wy8] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: transparent;
    border: none;
    color: var(--mkc-grey-4);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

    .evidences-modal__close:hover[b-h3khrf5wy8] {
        background: rgba(255, 255, 255, 0.07);
        color: var(--mkc-grey-1);
    }

.evidences-modal__body[b-h3khrf5wy8] {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.evidences-modal__footer[b-h3khrf5wy8] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 18px 24px 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

/* ── Form groups inside modal ── */
.evidences-form-group[b-h3khrf5wy8] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.evidences-form-label[b-h3khrf5wy8] {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mkc-grey-4);
}

.evidences-textarea[b-h3khrf5wy8] {
    width: 100%;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: var(--mkc-white);
    font-family: var(--mkc-font);
    font-size: 14px;
    outline: none;
    resize: vertical;
    transition: border-color 0.15s, background 0.15s;
    box-sizing: border-box;
}

    .evidences-textarea[b-h3khrf5wy8]::placeholder {
        color: var(--mkc-grey-5);
    }

    .evidences-textarea:focus[b-h3khrf5wy8] {
        border-color: rgba(164, 77, 255, 0.5);
        background: rgba(255, 255, 255, 0.07);
    }

.evidences-input-file[b-h3khrf5wy8] {
    display: block;
    color: var(--mkc-grey-3);
    font-size: 13px;
    font-family: var(--mkc-font);
}

/* ── Selected file list ── */
.evidences-file-list[b-h3khrf5wy8] {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.evidences-file-list__item[b-h3khrf5wy8] {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: var(--mkc-grey-2);
}

.evidences-file-list__name[b-h3khrf5wy8] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.evidences-file-remove[b-h3khrf5wy8] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    background: transparent;
    border: none;
    color: var(--mkc-grey-4);
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}

    .evidences-file-remove:hover[b-h3khrf5wy8] {
        background: rgba(229, 0, 0, 0.12);
        color: #ff6b6b;
    }

.evidences-file-counter[b-h3khrf5wy8] {
    margin: 6px 0 0;
    font-size: 12px;
    color: var(--mkc-grey-4);
}

.evidences-file-size[b-h3khrf5wy8] {
    color: var(--mkc-grey-4);
    font-size: 12px;
}

/* ── Alerts ── */
.evidences-alert[b-h3khrf5wy8] {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
}

.evidences-alert--error[b-h3khrf5wy8] {
    background: rgba(229, 0, 0, 0.1);
    border: 1px solid rgba(229, 0, 0, 0.2);
    color: #ff6b6b;
}

.evidences-alert--success[b-h3khrf5wy8] {
    background: rgba(38, 176, 80, 0.12);
    border: 1px solid rgba(38, 176, 80, 0.25);
    color: #4cde7b;
}

/* ── File badge - clickable variant ── */
.evidences-file-badge--clickable[b-h3khrf5wy8] {
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: var(--mkc-font);
    padding: 3px 9px;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

    .evidences-file-badge--clickable:hover[b-h3khrf5wy8] {
        background: rgba(164, 77, 255, 0.22);
        color: var(--mkc-white);
        border-color: rgba(164, 77, 255, 0.45);
    }

/* ── Download button small variant ── */
.evidences-btn--sm[b-h3khrf5wy8] {
    padding: 6px 13px;
    font-size: 12px;
    text-decoration: none;
}

/* ── Preview modal ── */
.evidences-preview-modal[b-h3khrf5wy8] {
    background: #181818;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--mkc-radius);
    width: 100%;
    max-width: 860px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.7);
}

.evidences-preview-modal__title[b-h3khrf5wy8] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 520px;
    font-size: 15px;
}

.evidences-preview-modal__actions[b-h3khrf5wy8] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.evidences-preview-modal__body[b-h3khrf5wy8] {
    flex: 1;
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 24px;
    background: rgba(0, 0, 0, 0.25);
}

/* Image preview */
.evidences-preview__image[b-h3khrf5wy8] {
    max-width: 100%;
    max-height: calc(90vh - 120px);
    object-fit: contain;
    border-radius: 6px;
    display: block;
}

/* PDF preview */
.evidences-preview__iframe[b-h3khrf5wy8] {
    width: 100%;
    height: calc(90vh - 120px);
    border: none;
    border-radius: 6px;
    background: #fff;
}

/* Generic / unsupported type */
.evidences-preview__generic[b-h3khrf5wy8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 48px 24px;
    color: var(--mkc-grey-3);
    text-align: center;
}

    .evidences-preview__generic svg[b-h3khrf5wy8] {
        opacity: 0.35;
    }

    .evidences-preview__generic p[b-h3khrf5wy8] {
        margin: 0;
        font-size: 15px;
        font-weight: 500;
        color: var(--mkc-grey-2);
        word-break: break-all;
    }

.evidences-preview__no-preview[b-h3khrf5wy8] {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: var(--mkc-grey-4) !important;
}

/* ── Generic input (text, number, date, search) ── */
.evidences-input[b-h3khrf5wy8] {
    width: 100%;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: var(--mkc-white);
    font-family: var(--mkc-font);
    font-size: 14px;
    outline: none;
    transition: border-color 0.15s, background 0.15s;
    box-sizing: border-box;
}

    .evidences-input[b-h3khrf5wy8]::placeholder {
        color: var(--mkc-grey-5);
    }

    .evidences-input:focus[b-h3khrf5wy8] {
        border-color: rgba(164, 77, 255, 0.5);
        background: rgba(255, 255, 255, 0.07);
    }

    .evidences-input[type="date"][b-h3khrf5wy8]::-webkit-calendar-picker-indicator {
        filter: invert(0.6);
        cursor: pointer;
    }

/* ── Filters bar ── */
.evidences-filters[b-h3khrf5wy8] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: var(--mkc-radius);
}

.evidences-filters__search[b-h3khrf5wy8] {
    flex: 1;
    min-width: 200px;
}

.evidences-filters__user[b-h3khrf5wy8] {
    width: 200px;
    flex-shrink: 0;
}

.evidences-filters__dates[b-h3khrf5wy8] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

    .evidences-filters__dates .evidences-input[b-h3khrf5wy8] {
        width: 148px;
    }

.evidences-filters__date-label[b-h3khrf5wy8] {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--mkc-grey-4);
    white-space: nowrap;
}

/* ── Sortable column headers ── */
.evidences-table__sortable[b-h3khrf5wy8] {
    cursor: pointer;
    user-select: none;
    transition: color 0.15s;
}

    .evidences-table__sortable:hover[b-h3khrf5wy8] {
        color: var(--mkc-grey-1);
    }

.evidences-sort-icon[b-h3khrf5wy8] {
    display: inline-block;
    margin-left: 5px;
    color: var(--mkc-accent-light);
    font-size: 10px;
    vertical-align: middle;
}

/* ── New table cell variants ── */
.evidences-table__usecase[b-h3khrf5wy8] {
    max-width: 280px;
    word-break: break-word;
}

.evidences-table__savings[b-h3khrf5wy8],
.evidences-table__hours[b-h3khrf5wy8] {
    white-space: nowrap;
    color: var(--mkc-grey-3) !important;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

/* /Components/Pages/Home.razor.rz.scp.css */
/* =========================================================
   MKC AI - Home Dashboard styles
   ========================================================= */

.home-dashboard[b-d6za39lft9] {
    padding: 32px 32px 64px;
    max-width: 1400px;
    margin: 0 auto;
}

/* ── Header ── */
.home-header[b-d6za39lft9] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 28px;
}

.home-title[b-d6za39lft9] {
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--mkc-white);
    margin: 0 0 4px 0;
}

.home-subtitle[b-d6za39lft9] {
    font-size: 14px;
    color: var(--mkc-grey-3);
    margin: 0;
}

/* ── Loading / Empty ── */
.home-loading[b-d6za39lft9],
.home-empty[b-d6za39lft9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 80px 0;
    color: var(--mkc-grey-3);
    font-size: 14px;
}

/* ── Filters ── */
.home-filters[b-d6za39lft9] {
    display: flex;
    gap: 12px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}

.home-search-wrap[b-d6za39lft9] {
    position: relative;
    flex: 1;
    min-width: 200px;
    max-width: 320px;
}

.home-search-icon[b-d6za39lft9] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--mkc-grey-4);
    pointer-events: none;
}

.home-search[b-d6za39lft9] {
    width: 100%;
    padding: 9px 14px 9px 38px;
    background: #111;
    border: 1px solid var(--mkc-grey-6);
    border-radius: 10px;
    color: var(--mkc-white);
    font-family: var(--mkc-font);
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
}

    .home-search[b-d6za39lft9]::placeholder {
        color: var(--mkc-grey-4);
    }

    .home-search:focus[b-d6za39lft9] {
        border-color: var(--mkc-accent-light);
    }

/* ── Area section ── */
.home-area-section[b-d6za39lft9] {
    margin-bottom: 20px;
    border: 1px solid var(--mkc-grey-6);
    border-radius: var(--mkc-radius);
    overflow: hidden;
    background: #0f0f0f;
}

.home-area-header[b-d6za39lft9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}

    .home-area-header:hover[b-d6za39lft9] {
        background: rgba(164, 77, 255, 0.07);
    }

.home-area-header__left[b-d6za39lft9] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.home-area-dot[b-d6za39lft9] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--mkc-accent-light);
    flex-shrink: 0;
}

.home-area-name[b-d6za39lft9] {
    font-size: 16px;
    font-weight: 600;
    color: var(--mkc-white);
    margin: 0;
    letter-spacing: -0.01em;
}

.home-area-count[b-d6za39lft9] {
    font-size: 12px;
    color: var(--mkc-grey-4);
    background: var(--mkc-grey-6);
    border-radius: 20px;
    padding: 2px 10px;
}

.home-area-chevron[b-d6za39lft9] {
    color: var(--mkc-grey-4);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

    .home-area-chevron--open[b-d6za39lft9] {
        transform: rotate(180deg);
    }

/* ── Squad grid ── */
.home-squad-grid[b-d6za39lft9] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
    padding: 16px 20px 20px;
    border-top: 1px solid var(--mkc-grey-6);
}

/* ── Squad card ── */
.home-squad-card[b-d6za39lft9] {
    background: radial-gradient(circle at 20% 10%, rgba(164, 77, 255, 0.14) 0%, transparent 60%), #111;
    border: 1px solid var(--mkc-grey-6);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: border-color 0.2s, transform 0.15s;
}

    .home-squad-card:hover[b-d6za39lft9] {
        border-color: var(--mkc-accent-light);
        transform: translateY(-2px);
    }

.home-squad-card__header[b-d6za39lft9] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.home-squad-card__title-wrap[b-d6za39lft9] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.home-squad-card__dot[b-d6za39lft9] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mkc-accent-light);
    flex-shrink: 0;
}

.home-squad-card__name[b-d6za39lft9] {
    font-size: 15px;
    font-weight: 600;
    color: var(--mkc-white);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.01em;
}

.home-squad-card__maturity-badge[b-d6za39lft9] {
    font-size: 11px;
    font-weight: 600;
    color: var(--mkc-accent-light);
    background: rgba(164, 77, 255, 0.15);
    border: 1px solid rgba(164, 77, 255, 0.3);
    border-radius: 20px;
    padding: 3px 10px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Level row ── */
.home-squad-card__level-row[b-d6za39lft9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.home-squad-card__level-label[b-d6za39lft9] {
    font-size: 12px;
    color: var(--mkc-grey-3);
}

.home-squad-card__level-value[b-d6za39lft9] {
    font-size: 14px;
    font-weight: 600;
    color: var(--mkc-white);
}

    .home-squad-card__level-value--accent[b-d6za39lft9] {
        color: var(--mkc-accent-light);
        font-size: 13px;
    }

/* ── Progress bar ── */
.home-squad-card__progress-wrap[b-d6za39lft9] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.home-squad-card__progress-header[b-d6za39lft9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.home-squad-card__progress-label[b-d6za39lft9] {
    font-size: 12px;
    color: var(--mkc-grey-3);
}

.home-squad-card__progress-pct[b-d6za39lft9] {
    font-size: 12px;
    font-weight: 600;
    color: var(--mkc-accent-light);
}

.home-squad-card__progress-track[b-d6za39lft9] {
    height: 6px;
    background: var(--mkc-grey-6);
    border-radius: 99px;
    overflow: hidden;
}

.home-squad-card__progress-fill[b-d6za39lft9] {
    height: 100%;
    background: linear-gradient(90deg, var(--mkc-accent-dark), var(--mkc-accent-light));
    border-radius: 99px;
    transition: width 0.4s ease;
}
/* /Components/Pages/Login.razor.rz.scp.css */
/* =========================================================
   Login page
   ========================================================= */

.login-card[b-pv9hmyhf47] {
    width: 100%;
    max-width: 400px;
    padding: 40px 36px 44px;
    background: radial-gradient(circle at 20% 10%, rgba(164, 77, 255, 0.18) 0%, transparent 60%), #111111;
    border: 1px solid var(--mkc-grey-6);
    border-radius: var(--mkc-radius);
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ── Logo ── */
.login-logo[b-pv9hmyhf47] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

    .login-logo img[b-pv9hmyhf47] {
        width: 100%;
        height: auto;
        display: block;
    }

/* ── Headings ── */
.login-title[b-pv9hmyhf47] {
    font-size: 24px;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--mkc-white);
    margin: 0 0 6px;
}

.login-subtitle[b-pv9hmyhf47] {
    font-size: 14px;
    color: var(--mkc-grey-3);
    margin: 0 0 32px;
}

/* ── Form ── */
.login-form[b-pv9hmyhf47] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.login-field[b-pv9hmyhf47] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.login-label[b-pv9hmyhf47] {
    font-size: 13px;
    font-weight: 500;
    color: var(--mkc-grey-2);
}

/* ── Input wrapper ── */
.login-input-wrapper[b-pv9hmyhf47] {
    position: relative;
    display: flex;
    align-items: center;
}

.login-input-icon[b-pv9hmyhf47] {
    position: absolute;
    left: 12px;
    color: var(--mkc-grey-4);
    pointer-events: none;
    flex-shrink: 0;
}

.login-input[b-pv9hmyhf47] {
    width: 100%;
    padding: 10px 40px 10px 38px;
    background: #1a1a1a;
    border: 1px solid var(--mkc-grey-6);
    border-radius: 10px;
    color: var(--mkc-white);
    font-family: var(--mkc-font);
    font-size: 14px;
    outline: none;
    transition: border-color 0.15s;
}

.login-input[b-pv9hmyhf47]::placeholder {
    color: var(--mkc-grey-5);
}

.login-input:focus[b-pv9hmyhf47] {
    border-color: var(--mkc-accent-dark);
    box-shadow: 0 0 0 3px rgba(125, 57, 196, 0.18);
}

/* ── Password toggle ── */
.login-input-toggle[b-pv9hmyhf47] {
    position: absolute;
    right: 10px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--mkc-grey-4);
    display: flex;
    align-items: center;
    padding: 4px;
    border-radius: 6px;
    transition: color 0.15s;
}

.login-input-toggle:hover[b-pv9hmyhf47] {
    color: var(--mkc-grey-1);
}

/* ── Error ── */
.login-error[b-pv9hmyhf47] {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: #ff5f5f;
    background: rgba(255, 95, 95, 0.08);
    border: 1px solid rgba(255, 95, 95, 0.2);
    border-radius: 8px;
    padding: 9px 12px;
    margin: 0;
}

/* ── Submit button ── */
.login-btn[b-pv9hmyhf47] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 11px 0;
    margin-top: 6px;
    background: linear-gradient(135deg, var(--mkc-accent-dark), var(--mkc-accent-light));
    border: none;
    border-radius: 10px;
    color: var(--mkc-white);
    font-family: var(--mkc-font);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.1s;
}

.login-btn:hover:not(:disabled)[b-pv9hmyhf47] {
    opacity: 0.9;
    transform: translateY(-1px);
}

.login-btn:active:not(:disabled)[b-pv9hmyhf47] {
    transform: translateY(0);
}

.login-btn:disabled[b-pv9hmyhf47] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ── Spinner ── */
.login-btn__spinner[b-pv9hmyhf47] {
    width: 15px;
    height: 15px;
    border: 2px solid rgba(255,255,255,0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: login-spin-b-pv9hmyhf47 0.7s linear infinite;
    flex-shrink: 0;
}

@keyframes login-spin-b-pv9hmyhf47 {
    to { transform: rotate(360deg); }
}
/* /Components/Pages/Panel.razor.rz.scp.css */
/* =========================================================
   Panel MKC — Page styles
   ========================================================= */

.panel-page[b-jiszx29mhx] {
    padding: 28px;
    min-height: calc(100vh - 56px);
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ── Page header ── */
.panel-header[b-jiszx29mhx] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.panel-title[b-jiszx29mhx] {
    font-family: var(--mkc-font);
    font-size: 28px;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--mkc-white);
    margin: 0 0 4px 0;
}

.panel-subtitle[b-jiszx29mhx] {
    font-size: 14px;
    color: var(--mkc-grey-3);
    margin: 0;
}

/* ── Squad selector ── */
.panel-header__selector[b-jiszx29mhx] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 50%;
    min-width: 260px;
}

.panel-selector-label[b-jiszx29mhx] {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mkc-grey-4);
}

.panel-selector-wrapper[b-jiszx29mhx] {
    position: relative;
    display: flex;
    align-items: center;
}

.panel-selector-icon[b-jiszx29mhx] {
    position: absolute;
    left: 12px;
    color: var(--mkc-grey-4);
    pointer-events: none;
    flex-shrink: 0;
}

.panel-selector-chevron[b-jiszx29mhx] {
    position: absolute;
    right: 12px;
    color: var(--mkc-grey-4);
    pointer-events: none;
    flex-shrink: 0;
}

.panel-selector[b-jiszx29mhx] {
    width: 100%;
    padding: 11px 36px;
    font-family: var(--mkc-font);
    font-size: 14px;
    color: var(--mkc-white);
    background: #1a1a1a;
    border: 1px solid var(--mkc-grey-6);
    border-radius: 10px;
    outline: none;
    appearance: none;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}

    .panel-selector:focus[b-jiszx29mhx] {
        border-color: var(--mkc-accent-light);
        box-shadow: 0 0 0 3px rgba(164, 77, 255, 0.15);
    }

    .panel-selector option[b-jiszx29mhx] {
        background: #1a1a1a;
        color: var(--mkc-white);
    }

/* ── Empty state ── */
.panel-empty[b-jiszx29mhx] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    color: var(--mkc-grey-4);
    padding: 64px 24px;
}

    .panel-empty svg[b-jiszx29mhx] { opacity: 0.3; }
    .panel-empty p[b-jiszx29mhx]   { font-size: 15px; margin: 0; }

/* ── Content & grid ── */
.panel-content[b-jiszx29mhx] { display: flex; flex-direction: column; gap: 0; }

.panel-grid[b-jiszx29mhx] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* ── Generic card ── */
.panel-card[b-jiszx29mhx] {
    background: #111111;
    border: 1px solid var(--mkc-grey-6);
    border-radius: var(--mkc-radius);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.panel-card--full[b-jiszx29mhx] { grid-column: 1 / -1; }

.panel-card__header[b-jiszx29mhx] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--mkc-grey-6);
    color: var(--mkc-grey-3);
    flex-shrink: 0;
}

.panel-card__title[b-jiszx29mhx] {
    font-size: 14px;
    font-weight: 600;
    color: var(--mkc-white);
    margin: 0;
    flex: 1;
}

.panel-card__body[b-jiszx29mhx] {
    padding: 6px 0;
    display: flex;
    flex-direction: column;
}

/* 2-column inner grid for Seguimiento COACH */
.panel-card__body--grid2[b-jiszx29mhx] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding: 0;
    gap: 0;
}

    .panel-card__body--grid2 .panel-field[b-jiszx29mhx] {
        border-right: 1px solid var(--mkc-grey-6);
        border-bottom: 1px solid var(--mkc-grey-6);
    }

    .panel-card__body--grid2 .panel-field:nth-child(2n)[b-jiszx29mhx] { border-right: none; }
    .panel-card__body--grid2 .panel-field:last-child[b-jiszx29mhx]   { border-bottom: none; }

/* Full-width field inside the 2-col grid (Evidencias row) */
.panel-field--full[b-jiszx29mhx] {
    grid-column: 1 / -1;
    border-right: none !important;
    border-bottom: none !important;
    border-top: 1px solid var(--mkc-grey-6);
}

/* ── Field rows ── */
.panel-field[b-jiszx29mhx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    transition: background 0.15s;
}

    .panel-field:last-child[b-jiszx29mhx] { border-bottom: none; }
    .panel-field:hover[b-jiszx29mhx]      { background: rgba(255, 255, 255, 0.015); }

/* Vertical layout for textarea-like fields */
.panel-field--vertical[b-jiszx29mhx] {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

/* Label row (label + action buttons together) */
.panel-field__label-row[b-jiszx29mhx] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.panel-field__label[b-jiszx29mhx] {
    font-size: 12px;
    font-weight: 500;
    color: var(--mkc-grey-4);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    white-space: nowrap;
    flex: 1;
}

.panel-field__value-wrap[b-jiszx29mhx] {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
    flex: 1;
    min-width: 0;
}

.panel-field__value-wrap--textarea[b-jiszx29mhx] {
    justify-content: flex-start;
    align-items: flex-start;
}

.panel-field__value[b-jiszx29mhx] {
    font-size: 13px;
    color: var(--mkc-grey-1);
    text-align: right;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.panel-field__value--disabled[b-jiszx29mhx] {
    color: var(--mkc-grey-3);
    opacity: 0.75;
}

.panel-field__value--multiline[b-jiszx29mhx] {
    text-align: left;
    display: block;
    line-height: 1.6;
    word-break: break-word;
    flex: 1;
}

.panel-field__unit[b-jiszx29mhx] {
    font-size: 13px;
    color: var(--mkc-grey-4);
}

/* Inline percentage bar */
.panel-field__pct-bar[b-jiszx29mhx] {
    display: inline-block;
    width: 60px;
    height: 5px;
    background: var(--mkc-grey-6);
    border-radius: 3px;
    position: relative;
    overflow: hidden;
    vertical-align: middle;
}

    .panel-field__pct-bar[b-jiszx29mhx]::after {
        content: "";
        position: absolute;
        left: 0; top: 0; bottom: 0;
        width: var(--pct, 0%);
        background: linear-gradient(90deg, var(--mkc-accent-dark), var(--mkc-accent-light));
        border-radius: 3px;
    }

/* Badge values */
.panel-field__badge[b-jiszx29mhx] {
    font-size: 12px;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 20px;
    text-align: center;
}

.panel-field__badge--green[b-jiszx29mhx]  { background: rgba(74, 222, 128, 0.12);  color: #4ade80; }
.panel-field__badge--amber[b-jiszx29mhx]  { background: rgba(251, 191, 36, 0.12);  color: #fbbf24; }
.panel-field__badge--red[b-jiszx29mhx]    { background: rgba(248, 113, 113, 0.12); color: #f87171; }
.panel-field__badge--purple[b-jiszx29mhx] { background: rgba(164, 77, 255, 0.15);  color: var(--mkc-accent-light); }

/* ── COACH badge label ── */
.panel-field__coach-badge[b-jiszx29mhx] {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--mkc-accent-light);
    background: rgba(164, 77, 255, 0.12);
    border: 1px solid rgba(164, 77, 255, 0.25);
    border-radius: 4px;
    padding: 1px 5px;
    line-height: 1.6;
    white-space: nowrap;
}

/* ── Edit pencil button ── */
.panel-field__edit-btn[b-jiszx29mhx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--mkc-grey-6);
    border-radius: 6px;
    color: var(--mkc-grey-4);
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}

    .panel-field__edit-btn:hover[b-jiszx29mhx] {
        border-color: var(--mkc-accent-light);
        color: var(--mkc-accent-light);
        background: rgba(164, 77, 255, 0.08);
    }

.panel-field__edit-btn--inline[b-jiszx29mhx] { margin-left: auto; }

/* ── Save / Discard action buttons ── */
.panel-field__action-btn[b-jiszx29mhx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    flex-shrink: 0;
    font-family: var(--mkc-font);
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.panel-field__action-btn--save[b-jiszx29mhx] {
    background: rgba(74, 222, 128, 0.1);
    border-color: rgba(74, 222, 128, 0.35);
    color: #4ade80;
}

    .panel-field__action-btn--save:hover[b-jiszx29mhx] {
        background: rgba(74, 222, 128, 0.2);
        border-color: #4ade80;
    }

.panel-field__action-btn--discard[b-jiszx29mhx] {
    background: rgba(248, 113, 113, 0.1);
    border-color: rgba(248, 113, 113, 0.35);
    color: #f87171;
}

    .panel-field__action-btn--discard:hover[b-jiszx29mhx] {
        background: rgba(248, 113, 113, 0.2);
        border-color: #f87171;
    }

/* ── Inline inputs ── */
.panel-field__input[b-jiszx29mhx] {
    flex: 1;
    min-width: 0;
    padding: 6px 10px;
    font-family: var(--mkc-font);
    font-size: 13px;
    color: var(--mkc-white);
    background: #1a1a1a;
    border: 1px solid var(--mkc-accent-dark);
    border-radius: 6px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

    .panel-field__input:focus[b-jiszx29mhx] {
        border-color: var(--mkc-accent-light);
        box-shadow: 0 0 0 3px rgba(164, 77, 255, 0.15);
    }

.panel-field__input--short[b-jiszx29mhx] { max-width: 90px; }

/* Date input color fix */
.panel-field__input[type="date"][b-jiszx29mhx]::-webkit-calendar-picker-indicator {
    filter: invert(0.5);
    cursor: pointer;
}

/* ── Inline select ── */
.panel-field__select-wrap[b-jiszx29mhx] {
    position: relative;
    flex: 1;
    min-width: 0;
}

.panel-field__select[b-jiszx29mhx] {
    width: 100%;
    padding: 6px 10px;
    font-family: var(--mkc-font);
    font-size: 13px;
    color: var(--mkc-white);
    background: #1a1a1a;
    border: 1px solid var(--mkc-accent-dark);
    border-radius: 6px;
    outline: none;
    appearance: none;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}

    .panel-field__select:focus[b-jiszx29mhx] {
        border-color: var(--mkc-accent-light);
        box-shadow: 0 0 0 3px rgba(164, 77, 255, 0.15);
    }

    .panel-field__select option[b-jiszx29mhx] {
        background: #1a1a1a;
        color: var(--mkc-white);
    }

/* ── Inline textarea ── */
.panel-field__textarea[b-jiszx29mhx] {
    width: 100%;
    padding: 8px 10px;
    font-family: var(--mkc-font);
    font-size: 13px;
    line-height: 1.55;
    color: var(--mkc-white);
    background: #1a1a1a;
    border: 1px solid var(--mkc-accent-dark);
    border-radius: 6px;
    outline: none;
    resize: vertical;
    transition: border-color 0.2s, box-shadow 0.2s;
}

    .panel-field__textarea:focus[b-jiszx29mhx] {
        border-color: var(--mkc-accent-light);
        box-shadow: 0 0 0 3px rgba(164, 77, 255, 0.15);
    }

/* ── Tools badges ── */
.panel-tools-badges[b-jiszx29mhx] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 10px;
}

.panel-tools-empty[b-jiszx29mhx] {
    font-size: 13px;
    color: var(--mkc-grey-4);
    font-style: italic;
}

.panel-tool-badge[b-jiszx29mhx] {
    font-size: 12px;
    font-weight: 500;
    padding: 5px 12px;
    border-radius: 20px;
    border: 1px solid color-mix(in srgb, var(--tool-color) 40%, transparent);
    color: var(--tool-color);
    background: color-mix(in srgb, var(--tool-color) 12%, transparent);
    letter-spacing: 0.01em;
}

/* ══ Modal ══════════════════════════════════════════════════ */
.modal-backdrop[b-jiszx29mhx] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 500;
    padding: 24px;
    animation: fadeIn-b-jiszx29mhx 0.15s ease;
}

@keyframes fadeIn-b-jiszx29mhx {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.modal-panel[b-jiszx29mhx] {
    background: #161616;
    border: 1px solid var(--mkc-grey-6);
    border-radius: var(--mkc-radius);
    width: 100%;
    max-width: 780px;
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: slideUp-b-jiszx29mhx 0.2s ease;
}

.modal-panel--wide[b-jiszx29mhx] {
    max-width: 1100px;
}

.modal-panel--sm[b-jiszx29mhx] {
    max-width: 460px;
}

@keyframes slideUp-b-jiszx29mhx {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

.modal-header[b-jiszx29mhx] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 24px 18px;
    border-bottom: 1px solid var(--mkc-grey-6);
    flex-shrink: 0;
}

.modal-title[b-jiszx29mhx] {
    font-size: 18px;
    font-weight: 600;
    color: var(--mkc-white);
    margin: 0 0 4px 0;
}

.modal-subtitle[b-jiszx29mhx] {
    font-size: 13px;
    color: var(--mkc-grey-3);
    margin: 0;
}

.modal-close[b-jiszx29mhx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    background: transparent;
    border: 1px solid var(--mkc-grey-6);
    border-radius: 6px;
    color: var(--mkc-grey-3);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}

    .modal-close:hover[b-jiszx29mhx] {
        border-color: #f87171;
        color: #f87171;
        background: rgba(248, 113, 113, 0.08);
    }

/* ── Duallist ── */
.modal-duallist[b-jiszx29mhx] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

.duallist-panel[b-jiszx29mhx] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

.duallist-panel__header[b-jiszx29mhx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--mkc-grey-6);
    flex-shrink: 0;
}

.duallist-panel__title[b-jiszx29mhx] {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mkc-grey-4);
}

.duallist-btn[b-jiszx29mhx] {
    font-family: var(--mkc-font);
    font-size: 11px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid var(--mkc-grey-6);
    background: transparent;
    color: var(--mkc-grey-3);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    white-space: nowrap;
}

    .duallist-btn:hover[b-jiszx29mhx] {
        border-color: var(--mkc-accent-light);
        color: var(--mkc-accent-light);
        background: rgba(164, 77, 255, 0.08);
    }

.duallist-btn--danger:hover[b-jiszx29mhx] {
    border-color: #f87171 !important;
    color: #f87171 !important;
    background: rgba(248, 113, 113, 0.08) !important;
}

.duallist-list[b-jiszx29mhx] {
    list-style: none;
    margin: 0;
    padding: 8px 0;
    overflow-y: auto;
    flex: 1;
}

.duallist-item[b-jiszx29mhx] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    cursor: pointer;
    transition: background 0.12s;
}

    .duallist-item:hover[b-jiszx29mhx] {
        background: rgba(255, 255, 255, 0.04);
    }

.duallist-item--selected:hover[b-jiszx29mhx] {
    background: rgba(248, 113, 113, 0.05);
}

.duallist-item__dot[b-jiszx29mhx] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.duallist-item__name[b-jiszx29mhx] {
    font-size: 13px;
    color: var(--mkc-grey-1);
    flex: 1;
}

.duallist-item__arrow[b-jiszx29mhx] {
    color: var(--mkc-grey-4);
    flex-shrink: 0;
    transition: color 0.12s;
}

.duallist-item:hover .duallist-item__arrow[b-jiszx29mhx]      { color: var(--mkc-accent-light); }
.duallist-item--selected:hover .duallist-item__arrow[b-jiszx29mhx] { color: #f87171; }

.duallist-item__arrow--left[b-jiszx29mhx] { /* left arrow for remove */ }

.duallist-empty[b-jiszx29mhx] {
    padding: 24px 16px;
    font-size: 13px;
    color: var(--mkc-grey-4);
    font-style: italic;
    text-align: center;
}

/* ── New-tool inline form ── */
.duallist-newtool[b-jiszx29mhx] {
    border-top: 1px solid var(--mkc-grey-6);
    flex-shrink: 0;
}

.duallist-newtool__toggle[b-jiszx29mhx] {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    padding: 10px 16px;
    background: transparent;
    border: none;
    color: var(--mkc-grey-4);
    font-family: var(--mkc-font);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: color 0.14s;
}

    .duallist-newtool__toggle:hover[b-jiszx29mhx],
    .duallist-newtool__toggle--open[b-jiszx29mhx] {
        color: var(--mkc-accent-light);
    }

.duallist-newtool__form[b-jiszx29mhx] {
    padding: 0 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.duallist-newtool__row[b-jiszx29mhx] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.duallist-newtool__input[b-jiszx29mhx] {
    flex: 1;
    min-width: 0;
    background: var(--mkc-grey-7, #1a1a1a);
    border: 1px solid var(--mkc-grey-6);
    border-radius: 6px;
    color: var(--mkc-white);
    font-family: var(--mkc-font);
    font-size: 13px;
    padding: 6px 10px;
    outline: none;
    transition: border-color 0.15s;
}

    .duallist-newtool__input:focus[b-jiszx29mhx] {
        border-color: var(--mkc-accent-light);
    }

    .duallist-newtool__input[b-jiszx29mhx]::placeholder {
        color: var(--mkc-grey-4);
    }

.duallist-newtool__color-label[b-jiszx29mhx] {
    position: relative;
    display: inline-flex;
    cursor: pointer;
    flex-shrink: 0;
}

.duallist-newtool__color[b-jiszx29mhx] {
    position: absolute;
    inset: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.duallist-newtool__color-swatch[b-jiszx29mhx] {
    display: block;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 2px solid var(--mkc-grey-6);
    transition: border-color 0.14s;
}

.duallist-newtool__color-label:hover .duallist-newtool__color-swatch[b-jiszx29mhx] {
    border-color: var(--mkc-accent-light);
}

.duallist-newtool__add-btn[b-jiszx29mhx] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    background: var(--mkc-accent-light);
    color: var(--mkc-white);
    border: none;
    border-radius: 6px;
    font-family: var(--mkc-font);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
    transition: opacity 0.15s;
}

    .duallist-newtool__add-btn:hover:not(:disabled)[b-jiszx29mhx] { opacity: 0.85; }
    .duallist-newtool__add-btn:disabled[b-jiszx29mhx] { opacity: 0.5; cursor: not-allowed; }

.duallist-newtool__error[b-jiszx29mhx] {
    font-size: 12px;
    color: #f87171;
}

.duallist-divider[b-jiszx29mhx] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    border-left: 1px solid var(--mkc-grey-6);
    border-right: 1px solid var(--mkc-grey-6);
    color: var(--mkc-grey-4);
    flex-shrink: 0;
}

/* ── Modal footer ── */
.modal-footer[b-jiszx29mhx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--mkc-grey-6);
    flex-shrink: 0;
}

.modal-count[b-jiszx29mhx] {
    font-size: 13px;
    color: var(--mkc-grey-4);
}

.modal-footer__actions[b-jiszx29mhx] {
    display: flex;
    gap: 10px;
}

/* ── General action buttons ── */
.panel-action-btn[b-jiszx29mhx] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 20px;
    font-family: var(--mkc-font);
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}

.panel-action-btn--primary[b-jiszx29mhx] {
    background: var(--mkc-accent-light);
    color: var(--mkc-white);
    border-color: var(--mkc-accent-light);
}

    .panel-action-btn--primary:hover[b-jiszx29mhx] { opacity: 0.85; }

.panel-action-btn--ghost[b-jiszx29mhx] {
    background: transparent;
    color: var(--mkc-grey-3);
    border-color: var(--mkc-grey-6);
}

    .panel-action-btn--ghost:hover[b-jiszx29mhx] {
        background: rgba(255, 255, 255, 0.04);
        color: var(--mkc-white);
    }

/* ── Responsive ── */
@media (max-width: 1100px) {
    .panel-card__body--grid2[b-jiszx29mhx] {
        grid-template-columns: 1fr;
    }

    .panel-card__body--grid2 .panel-field[b-jiszx29mhx] {
        border-right: none;
        border-bottom: 1px solid var(--mkc-grey-6);
    }

    .panel-card__body--grid2 .panel-field--full[b-jiszx29mhx],
    .panel-card__body--grid2 .panel-field:last-child[b-jiszx29mhx] { border-bottom: none; }
}

@media (max-width: 780px) {
    .panel-header[b-jiszx29mhx]                { flex-direction: column; align-items: stretch; }
    .panel-header__selector[b-jiszx29mhx]      { width: 100%; }
    .panel-grid[b-jiszx29mhx]                  { grid-template-columns: 1fr; }
    .panel-card--full[b-jiszx29mhx]            { grid-column: auto; }
    .modal-duallist[b-jiszx29mhx]              { grid-template-columns: 1fr; grid-template-rows: 1fr auto 1fr; }
    .duallist-divider[b-jiszx29mhx]            { width: auto; height: 40px; border-left: none; border-right: none; border-top: 1px solid var(--mkc-grey-6); border-bottom: 1px solid var(--mkc-grey-6); }
}

/* ── Date hint inside evidence field ── */
.panel-field__date-hint[b-jiszx29mhx] {
    font-size: 11px;
    color: var(--mkc-grey-5);
    font-style: italic;
}

/* ── Evidence file badges ── */
.panel-evidence-badges[b-jiszx29mhx] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.panel-evidence-badge[b-jiszx29mhx] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 6px;
    background: rgba(164, 77, 255, 0.1);
    border: 1px solid rgba(164, 77, 255, 0.22);
    color: var(--mkc-accent-light);
    font-family: var(--mkc-font);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

    .panel-evidence-badge:hover[b-jiszx29mhx] {
        background: rgba(164, 77, 255, 0.22);
        color: var(--mkc-white);
        border-color: rgba(164, 77, 255, 0.45);
    }

/* ── Evidence preview overlay + modal ── */
.panel-preview-overlay[b-jiszx29mhx] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 24px;
    animation: fadeIn-b-jiszx29mhx 0.15s ease;
}

.panel-preview-modal[b-jiszx29mhx] {
    background: #181818;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--mkc-radius);
    width: 100%;
    max-width: 860px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.7);
    animation: slideUp-b-jiszx29mhx 0.2s ease;
}

.panel-preview-modal__header[b-jiszx29mhx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    gap: 16px;
    flex-shrink: 0;
}

.panel-preview-modal__title[b-jiszx29mhx] {
    font-family: var(--mkc-font);
    font-size: 15px;
    font-weight: 500;
    color: var(--mkc-white);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.panel-preview-modal__actions[b-jiszx29mhx] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.panel-preview-download-btn[b-jiszx29mhx] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 13px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--mkc-accent-light), var(--mkc-accent-dark));
    color: var(--mkc-white);
    font-family: var(--mkc-font);
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid transparent;
    transition: opacity 0.15s;
}

    .panel-preview-download-btn:hover[b-jiszx29mhx] { opacity: 0.88; }

.panel-preview-modal__close[b-jiszx29mhx] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid var(--mkc-grey-6);
    color: var(--mkc-grey-4);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

    .panel-preview-modal__close:hover[b-jiszx29mhx] {
        background: rgba(248, 113, 113, 0.08);
        border-color: #f87171;
        color: #f87171;
    }

.panel-preview-modal__body[b-jiszx29mhx] {
    flex: 1;
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 24px;
    background: rgba(0, 0, 0, 0.25);
}

.panel-preview__image[b-jiszx29mhx] {
    max-width: 100%;
    max-height: calc(90vh - 120px);
    object-fit: contain;
    border-radius: 6px;
    display: block;
}

.panel-preview__iframe[b-jiszx29mhx] {
    width: 100%;
    height: calc(90vh - 120px);
    border: none;
    border-radius: 6px;
    background: #fff;
}

.panel-preview__generic[b-jiszx29mhx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 48px 24px;
    color: var(--mkc-grey-3);
    text-align: center;
}

    .panel-preview__generic svg[b-jiszx29mhx] { opacity: 0.35; }

    .panel-preview__generic p[b-jiszx29mhx] {
        margin: 0;
        font-size: 15px;
        font-weight: 500;
        color: var(--mkc-grey-2);
        word-break: break-all;
    }

.panel-preview__no-preview[b-jiszx29mhx] {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: var(--mkc-grey-4) !important;
}

/* ── Modal body (scrollable area inside wide modals) ── */
.modal-body[b-jiszx29mhx] {
    padding: 20px 24px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

    .modal-body .form-error[b-jiszx29mhx] {
        font-size: 13px;
        color: #f87171;
        margin: 0 0 12px 0;
    }

/* ── Maturity table ── */
.maturity-table-wrapper[b-jiszx29mhx] {
    overflow-x: auto;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.02);
}

.maturity-table[b-jiszx29mhx] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

    .maturity-table thead tr[b-jiszx29mhx] {
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .maturity-table th[b-jiszx29mhx] {
        padding: 11px 16px;
        text-align: left;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        color: var(--mkc-grey-4);
        white-space: nowrap;
    }

    .maturity-table td[b-jiszx29mhx] {
        padding: 11px 16px;
        color: var(--mkc-grey-1);
        border-bottom: 1px solid rgba(255, 255, 255, 0.04);
        vertical-align: middle;
    }

    .maturity-table tbody tr:last-child td[b-jiszx29mhx] {
        border-bottom: none;
    }

    .maturity-table tbody tr:hover td[b-jiszx29mhx] {
        background: rgba(255, 255, 255, 0.025);
    }

.maturity-table__level[b-jiszx29mhx] {
    font-size: 12px;
    font-weight: 600;
    color: var(--mkc-accent-light) !important;
    font-variant-numeric: tabular-nums;
    width: 56px;
}

.maturity-table__date[b-jiszx29mhx] {
    font-size: 12px;
    color: var(--mkc-grey-4) !important;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.maturity-table__email[b-jiszx29mhx] {
    font-size: 12px;
    color: var(--mkc-grey-4) !important;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.maturity-table__actions[b-jiszx29mhx] {
    width: 72px;
    text-align: right;
    white-space: nowrap;
}

    .maturity-table__actions .panel-field__edit-btn[b-jiszx29mhx],
    .maturity-table__actions .panel-field__action-btn[b-jiszx29mhx] {
        display: inline-flex;
    }

/* ── Blue badge variant (squad level) ── */
.panel-field__badge--blue[b-jiszx29mhx] {
    background: rgba(59, 130, 246, 0.12);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: #93c5fd;
    font-size: 12px;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Squad level grade heading inside Level Detail card ── */
.panel-squadlevel-grade-heading[b-jiszx29mhx] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.panel-squadlevel-grade-desc[b-jiszx29mhx] {
    font-size: 13px;
    color: var(--mkc-grey-2);
    font-style: italic;
}

/* ── Evidence stats ── */
.panel-evidence-stats[b-jiszx29mhx] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 12px 0 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 12px;
}

.panel-evidence-stats__group[b-jiszx29mhx] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.panel-evidence-stats__group-label[b-jiszx29mhx] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--mkc-grey-4);
}

.panel-evidence-stats__pills[b-jiszx29mhx] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.panel-evidence-stat-pill[b-jiszx29mhx] {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 7px 16px;
    background: rgba(164, 77, 255, 0.08);
    border: 1px solid rgba(164, 77, 255, 0.18);
    border-radius: 10px;
    min-width: 64px;
}

.panel-evidence-stat-pill--files[b-jiszx29mhx] {
    background: rgba(59, 130, 246, 0.08);
    border-color: rgba(59, 130, 246, 0.2);
}

.panel-evidence-stat-pill__label[b-jiszx29mhx] {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--mkc-grey-4);
}

.panel-evidence-stat-pill__value[b-jiszx29mhx] {
    font-size: 20px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--mkc-accent-light);
    line-height: 1;
}

.panel-evidence-stat-pill--files .panel-evidence-stat-pill__value[b-jiszx29mhx] {
    color: #93c5fd;
}
/* /Components/Pages/Prompts.razor.rz.scp.css */
/* =========================================================
   Prompts - Page styles
   ========================================================= */

.prompts-page[b-z7wjhgcn4m] {
    padding: 28px;
    min-height: calc(100vh - 56px);
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ── Page header ── */
.prompts-header[b-z7wjhgcn4m] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.prompts-title[b-z7wjhgcn4m] {
    font-family: var(--mkc-font);
    font-size: 28px;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--mkc-white);
    margin: 0 0 4px 0;
}

.prompts-subtitle[b-z7wjhgcn4m] {
    font-size: 14px;
    color: var(--mkc-grey-3);
    margin: 0;
}

.prompts-header__actions[b-z7wjhgcn4m] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* ── Buttons ── */
.prompts-btn[b-z7wjhgcn4m] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 10px;
    font-family: var(--mkc-font);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: background 0.15s, color 0.15s, opacity 0.15s;
    white-space: nowrap;
}

.prompts-btn--primary[b-z7wjhgcn4m] {
    background: linear-gradient(135deg, var(--mkc-accent-light), var(--mkc-accent-dark));
    color: var(--mkc-white);
    border: 1px solid transparent;
}

    .prompts-btn--primary:hover[b-z7wjhgcn4m] { opacity: 0.88; }

    .prompts-btn--primary:disabled[b-z7wjhgcn4m] {
        opacity: 0.55;
        cursor: not-allowed;
    }

.prompts-btn--ghost[b-z7wjhgcn4m] {
    background: transparent;
    color: var(--mkc-grey-3);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

    .prompts-btn--ghost:hover[b-z7wjhgcn4m] {
        background: rgba(255, 255, 255, 0.05);
        color: var(--mkc-grey-1);
    }

    .prompts-btn--ghost:disabled[b-z7wjhgcn4m] {
        opacity: 0.55;
        cursor: not-allowed;
    }

.prompts-btn--active[b-z7wjhgcn4m] {
    background: rgba(164, 77, 255, 0.18);
    color: var(--mkc-accent-light);
    border: 1px solid rgba(164, 77, 255, 0.35);
}

    .prompts-btn--active:hover[b-z7wjhgcn4m] {
        background: rgba(164, 77, 255, 0.26);
    }

/* ── Toolbar ── */
.prompts-toolbar[b-z7wjhgcn4m] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.prompts-toolbar__filters[b-z7wjhgcn4m] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* ── Select ── */
.prompts-select[b-z7wjhgcn4m] {
    padding: 9px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: var(--mkc-white);
    font-family: var(--mkc-font);
    font-size: 13px;
    outline: none;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    appearance: none;
}

    .prompts-select:focus[b-z7wjhgcn4m] {
        border-color: rgba(164, 77, 255, 0.5);
        background: rgba(255, 255, 255, 0.07);
    }

    .prompts-select option[b-z7wjhgcn4m] {
        background: #1e1e1e;
        color: var(--mkc-white);
    }

/* ── Toast ── */
.prompts-toast[b-z7wjhgcn4m] {
    padding: 11px 18px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    animation: fadeInUp 0.2s ease;
}

.prompts-toast--success[b-z7wjhgcn4m] {
    background: rgba(38, 176, 80, 0.12);
    border: 1px solid rgba(38, 176, 80, 0.25);
    color: #4cde7b;
}

.prompts-toast--error[b-z7wjhgcn4m] {
    background: rgba(229, 0, 0, 0.1);
    border: 1px solid rgba(229, 0, 0, 0.2);
    color: #ff6b6b;
}

@@keyframes fadeInUp {
    from[b-z7wjhgcn4m] { opacity: 0; transform: translateY(6px); }
    to[b-z7wjhgcn4m]   { opacity: 1; transform: translateY(0); }
}

/* ── Empty / loading ── */
.prompts-empty[b-z7wjhgcn4m] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 72px 24px;
    color: var(--mkc-grey-4);
    text-align: center;
}

    .prompts-empty svg[b-z7wjhgcn4m] { opacity: 0.3; }

    .prompts-empty p[b-z7wjhgcn4m] {
        font-size: 14px;
        margin: 0;
    }

.prompts-loading[b-z7wjhgcn4m] {
    display: flex;
    justify-content: center;
    padding: 64px 0;
}

/* ── Table wrapper ── */
.prompts-table-wrapper[b-z7wjhgcn4m] {
    overflow-x: auto;
    border-radius: var(--mkc-radius);
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.03);
}

/* ── Table ── */
.prompts-table[b-z7wjhgcn4m] {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

    .prompts-table thead tr[b-z7wjhgcn4m] {
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .prompts-table th[b-z7wjhgcn4m] {
        padding: 13px 14px;
        text-align: left;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        color: var(--mkc-grey-4);
        white-space: nowrap;
    }

.prompts-th-sortable[b-z7wjhgcn4m] {
    cursor: pointer;
    user-select: none;
}

    .prompts-th-sortable:hover[b-z7wjhgcn4m] {
        color: var(--mkc-grey-1);
        background: rgba(255, 255, 255, 0.03);
    }

.prompts-th-inner[b-z7wjhgcn4m] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

    .prompts-table td[b-z7wjhgcn4m] {
        padding: 13px 14px;
        color: var(--mkc-grey-1);
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        vertical-align: middle;
    }

    .prompts-table tbody tr:last-child td[b-z7wjhgcn4m] { border-bottom: none; }

    .prompts-table tbody tr:hover td[b-z7wjhgcn4m] { background: rgba(255, 255, 255, 0.03); }

.prompts-table__row--inactive td[b-z7wjhgcn4m] { opacity: 0.5; }

.prompts-table__date[b-z7wjhgcn4m] {
    white-space: nowrap;
    color: var(--mkc-grey-3) !important;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.prompts-table__user[b-z7wjhgcn4m] {
    white-space: nowrap;
    color: var(--mkc-grey-3) !important;
    font-size: 13px;
}

.prompts-table__squad[b-z7wjhgcn4m] {
    white-space: nowrap;
    font-size: 13px;
}

.prompts-table__tools[b-z7wjhgcn4m] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    min-height: 26px;
}

.prompts-table__actions[b-z7wjhgcn4m] {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.prompts-table__fav[b-z7wjhgcn4m] {
    width: 36px;
    text-align: center;
}

/* ── Title button ── */
.prompts-title-btn[b-z7wjhgcn4m] {
    background: none;
    border: none;
    padding: 0;
    color: var(--mkc-white);
    font-family: var(--mkc-font);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: color 0.15s;
}

    .prompts-title-btn:hover[b-z7wjhgcn4m] { color: var(--mkc-accent-light); }

/* ── Favourite button ── */
.prompts-fav-btn[b-z7wjhgcn4m] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: transparent;
    border: none;
    color: var(--mkc-grey-4);
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
}

    .prompts-fav-btn:hover[b-z7wjhgcn4m] {
        color: #f5c518;
        background: rgba(245, 197, 24, 0.1);
    }

.prompts-fav-btn--active[b-z7wjhgcn4m] { color: #f5c518 !important; }

/* ── Type badge ── */
.prompts-type-badge[b-z7wjhgcn4m] {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 6px;
    background: rgba(164, 77, 255, 0.1);
    border: 1px solid rgba(164, 77, 255, 0.22);
    color: var(--mkc-accent-light);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

/* ── AI Tool badge ── */
.prompts-tool-badge[b-z7wjhgcn4m] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--mkc-grey-2);
    font-size: 12px;
    white-space: nowrap;
}

/* ── Status badge ── */
.prompts-status-badge[b-z7wjhgcn4m] {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.prompts-status-badge--active[b-z7wjhgcn4m] {
    background: rgba(38, 176, 80, 0.12);
    border: 1px solid rgba(38, 176, 80, 0.25);
    color: #4cde7b;
}

.prompts-status-badge--inactive[b-z7wjhgcn4m] {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--mkc-grey-4);
}

/* ── Action buttons ── */
.prompts-action-btn[b-z7wjhgcn4m] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--mkc-grey-3);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

    .prompts-action-btn:hover[b-z7wjhgcn4m] {
        background: rgba(255, 255, 255, 0.07);
        color: var(--mkc-white);
        border-color: rgba(255, 255, 255, 0.18);
    }

.prompts-action-btn--danger:hover[b-z7wjhgcn4m] {
    background: rgba(229, 0, 0, 0.1);
    color: #ff6b6b;
    border-color: rgba(229, 0, 0, 0.2);
}

.prompts-action-btn--success:hover[b-z7wjhgcn4m] {
    background: rgba(38, 176, 80, 0.1);
    color: #4cde7b;
    border-color: rgba(38, 176, 80, 0.2);
}

/* ── Spinner ── */
.prompts-spinner[b-z7wjhgcn4m] {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top-color: var(--mkc-accent-light);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.prompts-spinner--sm[b-z7wjhgcn4m] {
    width: 14px;
    height: 14px;
    border-width: 2px;
}

@@keyframes spin {
    to[b-z7wjhgcn4m] { transform: rotate(360deg); }
}

/* ── Modal overlay ── */
.prompts-modal-overlay[b-z7wjhgcn4m] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 24px;
}

.prompts-modal[b-z7wjhgcn4m] {
    background: #181818;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--mkc-radius);
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
    overflow: hidden;
}

.prompts-modal--view[b-z7wjhgcn4m] {
    max-width: 720px;
}

.prompts-modal__header[b-z7wjhgcn4m] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 22px 24px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    flex-shrink: 0;
}

.prompts-modal__header-meta[b-z7wjhgcn4m] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.prompts-modal__title[b-z7wjhgcn4m] {
    font-family: var(--mkc-font);
    font-size: 17px;
    font-weight: 500;
    color: var(--mkc-white);
    margin: 0;
}

.prompts-modal__close[b-z7wjhgcn4m] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: transparent;
    border: none;
    color: var(--mkc-grey-4);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}

    .prompts-modal__close:hover[b-z7wjhgcn4m] {
        background: rgba(255, 255, 255, 0.07);
        color: var(--mkc-grey-1);
    }

.prompts-modal__body[b-z7wjhgcn4m] {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    overflow-y: auto;
}

.prompts-modal__footer[b-z7wjhgcn4m] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 18px 24px 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    flex-shrink: 0;
}

/* ── Form groups ── */
.prompts-form-group[b-z7wjhgcn4m] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.prompts-form-label[b-z7wjhgcn4m] {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mkc-grey-4);
}

.prompts-required[b-z7wjhgcn4m] {
    color: #ff6b6b;
}

.prompts-input[b-z7wjhgcn4m] {
    width: 100%;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: var(--mkc-white);
    font-family: var(--mkc-font);
    font-size: 14px;
    outline: none;
    transition: border-color 0.15s, background 0.15s;
    box-sizing: border-box;
}

    .prompts-input[b-z7wjhgcn4m]::placeholder { color: var(--mkc-grey-5); }

    .prompts-input:focus[b-z7wjhgcn4m] {
        border-color: rgba(164, 77, 255, 0.5);
        background: rgba(255, 255, 255, 0.07);
    }

.prompts-textarea[b-z7wjhgcn4m] {
    width: 100%;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: var(--mkc-white);
    font-family: var(--mkc-font);
    font-size: 14px;
    outline: none;
    resize: vertical;
    transition: border-color 0.15s, background 0.15s;
    box-sizing: border-box;
}

    .prompts-textarea:focus[b-z7wjhgcn4m] {
        border-color: rgba(164, 77, 255, 0.5);
        background: rgba(255, 255, 255, 0.07);
    }

/* ── AI Tools checkboxes ── */
.prompts-tools-checkboxes[b-z7wjhgcn4m] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
}

.prompts-checkbox-label[b-z7wjhgcn4m] {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: var(--mkc-grey-2);
    cursor: pointer;
}

    .prompts-checkbox-label input[type="checkbox"][b-z7wjhgcn4m] {
        accent-color: var(--mkc-accent-light);
        width: 15px;
        height: 15px;
        cursor: pointer;
    }

/* ── Alert ── */
.prompts-alert[b-z7wjhgcn4m] {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
}

.prompts-alert--error[b-z7wjhgcn4m] {
    background: rgba(229, 0, 0, 0.1);
    border: 1px solid rgba(229, 0, 0, 0.2);
    color: #ff6b6b;
}

/* ── Content preview (view modal) ── */
.prompts-content-preview[b-z7wjhgcn4m] {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    padding: 16px 18px;
    color: var(--mkc-grey-1);
    font-family: var(--mkc-font);
    font-size: 14px;
    line-height: 1.65;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
}

/* ── View meta ── */
.prompts-view-meta[b-z7wjhgcn4m] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 4px;
}

.prompts-view-meta__row[b-z7wjhgcn4m] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 13px;
}

.prompts-view-meta__label[b-z7wjhgcn4m] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mkc-grey-4);
    white-space: nowrap;
    min-width: 110px;
}
/* /Components/Pages/ReportRecipients.razor.rz.scp.css */
/* =========================================================
   Report Recipients - Page styles
   ========================================================= */

.rr-page[b-dpyfvas2kz] {
    padding: 28px;
    min-height: calc(100vh - 56px);
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ── Page header ── */
.rr-header[b-dpyfvas2kz] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.rr-title[b-dpyfvas2kz] {
    font-family: var(--mkc-font);
    font-size: 28px;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--mkc-white);
    margin: 0 0 4px 0;
}

.rr-subtitle[b-dpyfvas2kz] {
    font-size: 14px;
    color: var(--mkc-grey-3);
    margin: 0;
}

/* ── Add bar ── */
.rr-add-bar[b-dpyfvas2kz] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.rr-add-bar__input-wrap[b-dpyfvas2kz] {
    position: relative;
    flex: 1;
    max-width: 460px;
    min-width: 240px;
}

.rr-add-bar__icon[b-dpyfvas2kz] {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--mkc-grey-4);
    pointer-events: none;
}

.rr-add-bar__input[b-dpyfvas2kz] {
    width: 100%;
    padding: 10px 14px 10px 40px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: var(--mkc-white);
    font-family: var(--mkc-font);
    font-size: 14px;
    outline: none;
    transition: border-color 0.15s, background 0.15s;
    box-sizing: border-box;
}

    .rr-add-bar__input[b-dpyfvas2kz]::placeholder {
        color: var(--mkc-grey-4);
    }

    .rr-add-bar__input:focus[b-dpyfvas2kz] {
        border-color: rgba(164, 77, 255, 0.5);
        background: rgba(255, 255, 255, 0.07);
    }

.rr-add-bar__input--error[b-dpyfvas2kz] {
    border-color: rgba(229, 0, 0, 0.5) !important;
}

/* ── Error message ── */
.rr-error[b-dpyfvas2kz] {
    font-size: 13px;
    color: #ff6b6b;
    margin: -14px 0 0 0;
}

.rr-saved[b-dpyfvas2kz] {
    font-size: 13px;
    color: #4cde7b;
}

/* ── Settings card ── */
.rr-settings-card[b-dpyfvas2kz] {
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: var(--mkc-radius);
    background: rgba(255, 255, 255, 0.03);
    overflow: hidden;
}

.rr-settings-card__header[b-dpyfvas2kz] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--mkc-grey-3);
}

.rr-settings-card__title[b-dpyfvas2kz] {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mkc-grey-3);
}

.rr-settings-card__body[b-dpyfvas2kz] {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}

.rr-settings-field[b-dpyfvas2kz] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 24px;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    min-width: 220px;
}

    .rr-settings-field:last-child[b-dpyfvas2kz] {
        border-right: none;
    }

.rr-settings-label[b-dpyfvas2kz] {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mkc-grey-4);
}

.rr-settings-hint[b-dpyfvas2kz] {
    font-size: 12px;
    color: var(--mkc-grey-5);
    margin: 0;
}

.rr-settings-time-input[b-dpyfvas2kz] {
    width: 130px;
    padding: 9px 13px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: var(--mkc-white);
    font-family: var(--mkc-font);
    font-size: 14px;
    outline: none;
    transition: border-color 0.15s, background 0.15s;
    color-scheme: dark;
}

    .rr-settings-time-input:focus[b-dpyfvas2kz] {
        border-color: rgba(164, 77, 255, 0.5);
        background: rgba(255, 255, 255, 0.07);
    }

.rr-settings-card__footer[b-dpyfvas2kz] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    justify-content: flex-end;
}

/* ── Toggle ── */
.rr-toggle[b-dpyfvas2kz] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    padding: 6px 0;
}

    .rr-toggle input[type="checkbox"][b-dpyfvas2kz] {
        display: none;
    }

.rr-toggle__track[b-dpyfvas2kz] {
    position: relative;
    width: 40px;
    height: 22px;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.12);
    transition: background 0.2s, border-color 0.2s;
    flex-shrink: 0;
}

.rr-toggle input:checked ~ .rr-toggle__track[b-dpyfvas2kz] {
    background: rgba(164, 77, 255, 0.5);
    border-color: var(--mkc-accent-light);
}

.rr-toggle__thumb[b-dpyfvas2kz] {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--mkc-grey-4);
    transition: transform 0.2s, background 0.2s;
}

.rr-toggle input:checked ~ .rr-toggle__track .rr-toggle__thumb[b-dpyfvas2kz] {
    transform: translateX(18px);
    background: var(--mkc-accent-light);
}

.rr-toggle__label[b-dpyfvas2kz] {
    font-size: 14px;
    color: var(--mkc-grey-2);
}

/* ── Buttons ── */
.rr-btn[b-dpyfvas2kz] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 10px;
    font-family: var(--mkc-font);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    white-space: nowrap;
    transition: opacity 0.15s;
}

.rr-btn--primary[b-dpyfvas2kz] {
    background: linear-gradient(135deg, var(--mkc-accent-light), var(--mkc-accent-dark));
    color: var(--mkc-white);
}

    .rr-btn--primary:hover:not(:disabled)[b-dpyfvas2kz] {
        opacity: 0.88;
    }

    .rr-btn--primary:disabled[b-dpyfvas2kz] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.rr-btn--danger[b-dpyfvas2kz] {
    background: rgba(229, 0, 0, 0.75);
    color: var(--mkc-white);
}

    .rr-btn--danger:hover:not(:disabled)[b-dpyfvas2kz] {
        background: rgba(229, 0, 0, 0.9);
    }

    .rr-btn--danger:disabled[b-dpyfvas2kz] {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* ── Table ── */
.rr-table-wrapper[b-dpyfvas2kz] {
    border-radius: var(--mkc-radius);
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.03);
    overflow-x: auto;
}

.rr-table[b-dpyfvas2kz] {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

    .rr-table thead tr[b-dpyfvas2kz] {
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .rr-table th[b-dpyfvas2kz] {
        padding: 14px 16px;
        text-align: left;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        color: var(--mkc-grey-4);
        white-space: nowrap;
    }

    .rr-table td[b-dpyfvas2kz] {
        padding: 14px 16px;
        color: var(--mkc-grey-1);
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        vertical-align: middle;
    }

    .rr-table tbody tr:last-child td[b-dpyfvas2kz] {
        border-bottom: none;
    }

    .rr-table tbody tr:hover td[b-dpyfvas2kz] {
        background: rgba(255, 255, 255, 0.02);
    }

.rr-table__email[b-dpyfvas2kz] {
    font-size: 14px;
    color: var(--mkc-grey-1) !important;
}

.rr-table__date[b-dpyfvas2kz] {
    font-size: 13px;
    color: var(--mkc-grey-3) !important;
    white-space: nowrap;
}

.rr-table__actions[b-dpyfvas2kz] {
    text-align: right;
    white-space: nowrap;
}

/* ── Delete button ── */
.rr-delete-btn[b-dpyfvas2kz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--mkc-grey-4);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

    .rr-delete-btn:hover[b-dpyfvas2kz] {
        background: rgba(229, 0, 0, 0.12);
        color: #ff6b6b;
    }

/* ── Empty state ── */
.rr-empty[b-dpyfvas2kz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 56px 24px;
    color: var(--mkc-grey-4);
    text-align: center;
}

    .rr-empty svg[b-dpyfvas2kz] {
        opacity: 0.35;
    }

    .rr-empty p[b-dpyfvas2kz] {
        font-size: 14px;
        margin: 0;
    }

/* ══ Modal ══ */
.modal-backdrop[b-dpyfvas2kz] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 500;
    padding: 24px;
    animation: rr-fadeIn-b-dpyfvas2kz 0.15s ease;
}

@keyframes rr-fadeIn-b-dpyfvas2kz {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.modal-panel[b-dpyfvas2kz] {
    background: #161616;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--mkc-radius);
    width: 100%;
    max-width: 780px;
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: rr-slideUp-b-dpyfvas2kz 0.2s ease;
}

@keyframes rr-slideUp-b-dpyfvas2kz {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

.modal-panel--sm[b-dpyfvas2kz] {
    max-width: 440px;
}

.modal-header[b-dpyfvas2kz] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 24px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    flex-shrink: 0;
}

.modal-title[b-dpyfvas2kz] {
    font-size: 18px;
    font-weight: 600;
    color: var(--mkc-white);
    margin: 0;
}

.modal-close[b-dpyfvas2kz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    color: var(--mkc-grey-3);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}

    .modal-close:hover[b-dpyfvas2kz] {
        border-color: #f87171;
        color: #f87171;
        background: rgba(248, 113, 113, 0.08);
    }

.modal-body[b-dpyfvas2kz] {
    padding: 22px 24px;
    color: var(--mkc-grey-2);
    font-size: 14px;
    line-height: 1.6;
}

    .modal-body p[b-dpyfvas2kz] {
        margin: 0;
    }

.modal-footer[b-dpyfvas2kz] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    flex-shrink: 0;
}

.modal-footer__actions[b-dpyfvas2kz] {
    display: flex;
    gap: 10px;
}

/* ── Modal action buttons ── */
.panel-action-btn[b-dpyfvas2kz] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 20px;
    font-family: var(--mkc-font);
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}

.panel-action-btn--ghost[b-dpyfvas2kz] {
    background: transparent;
    color: var(--mkc-grey-3);
    border-color: rgba(255, 255, 255, 0.12);
}

    .panel-action-btn--ghost:hover[b-dpyfvas2kz] {
        background: rgba(255, 255, 255, 0.04);
        color: var(--mkc-white);
    }
/* /Components/Pages/Squads.razor.rz.scp.css */
/* =========================================================
   Squad Management - Page styles
   ========================================================= */

.squads-page[b-fgu16welss] {
    padding: 28px;
    min-height: calc(100vh - 56px);
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ── Page header ── */
.squads-header[b-fgu16welss] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.squads-title[b-fgu16welss] {
    font-family: var(--mkc-font);
    font-size: 28px;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--mkc-white);
    margin: 0 0 4px 0;
}

.squads-subtitle[b-fgu16welss] {
    font-size: 14px;
    color: var(--mkc-grey-3);
    margin: 0;
}

/* ── Actions ── */
.squads-header__actions[b-fgu16welss] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.squads-btn[b-fgu16welss] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 10px;
    font-family: var(--mkc-font);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.squads-btn--secondary[b-fgu16welss] {
    background: rgba(255, 255, 255, 0.07);
    color: var(--mkc-grey-1);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

    .squads-btn--secondary:hover[b-fgu16welss] {
        background: rgba(164, 77, 255, 0.15);
        color: var(--mkc-accent-light);
        border-color: rgba(164, 77, 255, 0.35);
    }

.squads-btn--primary[b-fgu16welss] {
    background: linear-gradient(135deg, var(--mkc-accent-light), var(--mkc-accent-dark));
    color: var(--mkc-white);
    border: 1px solid transparent;
}

    .squads-btn--primary:hover[b-fgu16welss] {
        opacity: 0.88;
    }

.squads-btn--ghost[b-fgu16welss] {
    background: transparent;
    color: var(--mkc-grey-3);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

    .squads-btn--ghost:hover[b-fgu16welss] {
        background: rgba(255, 255, 255, 0.05);
        color: var(--mkc-grey-1);
    }

/* ── Toolbar ── */
.squads-toolbar[b-fgu16welss] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.squads-search-wrapper[b-fgu16welss] {
    position: relative;
    flex: 1;
    max-width: 420px;
}

.squads-search-icon[b-fgu16welss] {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--mkc-grey-4);
    pointer-events: none;
}

.squads-search[b-fgu16welss] {
    width: 100%;
    padding: 10px 14px 10px 38px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: var(--mkc-white);
    font-family: var(--mkc-font);
    font-size: 14px;
    transition: border-color 0.15s, background 0.15s;
    outline: none;
}

    .squads-search[b-fgu16welss]::placeholder {
        color: var(--mkc-grey-4);
    }

    .squads-search:focus[b-fgu16welss] {
        border-color: rgba(164, 77, 255, 0.5);
        background: rgba(255, 255, 255, 0.07);
    }

    .squads-search[b-fgu16welss]::-webkit-search-cancel-button {
        filter: invert(0.6);
        cursor: pointer;
    }

.squads-count[b-fgu16welss] {
    font-size: 13px;
    color: var(--mkc-grey-3);
    white-space: nowrap;
}

/* ── Table wrapper ── */
.squads-table-wrapper[b-fgu16welss] {
    overflow-x: auto;
    border-radius: var(--mkc-radius);
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.03);
}

/* ── Table ── */
.squads-table[b-fgu16welss] {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

    .squads-table thead tr[b-fgu16welss] {
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .squads-table th[b-fgu16welss] {
        padding: 14px 16px;
        text-align: left;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        color: var(--mkc-grey-4);
        white-space: nowrap;
    }

    .squads-table td[b-fgu16welss] {
        padding: 14px 16px;
        color: var(--mkc-grey-1);
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        vertical-align: middle;
    }

    .squads-table tbody tr:last-child td[b-fgu16welss] {
        border-bottom: none;
    }

    .squads-table tbody tr:hover td[b-fgu16welss] {
        background: rgba(255, 255, 255, 0.03);
    }

.squads-table__id[b-fgu16welss] {
    color: var(--mkc-grey-4) !important;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.squads-table__center[b-fgu16welss] {
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.squads-table__row--clickable[b-fgu16welss] {
    cursor: pointer;
}

    .squads-table__row--clickable:hover td[b-fgu16welss] {
        background: rgba(164, 77, 255, 0.06) !important;
    }

.squads-table__empty[b-fgu16welss] {
    text-align: center !important;
    padding: 56px 24px !important;
    color: var(--mkc-grey-4) !important;
}

    .squads-table__empty svg[b-fgu16welss] {
        display: block;
        margin: 0 auto 12px;
        opacity: 0.4;
    }

    .squads-table__empty span[b-fgu16welss] {
        display: block;
        font-size: 14px;
    }

/* ── Maturity badge ── */
.squads-maturity-badge[b-fgu16welss] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    background: rgba(164, 77, 255, 0.12);
    color: var(--mkc-accent-light);
    border: 1px solid rgba(164, 77, 255, 0.25);
}

/* ── Squad level badge ── */
.squads-level-badge[b-fgu16welss] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    background: rgba(56, 139, 253, 0.12);
    color: #58a6ff;
    border: 1px solid rgba(56, 139, 253, 0.28);
}

/* ── Members badge ── */
.squads-members-badge[b-fgu16welss] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    background: rgba(255, 255, 255, 0.06);
    color: var(--mkc-grey-2);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ── Sortable table headers ── */
.squads-th-sortable[b-fgu16welss] {
    cursor: pointer;
    user-select: none;
}

    .squads-th-sortable:hover[b-fgu16welss] {
        color: var(--mkc-grey-2);
    }

.squads-sort-icon[b-fgu16welss] {
    display: inline-block;
    margin-left: 4px;
    font-size: 10px;
    opacity: 0.55;
}

/* ── Filter row ── */
.squads-filters[b-fgu16welss] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.squads-filter-select-wrapper[b-fgu16welss] {
    min-width: 180px;
    max-width: 260px;
}

.squads-filter-select[b-fgu16welss] {
    font-size: 13px;
    padding: 8px 36px 8px 12px;
}

.squads-filter-clear[b-fgu16welss] {
    padding: 8px 14px;
    font-size: 13px;
}

/* ── Modal ── */
.squads-modal-backdrop[b-fgu16welss] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 24px;
}

.squads-modal[b-fgu16welss] {
    background: #181818;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--mkc-radius);
    width: 100%;
    max-width: 700px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
}

.squads-modal__header[b-fgu16welss] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 24px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.squads-modal__title[b-fgu16welss] {
    font-family: var(--mkc-font);
    font-size: 17px;
    font-weight: 500;
    color: var(--mkc-white);
    margin: 0;
}

.squads-modal__close[b-fgu16welss] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: transparent;
    border: none;
    color: var(--mkc-grey-4);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

    .squads-modal__close:hover[b-fgu16welss] {
        background: rgba(255, 255, 255, 0.07);
        color: var(--mkc-grey-1);
    }

.squads-modal__body[b-fgu16welss] {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.squads-modal__footer[b-fgu16welss] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 18px 24px 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

/* ── Form fields ── */
.squads-form-field[b-fgu16welss] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.squads-form-label[b-fgu16welss] {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mkc-grey-4);
}

.squads-form-input[b-fgu16welss] {
    width: 100%;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: var(--mkc-white);
    font-family: var(--mkc-font);
    font-size: 14px;
    outline: none;
    transition: border-color 0.15s, background 0.15s;
    appearance: none;
}

    .squads-form-input[b-fgu16welss]::placeholder {
        color: var(--mkc-grey-5);
    }

    .squads-form-input:focus[b-fgu16welss] {
        border-color: rgba(164, 77, 255, 0.5);
        background: rgba(255, 255, 255, 0.07);
    }

.squads-form-select-wrapper[b-fgu16welss] {
    position: relative;
    display: flex;
    align-items: center;
}

.squads-form-select[b-fgu16welss] {
    cursor: pointer;
    padding-right: 36px;
    background: #1a1a1a;
    border: 1px solid var(--mkc-grey-6);
    border-radius: 10px;
    color: var(--mkc-white);
    font-family: var(--mkc-font);
    font-size: 14px;
    outline: none;
    appearance: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

    .squads-form-select:focus[b-fgu16welss] {
        border-color: var(--mkc-accent-light);
        box-shadow: 0 0 0 3px rgba(164, 77, 255, 0.15);
        background: #1a1a1a;
    }

    .squads-form-select option[b-fgu16welss] {
        background: #1a1a1a;
        color: var(--mkc-white);
    }

.squads-form-select-chevron[b-fgu16welss] {
    position: absolute;
    right: 12px;
    color: var(--mkc-grey-4);
    pointer-events: none;
}

/* ── Form grid ── */
.squads-form-grid[b-fgu16welss] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.squads-form-field--full[b-fgu16welss] {
    grid-column: 1 / -1;
}

/* ── Error/Success messages ── */
.squads-form-error[b-fgu16welss] {
    padding: 10px 14px;
    background: rgba(229, 0, 0, 0.1);
    border: 1px solid rgba(229, 0, 0, 0.2);
    border-radius: 8px;
    color: #ff6b6b;
    font-size: 13px;
    margin: 0;
}

.squads-form-success[b-fgu16welss] {
    padding: 10px 14px;
    background: rgba(38, 176, 80, 0.12);
    border: 1px solid rgba(38, 176, 80, 0.25);
    border-radius: 8px;
    color: #4cde7b;
    font-size: 13px;
    margin: 0;
}
/* /Components/Pages/Users.razor.rz.scp.css */
/* =========================================================
   User Management - Page styles
   ========================================================= */

.users-page[b-sjvsy3x5r7] {
    padding: 28px;
    min-height: calc(100vh - 56px);
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ── Page header ── */
.users-header[b-sjvsy3x5r7] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.users-title[b-sjvsy3x5r7] {
    font-family: var(--mkc-font);
    font-size: 28px;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--mkc-white);
    margin: 0 0 4px 0;
}

.users-subtitle[b-sjvsy3x5r7] {
    font-size: 14px;
    color: var(--mkc-grey-3);
    margin: 0;
}

/* ── Actions ── */
.users-header__actions[b-sjvsy3x5r7] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.users-btn[b-sjvsy3x5r7] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 10px;
    font-family: var(--mkc-font);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.users-btn--secondary[b-sjvsy3x5r7] {
    background: rgba(255, 255, 255, 0.07);
    color: var(--mkc-grey-1);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

    .users-btn--secondary:hover[b-sjvsy3x5r7] {
        background: rgba(164, 77, 255, 0.15);
        color: var(--mkc-accent-light);
        border-color: rgba(164, 77, 255, 0.35);
    }

.users-btn--primary[b-sjvsy3x5r7] {
    background: linear-gradient(135deg, var(--mkc-accent-light), var(--mkc-accent-dark));
    color: var(--mkc-white);
    border: 1px solid transparent;
}

    .users-btn--primary:hover[b-sjvsy3x5r7] {
        opacity: 0.88;
    }

.users-btn--ghost[b-sjvsy3x5r7] {
    background: transparent;
    color: var(--mkc-grey-3);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

    .users-btn--ghost:hover[b-sjvsy3x5r7] {
        background: rgba(255, 255, 255, 0.05);
        color: var(--mkc-grey-1);
    }

/* ── Toolbar ── */
.users-toolbar[b-sjvsy3x5r7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.users-search-wrapper[b-sjvsy3x5r7] {
    position: relative;
    flex: 1;
    max-width: 420px;
}

.users-search-icon[b-sjvsy3x5r7] {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--mkc-grey-4);
    pointer-events: none;
}

.users-search[b-sjvsy3x5r7] {
    width: 100%;
    padding: 10px 14px 10px 38px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: var(--mkc-white);
    font-family: var(--mkc-font);
    font-size: 14px;
    transition: border-color 0.15s, background 0.15s;
    outline: none;
}

    .users-search[b-sjvsy3x5r7]::placeholder {
        color: var(--mkc-grey-4);
    }

    .users-search:focus[b-sjvsy3x5r7] {
        border-color: rgba(164, 77, 255, 0.5);
        background: rgba(255, 255, 255, 0.07);
    }

    .users-search[b-sjvsy3x5r7]::-webkit-search-cancel-button {
        filter: invert(0.6);
        cursor: pointer;
    }

.users-count[b-sjvsy3x5r7] {
    font-size: 13px;
    color: var(--mkc-grey-3);
    white-space: nowrap;
}

/* ── Table wrapper ── */
.users-table-wrapper[b-sjvsy3x5r7] {
    overflow-x: auto;
    border-radius: var(--mkc-radius);
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.03);
}

/* ── Table ── */
.users-table[b-sjvsy3x5r7] {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

    .users-table thead tr[b-sjvsy3x5r7] {
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .users-table th[b-sjvsy3x5r7] {
        padding: 14px 16px;
        text-align: left;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        color: var(--mkc-grey-4);
        white-space: nowrap;
    }

    .users-table td[b-sjvsy3x5r7] {
        padding: 14px 16px;
        color: var(--mkc-grey-1);
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        vertical-align: middle;
    }

    .users-table tbody tr:last-child td[b-sjvsy3x5r7] {
        border-bottom: none;
    }

    .users-table tbody tr:hover td[b-sjvsy3x5r7] {
        background: rgba(255, 255, 255, 0.03);
    }

.users-table__id[b-sjvsy3x5r7] {
    color: var(--mkc-grey-4) !important;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.users-table__row--clickable[b-sjvsy3x5r7] {
    cursor: pointer;
}

    .users-table__row--clickable:hover td[b-sjvsy3x5r7] {
        background: rgba(164, 77, 255, 0.06) !important;
    }

.users-table__email[b-sjvsy3x5r7] {
    color: var(--mkc-grey-3) !important;
    font-size: 13px;
}

.users-table__empty[b-sjvsy3x5r7] {
    text-align: center !important;
    padding: 56px 24px !important;
    color: var(--mkc-grey-4) !important;
}

    .users-table__empty svg[b-sjvsy3x5r7] {
        display: block;
        margin: 0 auto 12px;
        opacity: 0.4;
    }

    .users-table__empty span[b-sjvsy3x5r7] {
        display: block;
        font-size: 14px;
    }

/* ── Role badge ── */
.users-role-badge[b-sjvsy3x5r7] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    background: rgba(164, 77, 255, 0.12);
    color: var(--mkc-accent-light);
    border: 1px solid rgba(164, 77, 255, 0.25);
}

/* ── Status badges ── */
.users-status[b-sjvsy3x5r7] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
}

    .users-status[b-sjvsy3x5r7]::before {
        content: '';
        display: inline-block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
    }

.users-status--active[b-sjvsy3x5r7] {
    background: rgba(38, 176, 80, 0.12);
    color: #4cde7b;
    border: 1px solid rgba(38, 176, 80, 0.25);
}

    .users-status--active[b-sjvsy3x5r7]::before {
        background: #4cde7b;
    }

.users-status--inactive[b-sjvsy3x5r7] {
    background: rgba(229, 0, 0, 0.1);
    color: #ff6b6b;
    border: 1px solid rgba(229, 0, 0, 0.2);
}

    .users-status--inactive[b-sjvsy3x5r7]::before {
        background: #ff6b6b;
    }

/* ── Modal ── */
.users-modal-backdrop[b-sjvsy3x5r7] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 24px;
}

.users-modal[b-sjvsy3x5r7] {
    background: #181818;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--mkc-radius);
    width: 100%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
}

.users-modal__header[b-sjvsy3x5r7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 24px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.users-modal__title[b-sjvsy3x5r7] {
    font-family: var(--mkc-font);
    font-size: 17px;
    font-weight: 500;
    color: var(--mkc-white);
    margin: 0;
}

.users-modal__close[b-sjvsy3x5r7] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: transparent;
    border: none;
    color: var(--mkc-grey-4);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

    .users-modal__close:hover[b-sjvsy3x5r7] {
        background: rgba(255, 255, 255, 0.07);
        color: var(--mkc-grey-1);
    }

.users-modal__body[b-sjvsy3x5r7] {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.users-modal__footer[b-sjvsy3x5r7] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 18px 24px 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

/* ── Form fields ── */
.users-form-field[b-sjvsy3x5r7] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.users-form-label[b-sjvsy3x5r7] {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mkc-grey-4);
}

.users-form-input[b-sjvsy3x5r7] {
    width: 100%;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: var(--mkc-white);
    font-family: var(--mkc-font);
    font-size: 14px;
    outline: none;
    transition: border-color 0.15s, background 0.15s;
    appearance: none;
}

    .users-form-input[b-sjvsy3x5r7]::placeholder {
        color: var(--mkc-grey-5);
    }

    .users-form-input:focus[b-sjvsy3x5r7] {
        border-color: rgba(164, 77, 255, 0.5);
        background: rgba(255, 255, 255, 0.07);
    }

.users-form-select-wrapper[b-sjvsy3x5r7] {
    position: relative;
    display: flex;
    align-items: center;
}

.users-form-select[b-sjvsy3x5r7] {
    cursor: pointer;
    padding-right: 36px;
    background: #1a1a1a;
    border: 1px solid var(--mkc-grey-6);
    border-radius: 10px;
    color: var(--mkc-white);
    font-family: var(--mkc-font);
    font-size: 14px;
    outline: none;
    appearance: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

    .users-form-select:focus[b-sjvsy3x5r7] {
        border-color: var(--mkc-accent-light);
        box-shadow: 0 0 0 3px rgba(164, 77, 255, 0.15);
        background: #1a1a1a;
    }

    .users-form-select option[b-sjvsy3x5r7] {
        background: #1a1a1a;
        color: var(--mkc-white);
    }

.users-form-select-chevron[b-sjvsy3x5r7] {
    position: absolute;
    right: 12px;
    color: var(--mkc-grey-4);
    pointer-events: none;
}

/* ── Modal wide variant ── */
.users-modal--wide[b-sjvsy3x5r7] {
    max-width: 600px;
}

/* ── Modal header with avatar ── */
.users-modal__header-info[b-sjvsy3x5r7] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.users-modal__avatar[b-sjvsy3x5r7] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--mkc-accent-light), var(--mkc-accent-dark));
    color: var(--mkc-white);
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    letter-spacing: 0.03em;
}

.users-modal__subtitle[b-sjvsy3x5r7] {
    font-size: 13px;
    color: var(--mkc-grey-4);
    display: block;
    margin-top: 2px;
}

/* ── Form grid ── */
.users-form-grid[b-sjvsy3x5r7] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.users-form-field--full[b-sjvsy3x5r7] {
    grid-column: 1 / -1;
}

/* ── Read-only input variant ── */
.users-form-input--readonly[b-sjvsy3x5r7] {
    opacity: 0.55;
    cursor: default;
}

    .users-form-input--readonly:focus[b-sjvsy3x5r7] {
        border-color: rgba(255, 255, 255, 0.1);
        background: rgba(255, 255, 255, 0.05);
    }

/* ── Toggle switch ── */
.users-toggle[b-sjvsy3x5r7] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    padding: 10px 0;
}

    .users-toggle input[type="checkbox"][b-sjvsy3x5r7] {
        display: none;
    }

.users-toggle__track[b-sjvsy3x5r7] {
    position: relative;
    width: 40px;
    height: 22px;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.12);
    transition: background 0.2s, border-color 0.2s;
    flex-shrink: 0;
}

.users-toggle input:checked ~ .users-toggle__track[b-sjvsy3x5r7] {
    background: rgba(164, 77, 255, 0.5);
    border-color: var(--mkc-accent-light);
}

.users-toggle__thumb[b-sjvsy3x5r7] {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--mkc-grey-4);
    transition: transform 0.2s, background 0.2s;
}

.users-toggle input:checked ~ .users-toggle__track .users-toggle__thumb[b-sjvsy3x5r7] {
    transform: translateX(18px);
    background: var(--mkc-accent-light);
}

.users-toggle__label[b-sjvsy3x5r7] {
    font-size: 14px;
    color: var(--mkc-grey-2);
    min-width: 24px;
}

/* ── Form section (squads) ── */
.users-form-section[b-sjvsy3x5r7] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 4px;
}

.users-form-section__title[b-sjvsy3x5r7] {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--mkc-grey-4);
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* ── Squad chips ── */
.users-squads-grid[b-sjvsy3x5r7] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.users-squad-chip[b-sjvsy3x5r7] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 8px;
    font-family: var(--mkc-font);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: var(--mkc-grey-3);
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

    .users-squad-chip:hover[b-sjvsy3x5r7] {
        background: rgba(164, 77, 255, 0.1);
        border-color: rgba(164, 77, 255, 0.3);
        color: var(--mkc-grey-1);
    }

.users-squad-chip--selected[b-sjvsy3x5r7] {
    background: rgba(164, 77, 255, 0.15) !important;
    border-color: rgba(164, 77, 255, 0.45) !important;
    color: var(--mkc-accent-light) !important;
}

/* ── AI Tool item (chip + exec-type select inline) ── */
.users-aitool-list[b-sjvsy3x5r7] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.users-aitool-item[b-sjvsy3x5r7] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.users-aitool-exec-select[b-sjvsy3x5r7] {
    height: 28px;
    padding: 0 8px;
    font-size: 12px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    color: var(--mkc-grey-2);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

    .users-aitool-exec-select:focus[b-sjvsy3x5r7] {
        outline: none;
        border-color: rgba(164, 77, 255, 0.45);
        background: rgba(255, 255, 255, 0.09);
    }

    .users-aitool-exec-select option[b-sjvsy3x5r7] {
        background: #1e1e2e;
        color: var(--mkc-grey-1);
    }