/* JUCAT context inbox (bell counter, quick preview, full list). Identical file in Dash and Venues.
   Design reference: msg-notif v1.3.1 (#quick-preview, notification rows). Tokens map to each app's own
   theme variables (Dash --mk-*, Venues unprefixed), so dark (default) and light follow the shell.
   Cards/dropdown 6px, buttons 3px, 999px only for the counter pill and unread dot. Barlow 400/700 only.
   The :not(#ci-*) boosts beat the shells' !important id-boosted button rules (same technique as the shells). */
/* Placed in the shells' own top cascade layer 'staff-mockup' (Dash declares it first in staff-mockup-order.css, so its
   !important rules outrank every other layer); inside the layer the id-boosted selectors decide. In Venues the layer is
   new and still outranks the unlayered shell's !important declarations. */
@layer staff-mockup{
:root{--ci-accent:var(--mk-accent,var(--accent,#2FD69A));--ci-on-accent:var(--mk-on-accent,var(--on-accent,#062018));--ci-surface:var(--mk-surface,var(--surface,#0F222A));--ci-field:var(--mk-field,var(--field,#0B1C23));--ci-text:var(--mk-text,var(--text,#F3F6F5));--ci-muted:var(--mk-muted,var(--muted,#AEBDC1));--ci-line:var(--mk-line,var(--line,#21404A));--ci-hover:var(--mk-neutral-bg,var(--neutral-bg,#aebdc11a));--ci-negative:var(--mk-negative,var(--negative,#ffaaa3));--ci-shadow:var(--mk-shadow,var(--shadow,0 10px 36px #0004));--ci-soft:var(--mk-positive-bg,var(--positive-bg,#2fd69a1f));--ci-accent-text:var(--mk-positive,var(--positive,#7CEBC2))}

/* Bell: hidden until the inbox confirmed access (no access / MFA missing / error => never shown). */
:root:not([data-ctx-inbox=on]) :is([data-ctx-bell],.top-actions>[data-action=wf-notifications]):not(#ci-a):not(#ci-b){display:none!important}
:root [data-ctx-bell]:not(#ci-a):not(#ci-b){position:relative!important}
:root [data-ctx-bell][aria-expanded=true]:not(#ci-a):not(#ci-b){background:var(--ci-soft)!important;color:var(--ci-accent-text)!important}
:root [data-ctx-bell]:not(#ci-a):not(#ci-b) .ctx-badge{position:absolute!important;top:3px!important;right:1px!important;min-width:18px!important;height:18px!important;padding:0 5px!important;border-radius:999px!important;background:var(--ci-accent)!important;color:var(--ci-on-accent)!important;font:700 10px/18px Barlow,Arial,sans-serif!important;text-align:center!important;pointer-events:none!important;box-sizing:border-box!important;letter-spacing:0!important}
:root [data-ctx-bell]:not(#ci-a):not(#ci-b) .ctx-badge[hidden]{display:none!important}

/* Shared resets inside our components. */
:root :is(.ctx-quick,.ctx-list):not(#ci-a):not(#ci-b):not(#ci-c):not(#ci-d){font-family:Barlow,Arial,sans-serif!important;color:var(--ci-text)!important;box-sizing:border-box!important;letter-spacing:0!important}
:root :is(.ctx-quick,.ctx-list):not(#ci-a):not(#ci-b):not(#ci-c):not(#ci-d) *{box-sizing:border-box!important;font-family:inherit!important;letter-spacing:0!important}
:root :is(.ctx-quick,.ctx-list):not(#ci-a):not(#ci-b):not(#ci-c):not(#ci-d) button{font-family:Barlow,Arial,sans-serif!important;margin:0!important;box-shadow:none!important;text-transform:none!important;cursor:pointer!important}
:root :is(.ctx-quick,.ctx-list):not(#ci-a):not(#ci-b):not(#ci-c):not(#ci-d) button:disabled{cursor:not-allowed!important;opacity:.5!important}
:root :is(.ctx-quick,.ctx-list):not(#ci-a):not(#ci-b):not(#ci-c):not(#ci-d) :is(button,a):focus-visible{outline:2px solid var(--ci-accent)!important;outline-offset:-3px!important}
.ctx-svg{width:20px!important;height:20px!important;flex:none!important;display:block!important}

/* Row (quick + list) */
:root :is(.ctx-quick,.ctx-list):not(#ci-a):not(#ci-b):not(#ci-c):not(#ci-d) .ctx-row{display:flex!important;align-items:center!important;gap:10px!important;width:100%!important;min-height:44px!important;padding:13px 12px!important;margin:0!important;border:0!important;border-bottom:1px solid var(--ci-line)!important;border-radius:0!important;background:transparent!important;color:var(--ci-text)!important;text-align:left!important;font-size:14px!important;font-weight:400!important;line-height:1.35!important;white-space:normal!important;height:auto!important}
:root :is(.ctx-quick,.ctx-list):not(#ci-a):not(#ci-b):not(#ci-c):not(#ci-d) button.ctx-row:hover{background:var(--ci-hover)!important}
:root :is(.ctx-quick,.ctx-list):not(#ci-a):not(#ci-b):not(#ci-c):not(#ci-d) div.ctx-row{cursor:default!important}
:root :is(.ctx-quick,.ctx-list):not(#ci-a):not(#ci-b):not(#ci-c):not(#ci-d) .ctx-ico{color:var(--ci-muted)!important;flex:none!important;display:grid!important;place-items:center!important}
:root :is(.ctx-quick,.ctx-list):not(#ci-a):not(#ci-b):not(#ci-c):not(#ci-d) .ctx-copy{flex:1 1 auto!important;min-width:0!important;display:block!important}
:root :is(.ctx-quick,.ctx-list):not(#ci-a):not(#ci-b):not(#ci-c):not(#ci-d) .ctx-title{display:block!important;font-weight:400!important;overflow-wrap:anywhere!important;color:var(--ci-text)!important}
:root :is(.ctx-quick,.ctx-list):not(#ci-a):not(#ci-b):not(#ci-c):not(#ci-d) .ctx-row.is-unread .ctx-title{font-weight:700!important}
:root :is(.ctx-quick,.ctx-list):not(#ci-a):not(#ci-b):not(#ci-c):not(#ci-d) .ctx-time{display:block!important;margin-top:3px!important;font-size:12px!important;font-weight:400!important;color:var(--ci-muted)!important}
:root :is(.ctx-quick,.ctx-list):not(#ci-a):not(#ci-b):not(#ci-c):not(#ci-d) .ctx-dot{width:7px!important;height:7px!important;border-radius:999px!important;background:var(--ci-accent)!important;flex:none!important;display:block!important}
:root :is(.ctx-quick,.ctx-list):not(#ci-a):not(#ci-b):not(#ci-c):not(#ci-d) .ctx-empty{margin:0!important;padding:18px 12px!important;color:var(--ci-muted)!important;font-size:14px!important}
:root :is(.ctx-quick,.ctx-list):not(#ci-a):not(#ci-b):not(#ci-c):not(#ci-d) .ctx-error{padding:16px 12px!important;display:flex!important;flex-wrap:wrap!important;gap:10px!important;align-items:center!important}
:root :is(.ctx-quick,.ctx-list):not(#ci-a):not(#ci-b):not(#ci-c):not(#ci-d) :is(.ctx-error p,.ctx-inline-error){margin:0!important;color:var(--ci-negative)!important;font-size:14px!important;flex:1 1 180px!important}
:root :is(.ctx-quick,.ctx-list):not(#ci-a):not(#ci-b):not(#ci-c):not(#ci-d) .ctx-btn{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:36px!important;height:auto!important;padding:7px 14px!important;border:1px solid var(--ci-line)!important;border-radius:3px!important;background:var(--ci-field)!important;color:var(--ci-text)!important;font-size:14px!important;font-weight:700!important;line-height:1.2!important;white-space:nowrap!important;width:auto!important}
:root :is(.ctx-quick,.ctx-list):not(#ci-a):not(#ci-b):not(#ci-c):not(#ci-d) .ctx-btn:hover:not(:disabled){background:var(--ci-hover)!important}

/* Quick preview: dropdown anchored under the bell on all viewports (360px, <=760px: viewport minus 16px gutters). Position/width set from JS. */
:root .ctx-quick:not(#ci-a):not(#ci-b):not(#ci-c):not(#ci-d){position:fixed!important;z-index:1200!important;max-width:calc(100vw - 16px)!important;display:flex!important;flex-direction:column!important;background:var(--ci-surface)!important;border:1px solid var(--ci-line)!important;border-radius:6px!important;box-shadow:var(--ci-shadow)!important;overflow:hidden!important;outline:none!important;margin:0!important;padding:0!important}
:root .ctx-quick:not(#ci-a):not(#ci-b):not(#ci-c):not(#ci-d) .ctx-quick-head{display:flex!important;align-items:center!important;gap:8px!important;padding:12px 12px!important;border-bottom:1px solid var(--ci-line)!important;flex:none!important;background:transparent!important;position:static!important;height:auto!important;min-height:0!important}
:root .ctx-quick:not(#ci-a):not(#ci-b):not(#ci-c):not(#ci-d) h2{margin:0!important;font-size:16px!important;font-weight:700!important;line-height:1.25!important;color:var(--ci-text)!important}
:root .ctx-quick:not(#ci-a):not(#ci-b):not(#ci-c):not(#ci-d) .ctx-count{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-width:18px!important;height:18px!important;padding:0 5px!important;border-radius:999px!important;background:var(--ci-accent)!important;color:var(--ci-on-accent)!important;font-size:10px!important;font-weight:700!important;line-height:18px!important}
:root .ctx-quick:not(#ci-a):not(#ci-b):not(#ci-c):not(#ci-d) .ctx-mark{margin-left:auto!important;min-height:36px!important;height:auto!important;padding:6px 8px!important;border:0!important;border-radius:3px!important;background:transparent!important;color:var(--ci-text)!important;font-size:12px!important;font-weight:700!important;white-space:nowrap!important;width:auto!important}
:root .ctx-quick:not(#ci-a):not(#ci-b):not(#ci-c):not(#ci-d) .ctx-mark:hover:not(:disabled){background:var(--ci-hover)!important}
:root .ctx-quick:not(#ci-a):not(#ci-b):not(#ci-c):not(#ci-d) .ctx-scroll{overflow-y:auto!important;min-height:0!important;flex:1 1 auto!important;overscroll-behavior:contain!important}
:root .ctx-quick:not(#ci-a):not(#ci-b):not(#ci-c):not(#ci-d) .ctx-footer{display:block!important;width:100%!important;min-height:44px!important;height:auto!important;padding:13px!important;border:0!important;border-top:1px solid var(--ci-line)!important;border-radius:0!important;background:transparent!important;color:var(--ci-text)!important;font-size:13px!important;font-weight:400!important;text-align:center!important;flex:none!important}
:root .ctx-quick:not(#ci-a):not(#ci-b):not(#ci-c):not(#ci-d) .ctx-footer:hover{background:var(--ci-hover)!important}
:root .ctx-quick:not(#ci-a):not(#ci-b):not(#ci-c):not(#ci-d) .ctx-scroll .ctx-row:last-child{border-bottom:0!important}

/* Full list */
:root .ctx-list:not(#ci-a):not(#ci-b):not(#ci-c):not(#ci-d){display:block!important;max-width:850px!important;min-width:0!important;background:var(--ci-surface)!important;border:1px solid var(--ci-line)!important;border-radius:6px!important;overflow:hidden!important;margin:0!important}
:root .ctx-list:not(#ci-a):not(#ci-b):not(#ci-c):not(#ci-d) .ctx-toolbar{display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:10px!important;padding:14px 16px!important;border-bottom:1px solid var(--ci-line)!important}
:root .ctx-list:not(#ci-a):not(#ci-b):not(#ci-c):not(#ci-d) .ctx-chips{display:flex!important;gap:6px!important;flex:1 1 auto!important;min-width:0!important;overflow-x:auto!important;overflow-y:hidden!important;padding:0!important;margin:0!important;scrollbar-width:thin!important}
:root .ctx-list:not(#ci-a):not(#ci-b):not(#ci-c):not(#ci-d) .ctx-chip{flex:none!important;min-height:36px!important;height:auto!important;padding:6px 13px!important;border:1px solid var(--ci-line)!important;border-radius:3px!important;background:var(--ci-field)!important;color:var(--ci-text)!important;font-size:14px!important;font-weight:400!important;white-space:nowrap!important;width:auto!important}
:root .ctx-list:not(#ci-a):not(#ci-b):not(#ci-c):not(#ci-d) .ctx-chip[aria-pressed=true]{background:var(--ci-accent)!important;border-color:var(--ci-accent)!important;color:var(--ci-on-accent)!important;font-weight:700!important}
:root .ctx-list:not(#ci-a):not(#ci-b):not(#ci-c):not(#ci-d) .ctx-mark-all{margin-left:auto!important}
:root .ctx-list:not(#ci-a):not(#ci-b):not(#ci-c):not(#ci-d) .ctx-notice{margin:0!important;padding:0 16px!important;font-size:13px!important;color:var(--ci-muted)!important}
:root .ctx-list:not(#ci-a):not(#ci-b):not(#ci-c):not(#ci-d) .ctx-notice:not(:empty){padding:10px 16px 0!important}
:root .ctx-list:not(#ci-a):not(#ci-b):not(#ci-c):not(#ci-d) .ctx-body{padding:0 16px 8px!important}
:root .ctx-list:not(#ci-a):not(#ci-b):not(#ci-c):not(#ci-d) .ctx-group{margin:16px 0 2px!important;font-size:13px!important;font-weight:700!important;color:var(--ci-muted)!important;line-height:1.3!important;text-transform:none!important}
:root .ctx-list:not(#ci-a):not(#ci-b):not(#ci-c):not(#ci-d) .ctx-row{padding:12px 0!important;gap:12px!important}
:root .ctx-list:not(#ci-a):not(#ci-b):not(#ci-c):not(#ci-d) button.ctx-row:hover{background:transparent!important}
@media(hover:hover){:root .ctx-list:not(#ci-a):not(#ci-b):not(#ci-c):not(#ci-d) button.ctx-row:hover .ctx-title{text-decoration:underline!important;text-underline-offset:3px!important}}
:root .ctx-list:not(#ci-a):not(#ci-b):not(#ci-c):not(#ci-d) .ctx-body>.ctx-row:last-child{border-bottom:0!important}
:root .ctx-list:not(#ci-a):not(#ci-b):not(#ci-c):not(#ci-d) .ctx-ico-tile{width:34px!important;height:34px!important;border-radius:6px!important;background:var(--ci-field)!important}
:root .ctx-list:not(#ci-a):not(#ci-b):not(#ci-c):not(#ci-d) .ctx-ico-tile .ctx-svg{width:18px!important;height:18px!important}
:root .ctx-list:not(#ci-a):not(#ci-b):not(#ci-c):not(#ci-d) .ctx-empty{padding:18px 0!important}
:root .ctx-list:not(#ci-a):not(#ci-b):not(#ci-c):not(#ci-d) .ctx-error{padding:16px 0!important}
:root .ctx-list:not(#ci-a):not(#ci-b):not(#ci-c):not(#ci-d) .ctx-more-wrap{display:flex!important;flex-direction:column!important;align-items:center!important;gap:8px!important;padding:4px 16px 16px!important}

/* Dash notifications page: inbox tab + (managers) existing rules/catalog tab, rendered by ctx-inbox-dash.js. */
:root .ctx-page:not(#ci-a):not(#ci-b){display:block!important;min-width:0!important}
:root .ctx-page:not(#ci-a):not(#ci-b) .ctx-tabs[hidden]{display:none!important}
:root .ctx-page:not(#ci-a):not(#ci-b) .ctx-tabs{display:flex!important;gap:6px!important;margin:14px 0 16px!important;overflow-x:auto!important;min-width:0!important}
:root .ctx-page:not(#ci-a):not(#ci-b):not(#ci-c):not(#ci-d) .ctx-tab{flex:none!important;min-height:36px!important;height:auto!important;padding:7px 13px!important;border:1px solid var(--ci-line)!important;border-radius:3px!important;background:var(--ci-field)!important;color:var(--ci-text)!important;font:700 14px/1.2 Barlow,Arial,sans-serif!important;margin:0!important;box-shadow:none!important;width:auto!important}
:root .ctx-page:not(#ci-a):not(#ci-b):not(#ci-c):not(#ci-d) .ctx-tab[aria-selected=true]{background:var(--ci-accent)!important;border-color:var(--ci-accent)!important;color:var(--ci-on-accent)!important}
:root #workspace[data-ctx-tab=inbox]:not(#ci-a) > :not(.ctx-page){display:none!important}
:root #workspace[data-ctx-tab=rules]:not(#ci-a) > .ctx-page .ctx-page-body{display:none!important}
:root #workspace[data-ctx-tab=rules]:not(#ci-a) > .push-admin > .page-header > :is(h1,.mk-title-copy,.mk-title-copy-inner){display:none!important}

@media(max-width:760px){
 :root :is(.ctx-quick,.ctx-list,.ctx-page):not(#ci-a):not(#ci-b):not(#ci-c):not(#ci-d) :is(.ctx-mark,.ctx-btn,.ctx-chip,.ctx-tab){min-height:44px!important}
 :root .ctx-quick:not(#ci-a):not(#ci-b):not(#ci-c):not(#ci-d) .ctx-quick-head{padding:8px 10px!important}
 :root .ctx-quick:not(#ci-a):not(#ci-b):not(#ci-c):not(#ci-d) .ctx-row{padding:13px 10px!important}
 :root .ctx-list:not(#ci-a):not(#ci-b):not(#ci-c):not(#ci-d) .ctx-toolbar{padding:12px!important}
 :root .ctx-list:not(#ci-a):not(#ci-b):not(#ci-c):not(#ci-d) .ctx-body{padding:0 12px 8px!important}
 :root .ctx-list:not(#ci-a):not(#ci-b):not(#ci-c):not(#ci-d) .ctx-mark-all{margin-left:0!important}
}
/* Venues phones: the bell adds one 44px control to a top bar that was already full at 360px. The two-button EN/RO
   switch shows only the language you can switch to (still a 44px target), so nothing overflows. */
@media(max-width:420px){
 :root[data-ctx-inbox=on] body[data-release=venues] .topbar>.language-switch>button[aria-pressed=true]:not(#ci-a):not(#ci-b){display:none!important}
}
}