/* ============================================================ VidariaGroupDrawer — slim slide-over multi-group switcher ------------------------------------------------------------ Portaled to . Scrim + fixed left panel, sticky navy header, live search, compact DrawerGroupRow + MinifiedOfficerCard list. Tokens from tokens.css. ============================================================ */ .vds-drawer-root { position: fixed; inset: 0; z-index: 1200; /* above app chrome, below modals (z-modal) */ pointer-events: none; /* closed: let clicks through */ } .vds-drawer-root.is-open { pointer-events: auto; } /* Scrim */ .vds-drawer-scrim { position: absolute; inset: 0; background: rgba(16, 50, 85, 0.34); opacity: 0; transition: opacity 0.22s ease; } .vds-drawer-root.is-open .vds-drawer-scrim { opacity: 1; } /* Panel — slim, slides in from the left */ .vds-drawer { position: absolute; top: 0; left: 0; height: 100%; width: 312px; max-width: 86vw; background: var(--gray-50, #f9fafb); box-shadow: var(--shadow-xl, 0 20px 40px rgba(16, 50, 85, 0.22)); display: flex; flex-direction: column; transform: translateX(-100%); transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1); outline: none; will-change: transform; } .vds-drawer-root.is-open .vds-drawer { transform: translateX(0); } /* ── Header (navy, sticky) ── */ .vds-drawer__header { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 14px 12px; background: linear-gradient(135deg, var(--vidaria-blue, #103255) 0%, var(--vidaria-blue-light, #1a4a7a) 100%); color: #fff; } .vds-drawer__titlewrap { display: flex; flex-direction: column; min-width: 0; } .vds-drawer__title { font-size: 15px; font-weight: 800; letter-spacing: 0.02em; } .vds-drawer__subtitle { font-size: 11px; color: rgba(255, 255, 255, 0.7); margin-top: 1px; } .vds-drawer__close { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--radius-md, 8px); border: none; background: rgba(255, 255, 255, 0.12); color: #fff; cursor: pointer; transition: background 0.14s ease; } .vds-drawer__close:hover { background: rgba(255, 255, 255, 0.22); } /* ── Search ── */ /* Flex layout: icon + input + clear are real flex children, so the icon can never overlap the placeholder/text (no absolute positioning). The bordered "field" wraps all three; the input itself is borderless. */ .vds-drawer__search { flex-shrink: 0; padding: 10px 12px; background: var(--white, #fff); border-bottom: 1px solid var(--gray-200, #e5e7eb); } .vds-drawer__search-field { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; border-radius: var(--radius-md, 8px); border: 1px solid var(--gray-300, #d1d5db); background: var(--gray-50, #f9fafb); transition: border-color 0.14s ease, box-shadow 0.14s ease, background 0.14s ease; } .vds-drawer__search-field:focus-within { border-color: var(--vidaria-blue, #103255); box-shadow: 0 0 0 3px var(--vidaria-blue-pale, #e8f0f8); background: #fff; } .vds-drawer__search-icon { flex-shrink: 0; color: var(--gray-400, #9ca3af); } /* High specificity + !important to beat the global `input[type="text"]` rule in Site.css (0,1,1) which would otherwise give the input its own border/background/padding (a box-in-a-box). The bordered "field" wrapper owns the chrome; the input must be fully transparent in every state. */ .vds-drawer__search-field input.vds-drawer__search-input, .vds-drawer__search-field input.vds-drawer__search-input:hover, .vds-drawer__search-field input.vds-drawer__search-input:focus { flex: 1; min-width: 0; width: auto; height: auto; margin: 0; border: none !important; background: transparent !important; box-shadow: none !important; outline: none !important; padding: 0 !important; font-size: 13px; color: var(--gray-900, #111827) !important; } .vds-drawer__search-field input.vds-drawer__search-input::placeholder { color: var(--gray-400, #9ca3af); } .vds-drawer__search-clear { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; border: none; background: var(--gray-200, #e5e7eb); color: var(--gray-600, #4b5563); cursor: pointer; } .vds-drawer__search-clear:hover { background: var(--gray-300, #d1d5db); } /* ── Body (scroll area) ── */ .vds-drawer__body { flex: 1; min-height: 0; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; } .vds-drawer__body .group-list, .vds-drawer__body .group-list--drawer { display: flex; flex-direction: column; gap: 8px; } /* All Groups Overview button */ .vds-drawer__all { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: var(--radius-md, 8px); border: 1px dashed var(--gray-300, #d1d5db); background: var(--white, #fff); cursor: pointer; text-align: left; transition: background 0.14s ease, border-color 0.14s ease; } .vds-drawer__all:hover { background: var(--vidaria-blue-tint, #f0f5fb); border-color: var(--vidaria-blue-pale, #e8f0f8); } .vds-drawer__all.is-active { background: var(--vidaria-blue-tint, #f0f5fb); border-style: solid; border-color: var(--vidaria-blue, #103255); } .vds-drawer__all-icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--radius-md, 8px); background: var(--vidaria-blue-pale, #e8f0f8); color: var(--vidaria-blue, #103255); } .vds-drawer__all-text { display: flex; flex-direction: column; min-width: 0; } .vds-drawer__all-title { font-size: 13px; font-weight: 700; color: var(--gray-900, #111827); } .vds-drawer__all-sub { font-size: 11px; color: var(--gray-500, #6b7280); } .vds-drawer__empty { padding: 24px 12px; text-align: center; font-size: 13px; color: var(--gray-500, #6b7280); } /* ============================================================ DrawerGroupRow — compact managed-group block ============================================================ */ .vds-drawer-group { background: var(--white, #fff); border: 1px solid var(--gray-200, #e5e7eb); border-left: 3px solid transparent; border-radius: var(--radius-md, 8px); overflow: hidden; } .vds-drawer-group.is-selected { border-left-color: var(--vidaria-blue, #103255); background: var(--vidaria-blue-tint, #f0f5fb); } .vds-drawer-group.is-inactive { opacity: 0.62; } .vds-drawer-group__header { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 10px; border: none; background: none; cursor: pointer; text-align: left; } .vds-drawer-group__header:hover { background: var(--gray-50, #f9fafb); } .vds-drawer-group.is-selected .vds-drawer-group__header:hover { background: transparent; } .vds-drawer-group__alert { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; } .vds-drawer-group__alert.is-ok { background: var(--success, #10b981); } .vds-drawer-group__alert.is-alert { background: var(--danger, #ef4444); box-shadow: 0 0 0 3px var(--danger-light, #fee2e2); } .vds-drawer-group__name { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; color: var(--gray-900, #111827); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vds-drawer-group__inactive { flex-shrink: 0; font-size: 8.5px; font-weight: 800; letter-spacing: 0.06em; color: var(--gray-500, #6b7280); background: var(--gray-100, #f3f4f6); padding: 1px 5px; border-radius: var(--radius-full, 999px); } .vds-drawer-group__count { flex-shrink: 0; font-size: 10.5px; font-weight: 600; color: var(--gray-400, #9ca3af); } .vds-drawer-group__count.is-live { color: var(--success-text, #065f46); background: var(--success-light, #d1fae5); padding: 2px 7px; border-radius: var(--radius-full, 999px); } .vds-drawer-group__officers { display: flex; flex-direction: column; gap: 4px; padding: 0 8px 8px; } .vds-drawer-group__more { align-self: flex-start; margin-top: 2px; padding: 3px 8px; font-size: 11px; font-weight: 600; color: var(--vidaria-blue, #103255); background: var(--vidaria-blue-pale, #e8f0f8); border: none; border-radius: var(--radius-full, 999px); cursor: pointer; } .vds-drawer-group__more:hover { background: var(--vidaria-blue-tint, #f0f5fb); } @media (prefers-reduced-motion: reduce) { .vds-drawer, .vds-drawer-scrim { transition: none; } }