/* Shared components for the prototype's people, permissions and meeting lifecycle. */
.prototype-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; padding: 12px 16px; margin-bottom: 24px; border: 1px solid var(--brand-border); border-radius: 12px; background: var(--brand-soft); font-size: 11px; color: var(--muted); }
.prototype-label { font-size: 9px; font-weight: 750; letter-spacing: 1px; color: var(--brand-text); }
.prototype-toolbar label { display: flex; gap: 8px; align-items: center; }
.prototype-toolbar select { border: 1px solid var(--brand-border); border-radius: 7px; background: white; padding: 7px; max-width: 210px; color: var(--ink); font-size: 11px; }
.prototype-toolbar .text-action { padding: 4px; font-size: 11px; }
.notification-trigger { position: relative; display: inline-flex; align-items: center; gap: 7px; }
.notification-trigger b { display: grid; place-items: center; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 20px; color: #fff; background: #b13954; font-size: 10px; }
.workflow-page-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 24px; }
.workflow-page-heading p { color: var(--muted); font-size: 13px; line-height: 1.8; margin: 0; }
.workflow-page-heading button { flex-shrink: 0; }
.workflow-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-bottom: 22px; }
.workflow-stats > div { padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.workflow-stats span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 12px; }
.workflow-stats strong { font-size: 28px; }
.workflow-card { background: white; border: 1px solid var(--line); border-radius: 16px; padding: 22px; }
.workflow-filters { display: flex; gap: 10px; margin-bottom: 18px; }
.workflow-filters input { flex: 1; min-width: 0; }
.workflow-filters input, .workflow-filters select, .workflow-table input { padding: 10px 12px; background: #fafafe; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); font-size: 12px; }
.workflow-table-scroll { overflow-x: auto; }
.workflow-table { border-collapse: collapse; width: 100%; min-width: 610px; font-size: 12px; text-align: left; }
.workflow-table th { color: var(--muted); font-size: 11px; font-weight: 550; background: #fafafe; }
.workflow-table td, .workflow-table th { padding: 15px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.workflow-table small { display: block; margin-top: 6px; color: var(--muted); font-size: 10px; }
.workflow-table input[type=number] { width: 70px; }
.workflow-table input:not([type=checkbox]):not([type=number]) { width: 100%; min-width: 130px; }
.workflow-pill { display: inline-block; border-radius: 6px; padding: 5px 8px; background: var(--brand-soft); color: var(--brand-text); font-size: 10px; }
.workflow-pill.active { background: #eaf5f0; color: #236c53; }.workflow-pill.inactive { background: #f4eeee; color: #845b5b; }
.workflow-footnote, .workflow-empty p { color: var(--muted); line-height: 1.8; font-size: 11px; }
.workflow-empty { padding: 38px 20px; text-align: center; color: var(--muted); font-size: 13px; }
.role-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(245px,1fr)); gap: 18px; margin-bottom: 22px; }
.role-card h2 { font-size: 20px; margin: 18px 0 10px; }.role-card p { color: var(--muted); font-size: 12px; line-height: 1.8; min-height: 44px; }
.role-card > div:last-child { display: flex; gap: 12px; flex-wrap: wrap; }
.role-metrics { display: flex; gap: 18px; font-size: 11px; color: var(--muted); padding: 16px 0; margin-bottom: 10px; border-top: 1px solid var(--line); }
.permission-explainer h3 { margin: 0 0 12px; font-size: 15px; }.permission-explainer p { color: var(--muted); font-size: 12px; line-height: 1.9; margin: 8px 0; }
.workflow-dialog { width: min(580px,calc(100% - 32px)); max-height: calc(100dvh - 40px); padding: 26px; border: 1px solid var(--line); border-radius: 20px; color: var(--ink); box-shadow: 0 25px 100px #24233b30; }
.workflow-dialog.wide { width: min(880px,calc(100% - 32px)); }
.workflow-dialog::backdrop, .notification-drawer::backdrop { background: #24233b55; backdrop-filter: blur(3px); }
.workflow-modal-head { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 24px; align-items: flex-start; }
.workflow-modal-head .eyebrow { font-size: 9px; letter-spacing: 1.6px; color: var(--brand-text); margin: 0 0 8px; }.workflow-modal-head h2 { margin: 0; font-size: 23px; }
.workflow-dialog form > label, .workflow-form-grid > label { display: grid; gap: 8px; margin-bottom: 18px; font-size: 12px; font-weight: 600; }
.workflow-dialog :is(input:not([type=checkbox]),select) { width: 100%; min-width: 0; padding: 11px 12px; background: #fafafe; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); font-size: 13px; }
.workflow-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.workflow-form-footer { display: flex; justify-content: flex-end; gap: 10px; padding-top: 18px; border-top: 1px solid var(--line); margin-top: 22px; }
.workflow-error { color: #a4433b; font-size: 12px; line-height: 1.8; }.workflow-error:empty { display: none; }
.permission-matrix { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.permission-matrix section { display: grid; grid-template-columns: 190px 1fr; border-bottom: 1px solid var(--line); }.permission-matrix section:last-child { border-bottom: 0; }
.permission-matrix label { display: flex; align-items: center; gap: 8px; font-size: 12px; cursor: pointer; line-height: 1.8; }
.permission-menu { background: #fafafe; padding: 15px; }.permission-menu small { font-size: 10px; color: var(--muted); }
.permission-matrix section > div { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; padding: 15px; }.permission-matrix small { font-size: 10px; color: var(--muted); }
.permission-matrix input, .workflow-table input[type=checkbox], .attendee-field input[type=checkbox] { accent-color: var(--brand-text); width: 16px; height: 16px; flex-shrink: 0; }
.attendee-field { padding:0;border:0;margin:22px 0;min-width:0; }
.attendee-field legend { font-size:13px;font-weight:650;margin-bottom:10px; }
.attendee-optional { color:var(--muted);font-size:11px;font-weight:400;margin-left:6px; }
.attendee-toggle { width:100%;display:flex;align-items:center;gap:10px;padding:13px 14px;border:1px solid var(--line);border-radius:11px;background:#fafafe;color:var(--ink);font:inherit;font-size:12px;cursor:pointer;text-align:left; }
.attendee-toggle:hover,.attendee-toggle[aria-expanded=true] { border-color:var(--brand-border);background:var(--brand-soft); }
.attendee-toggle-count { margin-left:auto;color:var(--muted);font-size:11px;white-space:nowrap; }
.attendee-chevron { color:var(--muted);transition:transform .15s; }.attendee-toggle[aria-expanded=true] .attendee-chevron { transform:rotate(180deg); }
.attendee-selected { display:flex;gap:7px;flex-wrap:wrap;margin-top:10px; }.attendee-selected:empty { display:none; }
.attendee-chip { display:inline-flex;align-items:center;gap:7px;max-width:150px;padding:5px 7px 5px 10px;border:1px solid var(--brand-border);border-radius:8px;background:var(--brand-soft);color:var(--brand-text);font-size:11px; }
.attendee-chip>span { white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }.attendee-chip button { width:22px;height:22px;flex-shrink:0;border:0;background:transparent;border-radius:5px;color:inherit;font-size:16px;cursor:pointer; }
.attendee-chip button:hover { background:var(--brand-border); }.attendee-more { border:1px solid var(--line);border-radius:8px;background:white;padding:7px 10px;color:var(--brand-text);font-size:11px;cursor:pointer; }
.attendee-picker { margin-top:12px;border:1px solid var(--brand-border);border-radius:13px;background:white;overflow:hidden; }.attendee-picker[hidden] { display:none; }
.attendee-picker-tools { padding:15px 15px 10px;background:#fafafe;border-bottom:1px solid var(--line); }.attendee-picker-tools h3 { margin:0 0 12px;font-size:13px;font-weight:650; }
.attendee-search-label { display:block; }#attendee-search { width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:9px;background:white;color:var(--ink);font-size:12px; }
.attendee-filter-row { display:flex;align-items:center;gap:12px;margin-top:10px; }.attendee-filter-row select { flex:1;min-width:0;max-width:64%;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:white;color:var(--ink);font-size:11px; }
.attendee-only-selected { display:flex;align-items:center;gap:6px;white-space:nowrap;font-size:11px;color:var(--muted);cursor:pointer; }
.attendee-results-count { font-size:10px;color:var(--muted);margin:10px 0 0; }
#booking-attendees { display:grid;grid-template-columns:1fr;gap:5px;max-height:276px;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;scrollbar-gutter:stable;padding:10px;scrollbar-width:thin;scrollbar-color:var(--brand-border) transparent; }
#booking-attendees::-webkit-scrollbar { width:6px; }#booking-attendees::-webkit-scrollbar-thumb { border-radius:8px;background:var(--brand-border); }
#booking-attendees label { display:flex;align-items:center;gap:10px;padding:11px;border:1px solid transparent;border-radius:9px;cursor:pointer;min-width:0; }
#booking-attendees label:hover { background:#fafafe; }#booking-attendees label:has(input:checked) { background:var(--brand-soft);border-color:var(--brand-border); }
.attendee-person-copy { flex:1;min-width:0; }#booking-attendees strong { display:block;font-size:12px; }#booking-attendees small { display:block;color:var(--muted);font-size:10px;margin-top:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
#booking-attendees em { display:inline-block;margin-left:7px;font-size:10px;font-style:normal;color:#966214; }
.attendee-empty { display:grid;gap:8px;padding:28px 12px;text-align:center; }.attendee-empty strong { font-size:12px; }.attendee-empty span { font-size:11px;color:var(--muted);line-height:1.8; }
.attendee-picker-footer { display:flex;gap:10px;align-items:center;padding:12px 15px;border-top:1px solid var(--line); }.attendee-picker-footer>span { color:var(--muted);font-size:11px;margin-right:auto; }.attendee-picker-footer .text-action { font-size:11px; }.attendee-picker-footer .primary-button { padding:9px 13px;font-size:11px; }.attendee-picker-footer button:disabled { opacity:.45;cursor:default; }
#attendee-summary { font-size:11px;color:var(--muted);line-height:1.8;margin:10px 0 0; }
.attendee-field button:focus-visible,.attendee-field select:focus-visible { outline:2px solid var(--brand-text);outline-offset:2px; }
@media(max-width:680px) {
 .attendee-toggle { min-height:46px; }.attendee-picker-tools { padding:12px; }#booking-attendees { max-height:240px;padding:7px; }#booking-attendees label { min-height:58px;padding:10px; }
 .attendee-chip { max-width:145px;min-height:40px;padding:3px 5px 3px 9px; }.attendee-chip button { width:32px;height:32px; }.attendee-more { min-height:40px; }
 .attendee-picker-footer { gap:8px;padding:10px; }.attendee-picker-footer .primary-button { min-height:42px; }.attendee-picker-footer .text-action { min-height:42px;padding:0 5px; }
 .attendee-filter-row select { min-height:42px; }#attendee-search { font-size:14px; }
}
.employee-avatar { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--brand-soft); color: var(--brand-text); font-size: 10px; flex-shrink: 0; }
.invitation-actions { flex: 1 0 100%; display: flex; align-items: center; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); flex-wrap: wrap; }.invitation-actions > span { flex: 1; min-width: 110px; color: var(--muted); font-size: 12px; }
#event-actions { flex-wrap: wrap; }
.notification-drawer { position: fixed; inset: 0 0 0 auto; margin: 0; height: 100dvh; max-height: 100dvh; width: min(460px,100%); max-width: 100%; padding: 28px; border: 0; border-left: 1px solid var(--line); color: var(--ink); box-shadow: -10px 0 60px #24233b15; }
.notice-toolbar { display: flex; align-items: center; gap: 6px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }.notice-toolbar > button { border: 0; background: transparent; padding: 8px 12px; color: var(--muted); border-radius: 7px; font-size: 12px; }.notice-toolbar > .active { color: var(--brand-text); background: var(--brand-soft); }.notice-toolbar .text-action { margin-left: auto; font-size: 11px; padding-right: 0; }
.notice-item { position: relative; padding: 22px 0 22px 12px; border-bottom: 1px solid var(--line); }.notice-item.unread::before { content: ''; position: absolute; top: 25px; left: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--brand-primary); }
.notice-type { display: flex; justify-content: space-between; gap: 12px; font-size: 10px; color: var(--muted); }.notice-type > span { color: var(--brand-text); font-weight: 650; }.notice-item h3 { font-size: 15px; line-height: 1.6; margin: 10px 0 7px; }.notice-item p, .notice-record p { font-size: 12px; color: var(--muted); line-height: 1.8; margin: 5px 0; }.notice-item button { padding: 5px 0 0; font-size: 11px; }
.scan-room-label { display: grid; gap: 8px; font-size: 11px; color: var(--muted); margin: 15px 0; }.scan-room-label select { width: 100%; padding: 9px; border: 1px solid var(--line); border-radius: 8px; background: white; font-size: 12px; }
.clock-demo-note { font-size: 12px; line-height: 1.8; color: var(--muted); background: var(--brand-soft); border-radius: 10px; padding: 14px; }.clock-quick { display: flex; gap: 8px; margin: 18px 0 22px; flex-wrap: wrap; }.clock-quick button { flex: 1; font-size: 12px; }
.released-bookings { margin-top: 24px; }.released-bookings h3 { font-size: 15px; margin: 0 0 14px; }.released-bookings > div { display: grid; gap: 6px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 12px; }.released-bookings span, .released-bookings small { font-size: 11px; color: var(--muted); }
.sidebar .primary-nav { display: flex; flex-direction: column; }.admin-nav-label { display: none; }.sidebar .nav-item > span[aria-hidden] { width: 20px; text-align: center; font-size: 20px; }
@media(max-width:680px) {
  .prototype-toolbar { gap: 8px; padding: 10px; }.prototype-toolbar > span:last-child { display: none; }.prototype-toolbar select { max-width: 170px; }
  .topbar-actions { gap: 8px; }.notification-trigger { padding: 8px; }.notification-trigger > span { display: none; }
  .workflow-page-heading { align-items: flex-start; flex-direction: column; gap: 12px; }.workflow-stats { gap: 8px; }.workflow-stats > div { padding: 15px; }.workflow-stats strong { font-size: 23px; }
  .workflow-card { padding: 16px; }.workflow-dialog, .notification-drawer { padding: 22px 18px; }.workflow-form-grid { grid-template-columns: 1fr; gap: 0; }
  .permission-matrix section { grid-template-columns: 1fr; }.permission-menu { padding: 12px; }.permission-matrix section > div { padding: 12px; }
  .sidebar .primary-nav { display: flex; flex-direction: row; }.sidebar .nav-item { flex: 1; }.sidebar .nav-item[data-view^=admin-] { display: none; }.mobile-admin-toggle { order: 100; flex: 1; }
}
.notification-trigger svg { width: 17px; height: 17px; }
.role-summary { display: grid; gap: 12px; margin-top: 18px; }.role-summary > div { display: grid; gap: 5px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 13px; }.role-summary span { font-size: 11px; color: var(--muted); }
.workflow-dialog input:focus-visible, .workflow-dialog select:focus-visible, .workflow-table input:focus-visible, .attendee-field input:focus-visible { outline: 2px solid var(--brand-text); outline-offset: 3px; }
.notice-item:is(.type-cancelled,.type-released,.type-warning) .notice-type > span { color: #a33e4c; }
.notice-item:is(.type-cancelled,.type-released,.type-warning).unread::before { background: #a33e4c; }
.demo-itinerary { display: grid; margin: 18px 0; }
.demo-itinerary > div { display: grid; grid-template-columns: 102px 1fr; gap: 6px 12px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.demo-itinerary time { color: var(--brand-text); grid-row: span 2; }
.demo-itinerary small { font-size: 11px; color: var(--muted); }
.attendee-search-label > .sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }

#view-admin-roles .role-actions { gap:6px; }
.permission-levels { margin:0;padding-left:22px;color:var(--muted);font-size:12px;line-height:1.9; }
.permission-levels li { padding:5px 0 5px 4px; }
.permission-levels strong { color:var(--ink);margin-right:10px; }
.permission-levels span { overflow-wrap:anywhere; }