/* 👁️ ViewSwitcher — admin perspective chooser
   Shown only to admins. Non-admins never see the widget; body class
   `view-as-senior` is applied for them too so CSS scoping works. */

#view-switcher-slot {
    display: inline-flex;
    align-items: center;
    margin-right: 12px;
}

.vs-widget {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    background: rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(8px);
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.vs-prefix {
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    padding: 0 10px 0 14px;
    letter-spacing: 0.2px;
}

.vs-btn {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.85);
    padding: 6px 12px;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.84rem;
    font-weight: 600;
    transition: background 0.18s, color 0.18s;
    line-height: 1.2;
    min-height: 32px;
}
.vs-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}
.vs-btn.vs-active {
    background: #fff;
    color: #1a4a44;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.vs-icon { font-size: 1rem; line-height: 1; }
.vs-label { font-size: 0.84rem; }

/* ===========================================================
   VIEW-MODE SCOPING — hide admin-only items when Senior/Family
   =========================================================== */

/* Admin button in sidebar: only admin view shows it */
body.view-as-senior #btn-admin,
body.view-as-family #btn-admin {
    display: none !important;
}

/* Caregiver module button: hidden in Senior view, shown in Family view */
body.view-as-senior #btn-caregiver {
    display: none !important;
}

/* Role-scoped utility classes (use in new features) */
body.view-as-senior .admin-only,
body.view-as-family .admin-only {
    display: none !important;
}
body.view-as-senior .family-only {
    display: none !important;
}
body:not(.view-as-family) .family-only-emphasized {
    /* not emphasized in other views — still visible */
}

/* Visual breadcrumb at very top when admin is view-switched away from Admin */
body.view-as-senior::before,
body.view-as-family::before {
    content: '👁️ Pohled: ' attr(data-view-label);
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--radim-primary) 0%, var(--radim-primary-deep) 100%);
    color: #fff;
    padding: 3px 14px 3px 16px;
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: 0 0 10px 10px;
    letter-spacing: 0.3px;
    z-index: 9999;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    pointer-events: none;
}
body.view-as-senior::before { content: '👴 Pohled: Senior'; }
body.view-as-family::before { content: '👨‍👩‍👧 Pohled: Rodina'; }

/* Responsive — on mobile, collapse to icons only */
@media (max-width: 720px) {
    .vs-prefix { display: none; }
    .vs-label { display: none; }
    .vs-btn { padding: 6px 10px; }
}

@media (max-width: 420px) {
    #view-switcher-slot { margin-right: 6px; }
    .vs-widget { padding: 1px; }
    .vs-btn { padding: 5px 8px; }
    .vs-icon { font-size: 0.95rem; }
}