/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* ═══════════════════════════════════════════
   TOPBAR
   ═══════════════════════════════════════════ */

.topbar[b-gaa7b8rcfg] {
    width: 100%;
    height: 100%;
    padding: 0 1rem;
    gap: 0.5rem;
    min-width: 0;
}

.topbar-left[b-gaa7b8rcfg] {
    flex: 0 0 auto;
    min-width: 0;
    gap: 0.5rem;
}

.topbar-page-title[b-gaa7b8rcfg] {
    font-weight: 650;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
}

@media (max-width: 480px) {
    .topbar-page-title[b-gaa7b8rcfg] {
        display: none;
    }
}

.topbar-right[b-gaa7b8rcfg] {
    flex: 0 0 auto;
    min-width: 0;
    gap: 0.15rem;
}

.topbar-icon-hide-xs[b-gaa7b8rcfg] {
    display: inline-flex;
}

@media (max-width: 480px) {
    .topbar-icon-hide-xs[b-gaa7b8rcfg] {
        display: none !important;
    }
}

/* ═══════════════════════════════════════════
   ICON BUTTONS — circular, dark on white header
   ═══════════════════════════════════════════ */

.icon-btn[b-gaa7b8rcfg] {
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    /* Dark colour so they're visible on white header */
    color: rgba(0, 0, 0, 0.58) !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    flex-shrink: 0;
    /* Override Radzen's transition to prevent purple flash */
    transition: background 0.14s ease, color 0.14s ease !important;
}

    /* Force icon spans dark too */
    .icon-btn .rzi[b-gaa7b8rcfg],
    .icon-btn .rz-button-icon[b-gaa7b8rcfg],
    .icon-btn span[class*="rzi"][b-gaa7b8rcfg] {
        color: rgba(0, 0, 0, 0.58) !important;
    }

    /* Hover: grey circle, no primary/purple */
    .icon-btn:hover[b-gaa7b8rcfg] {
        background: rgba(0, 0, 0, 0.07) !important;
        color: rgba(0, 0, 0, 0.85) !important;
        box-shadow: none !important;
        /* Kill Radzen ripple */
        animation: none !important;
    }

        .icon-btn:hover .rzi[b-gaa7b8rcfg],
        .icon-btn:hover .rz-button-icon[b-gaa7b8rcfg] {
            color: rgba(0, 0, 0, 0.85) !important;
        }

    /* Active */
    .icon-btn:active[b-gaa7b8rcfg] {
        background: rgba(0, 0, 0, 0.12) !important;
        transform: scale(0.95) !important;
        box-shadow: none !important;
    }

    /* Kill Radzen's pseudo-element ripple animation */
    .icon-btn[b-gaa7b8rcfg]::after {
        display: none !important;
    }

/* ═══════════════════════════════════════════
   CLIENT BADGE
   ═══════════════════════════════════════════ */

.client-badge[b-gaa7b8rcfg] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    background: var(--rz-primary-lighter);
    color: var(--rz-primary);
    border: 1px solid var(--rz-primary-light, var(--rz-primary-lighter));
    border-radius: 20px;
    padding: 0.22rem 0.3rem 0.22rem 0.65rem;
    font-size: 0.85rem;
    font-weight: 500;
    max-width: 240px;
    min-width: 0;
    flex: 0 1 auto;
    transition: box-shadow 0.14s ease;
}

    .client-badge:hover[b-gaa7b8rcfg] {
        box-shadow: 0 0 0 3px rgba(var(--rz-primary-rgb, 59,130,246), 0.12);
    }

.client-name[b-gaa7b8rcfg] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

@media (max-width: 640px) {
    .client-name[b-gaa7b8rcfg] {
        display: none;
    }

    .client-badge[b-gaa7b8rcfg] {
        padding: 0.22rem 0.3rem 0.22rem 0.5rem;
        max-width: unset;
    }
}

/* ═══════════════════════════════════════════
   USER INFO
   ═══════════════════════════════════════════ */

.user-info[b-gaa7b8rcfg] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    cursor: pointer;
    padding: 0.3rem 0.5rem;
    border-radius: 10px;
    transition: background 0.14s ease;
    min-width: 0;
    flex-shrink: 0;
}

    .user-info:hover[b-gaa7b8rcfg] {
        background: rgba(0,0,0,.05);
    }

