/* /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-right[b-gaa7b8rcfg]  { flex: 0 0 auto; min-width: 0; gap: 0.15rem; }

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

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

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

/* ═══════════════════════════════════════════
   ICON BUTTONS — circular
   ═══════════════════════════════════════════ */
.icon-btn[b-gaa7b8rcfg] {
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    flex-shrink: 0;
    transition: background 0.14s ease !important;
}

/* Radzen .rzi icons (sidebar toggle, logout, etc.) */
.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;
}

.icon-btn:hover[b-gaa7b8rcfg] {
    background: rgba(0, 0, 0, 0.07) !important;
    box-shadow: none !important;
    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;
    }

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

.icon-btn[b-gaa7b8rcfg]::after { display: none !important; }

/* ── Dark mode — icon buttons ── */
html[data-theme="dark"] .icon-btn .rzi[b-gaa7b8rcfg],
html[data-theme="dark"] .icon-btn .rz-button-icon[b-gaa7b8rcfg],
html[data-theme="dark"] .icon-btn span[class*="rzi"][b-gaa7b8rcfg] {
    color: rgba(255, 255, 255, 0.72) !important;
}

html[data-theme="dark"] .icon-btn:hover[b-gaa7b8rcfg] {
    background: rgba(255, 255, 255, 0.09) !important;
}

    html[data-theme="dark"] .icon-btn:hover .rzi[b-gaa7b8rcfg],
    html[data-theme="dark"] .icon-btn:hover .rz-button-icon[b-gaa7b8rcfg] {
        color: rgba(255, 255, 255, 0.95) !important;
    }

html[data-theme="dark"] .icon-btn:active[b-gaa7b8rcfg] {
    background: rgba(255, 255, 255, 0.14) !important;
}

/* ── Dark mode toggle: sun stays amber even on hover ── */
html[data-theme="dark"] .dm-toggle-btn--sun:hover .rzi[b-gaa7b8rcfg],
html[data-theme="dark"] .dm-toggle-btn--sun .rzi[b-gaa7b8rcfg] {
    color: #fbbf24 !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-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); }

html[data-theme="dark"] .user-info:hover[b-gaa7b8rcfg] { background: rgba(255,255,255,0.06) !important; }
html[data-theme="dark"] .user-name[b-gaa7b8rcfg]       { color: #e2e8f0 !important; }
html[data-theme="dark"] .user-role[b-gaa7b8rcfg]       { color: #64748b !important; }

/* ═══════════════════════════════════════════
   SIDEBAR CONTEXT LABEL
   ═══════════════════════════════════════════ */
.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
   ═══════════════════════════════════════════ */
.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;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease !important;
}

html[data-theme="dark"] .rz-header[b-gaa7b8rcfg] {
    background: #1a1d27 !important;
    color: #e2e8f0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
    box-shadow: 0 1px 10px rgba(0,0,0,0.4) !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;
}