/* CF-DEC-018 — reversible CFlow Staging enhancement on original approved UI only. */
.topbar-user.stg-header-enabled > .user-chip,
.topbar-user.stg-header-enabled > .language-toggle,
.topbar-user.stg-header-enabled > button.secondary-button { display: none !important; }
.stg-header { position:relative; display:flex; align-items:center; gap:12px; flex-wrap:wrap; direction:ltr; }
.stg-header :is(button,input,select) { font:inherit; }
.stg-anchor { position:relative; direction:inherit; }
.stg-language-switch { display:inline-flex; flex-direction:row; align-items:center;
  border:1px solid #d7e1ee; background:#f1f4fb; padding:3px; gap:2px;
  border-radius:999px; cursor:pointer; min-height:38px; min-width:112px;
  box-shadow:0 1px 4px rgba(12,32,60,.04); transition:background .15s; }
.stg-language-switch span { flex:1; font-size:12px; text-align:center; padding:7px 10px;
  line-height:17px; font-weight:650; color:#52637a; border-radius:999px; }
.stg-language-switch span.selected { background:#5743a7; color:white; box-shadow:0 1px 4px #0002; }
.stg-language-switch:hover { border-color:#6854bd; }
.stg-bell { position:relative; display:grid; place-items:center; border:1px solid #d7e1ee;
  background:#fff; border-radius:11px; font-size:17px; width:40px; height:40px; }
.stg-bell:hover,.stg-account-button:hover { background:#f3f0ff; border-color:#af9de0; }
.stg-count { position:absolute; inset-block-start:-7px; inset-inline-end:-7px;
  border-radius:999px; min-width:19px; padding:2px 5px; background:#e64466;
  color:#fff; font-size:10px; line-height:16px; font-weight:800; text-align:center; }
.stg-count[hidden] {display:none;}
.stg-account-button {display:flex; align-items:center; min-width:152px; max-width:270px;
  gap:9px; border-radius:11px; padding:5px 9px 5px 6px; color:#213451;
  background:white; border:1px solid #d7e1ee; text-align:left; min-height:42px; }
.stg-avatar { display:grid; place-items:center; background:linear-gradient(135deg,#6346b4,#2378b4);
  color:white; font-weight:750; border-radius:10px; min-width:32px; height:32px; font-size:14px; }
.stg-account-info {display:grid; min-width:0; gap:2px;}
.stg-account-info strong { font-size:12px; white-space:nowrap; text-overflow:ellipsis;
  overflow:hidden; max-width:158px; line-height:15px; }
.stg-account-info small {font-size:10px; color:#64758b; white-space:nowrap; max-width:158px;
  text-overflow:ellipsis; overflow:hidden;}
.stg-caret {margin-left:auto; font-size:16px; color:#687790; }
.stg-popover { position:absolute; z-index:1050; top:calc(100% + 11px); right:0;
  border:1px solid #dce2ef; box-shadow:0 17px 40px #13264630; background:white;
  border-radius:14px; min-width:255px; padding:7px; color:#17334d; direction:inherit; }
.stg-popover[hidden] {display:none;}
.stg-account-popover .stg-menu-item { border:0; background:transparent; text-align:left;
  width:100%; display:flex; align-items:center; gap:10px; border-radius:8px;
  padding:10px; color:#253e5e; font-size:13px; font-weight:550; }
.stg-account-popover .stg-menu-item:hover,.stg-menu-item:focus-visible {background:#f0eeff;}
.stg-menu-icon {display:inline-grid;place-items:center; min-width:25px;height:25px;
  border-radius:7px; background:#f0edfa; color:#5842a9;font-size:13px;}
.stg-bell-popover { width:min(365px,calc(100vw - 30px)); max-height:425px;
  overflow:auto; }
.stg-menu-heading {display:block; padding:12px 9px; font-size:14px;
  color:#233657; border-bottom:1px solid #e7ebf3;}
.stg-notice-row { display:flex; align-items:center; gap:10px; padding:11px 9px;
  border-bottom:1px solid #edf0f5; font-size:13px; }
.stg-notice-row.is-unread {background:#f3f4ff;}
.stg-notice-main {display:grid;flex:1;gap:5px; color:#263a59; background:transparent;
  padding:3px; border:0; text-align:start; min-width:0; }
.stg-notice-main strong {font-size:13px;}
.stg-notice-main span,.stg-notice-main small {color:#6a7892;font-size:11px;}
.stg-notice-main:hover strong {color:#5e44b3;}
.stg-empty { padding:17px 10px; color:#6a7892; text-align:center; font-size:13px; }
.stg-small-action,.stg-text-button {border:0;background:transparent;color:#5843a9;
  padding:7px 9px; border-radius:6px; font-size:12px; font-weight:650;}
.stg-small-action:hover,.stg-text-button:hover {background:#eeeaff;}
.stg-primary-button { width:auto; padding:9px 13px; margin:8px 0; background:#6046b6; color:#fff;
  border:0; border-radius:8px; font-size:12px; font-weight:700; }
.stg-primary-button:hover {background:#4b3298;}
.stg-bell-popover > .stg-primary-button {width:100%;}
.stg-backdrop {position:fixed; inset:0; background:#0b1e3d80; z-index:2050;
  display:flex; justify-content:flex-end; align-items:stretch; }
.stg-drawer { box-sizing:border-box; width:min(550px,100vw); background:white;
  color:#193452; box-shadow:0 0 38px #001b3e40; display:flex; flex-direction:column;
  overflow:auto; }
.stg-drawer-top {display:flex; gap:15px; align-items:center; justify-content:space-between;
  padding:20px 24px; border-bottom:1px solid #e1e7f2; }
.stg-drawer-top h2 {font-size:19px; margin:0;}
.stg-close {background:#f4f5fa; color:#304360; border:0; border-radius:8px;
  width:35px; height:35px; font-size:18px;}
.stg-drawer-body { padding:22px 24px; display:grid; align-content:start; gap:13px; }
.stg-detail {padding:14px;border:1px solid #e4e9f1; border-radius:10px;display:grid; gap:6px;}
.stg-detail small,.stg-muted {font-size:12px;color:#66788f;}
.stg-detail strong {overflow-wrap:anywhere;}
.stg-field {display:grid;gap:6px;font-size:12px;font-weight:650;}
.stg-input {padding:10px; min-height:40px; border:1px solid #cfd8e8;border-radius:9px;
  background:white; color:#243c5c; width:100%; box-sizing:border-box;}
.stg-pref {display:flex;gap:16px;justify-content:space-between;align-items:center;
  border:1px solid #e0e4ec;border-radius:9px;padding:14px;}
.stg-pref input {width:18px;height:18px;accent-color:#6247b5;}
.stg-filters {display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.stg-filters input {grid-column:1/-1;}
.stg-rows {display:grid;gap:2px;}
.stg-pager {display:flex;align-items:center;gap:12px;justify-content:space-between;}
.stg-pager button:disabled {opacity:.45;}
html[dir="rtl"] .stg-header {direction:rtl;}
html[dir="rtl"] .stg-popover {right:auto;left:0;direction:rtl;}
html[dir="rtl"] .stg-account-button {text-align:right;padding:5px 6px 5px 9px;}
html[dir="rtl"] .stg-account-popover .stg-menu-item {text-align:right;}
html[dir="rtl"] .stg-caret {margin-left:0;margin-right:auto;}
html[dir="rtl"] .stg-backdrop {justify-content:flex-start;}
html[dir="rtl"] .stg-notice-main {text-align:right;}
html[dir="rtl"] .stg-drawer {direction:rtl;}
.stg-account-button:focus-visible,.stg-bell:focus-visible,
.stg-language-switch:focus-visible,.stg-popover button:focus-visible {outline:3px solid #856fd6;outline-offset:2px;}
@media(max-width:760px) {
 .topbar-user.stg-header-enabled {align-items:center;flex-direction:row;}
 .stg-header {gap:6px;justify-content:flex-end;}
 .stg-account-info {max-width:102px;}
 .stg-account-info strong,.stg-account-info small {max-width:102px;}
 .stg-account-button {min-width:100px;}
 .stg-language-switch {min-width:91px;}
 .stg-language-switch span {padding:6px 6px;}
 .stg-popover {position:fixed;right:10px;left:auto;top:105px;max-height:75vh;overflow:auto;}
 html[dir="rtl"] .stg-popover {left:10px;right:auto;}
 .stg-backdrop {padding-top:0;}
}
@media(max-width:415px) {
 .stg-account-info small {display:none;}
 .stg-account-button {min-width:auto;}
 .stg-account-info strong {max-width:82px;}
 .stg-avatar {min-width:28px;height:28px;}
 .stg-drawer-top {padding:16px;}
 .stg-drawer-body {padding:16px;}
}