.user-avatar[b-gaa7b8rcfg] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(0,0,0,.06);
    flex-shrink: 0;
}

.user-details[b-gaa7b8rcfg] {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    min-width: 0;
}

@media (max-width: 768px) {
    .user-details[b-gaa7b8rcfg] {
        display: none;
    }
}

.user-name[b-gaa7b8rcfg] {
    font-size: 0.875rem;
    font-weight: 620;
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: rgba(0,0,0,.85);
    letter-spacing: -0.005em;
}

.user-role[b-gaa7b8rcfg] {
    font-size: 0.72rem;
    color: rgba(0,0,0,.5);
}

/* ═══════════════════════════════════════════
   SIDEBAR CONTEXT LABEL
   (active client name pill inside sidebar)
   ═══════════════════════════════════════════ */

.sidebar-context-label[b-gaa7b8rcfg] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.85rem;
    margin: 0.3rem 0.5rem 0.1rem;
    background: var(--rz-primary-lighter);
    border-radius: 0.625rem;
    border-left: 3px solid var(--rz-primary);
    min-width: 0;
    overflow: hidden;
}

.sidebar-context-icon[b-gaa7b8rcfg] {
    font-size: 1rem;
    color: var(--rz-primary);
    flex-shrink: 0;
}

.sidebar-context-name[b-gaa7b8rcfg] {
    font-size: 0.82rem;
    font-weight: 650;
    color: var(--rz-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* ═══════════════════════════════════════════
   HEADER BASE
   ═══════════════════════════════════════════ */

.rz-header[b-gaa7b8rcfg] {
    background: #ffffff !important;
    color: #111 !important;
    border-bottom: 1px solid rgba(0,0,0,.07) !important;
    box-shadow: 0 1px 8px rgba(0,0,0,.05) !important;
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* NavMenu component styles */

.nav-menu[b-e69i723rl3] {
    padding: 0;
}

/* Section divider title inside panel menu */
.nav-section-title[b-e69i723rl3] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-weight: 700;
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    opacity: 0.55;
    pointer-events: none;
    border-top: 1px solid var(--rz-border-disabled-color);
    margin-top: 0.5rem;
    color: var(--rz-text-secondary-color);
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-dxuhp13lwa],
.components-reconnect-repeated-attempt-visible[b-dxuhp13lwa],
.components-reconnect-failed-visible[b-dxuhp13lwa],
.components-pause-visible[b-dxuhp13lwa],
.components-resume-failed-visible[b-dxuhp13lwa],
.components-rejoining-animation[b-dxuhp13lwa] {
    display: none;
}

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


#components-reconnect-modal[b-dxuhp13lwa] {
    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-dxuhp13lwa 0.5s both;
    &[open]

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

@keyframes components-rejoining-animation-b-dxuhp13lwa {
    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/Clients.razor.rz.scp.css */
/* ── Clients grid: ολόκληρη η γραμμή clickable ───────────────────────── */

/* Cursor pointer στις γραμμές του clients grid */
.clients-grid .rz-datatable-data > tr[b-mqjc1sojz8] {
    cursor: pointer;
}

/* Hover effect πιο εμφανές για να φαίνεται ότι είναι clickable */
.clients-grid .rz-datatable-data > tr:hover[b-mqjc1sojz8] {
    background: var(--rz-primary-lighter, #e8f0fe) !important;
}

.clients-grid .rz-datatable-data > tr:hover .clients-row-name[b-mqjc1sojz8] {
    text-decoration: underline;
}

/* Arrow icon — hidden by default, slide in on row hover */
.clients-grid .rz-datatable-data > tr .clients-row-arrow[b-mqjc1sojz8] {
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.clients-grid .rz-datatable-data > tr:hover .clients-row-arrow[b-mqjc1sojz8] {
    opacity: 1 !important;
    transform: translateX(0);
}

/* Action buttons μέσα στο clickable row — να φαίνονται κανονικά */
.clients-grid .grid-action-btn[b-mqjc1sojz8] {
    position: relative;
    z-index: 1;
}