/* Shared staff shell, loaded after the legacy and Bootstrap styles. */
.tb-hero.staff-hero { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; padding:16px 5%; }
.staff-hero .tb-hero-row { grid-column:2; grid-row:1; flex-wrap:nowrap; flex-direction:row; }
.staff-hero .tb-hero-headtext { position:relative; text-align:left; }
.staff-hero .tb-hero-user { position:static; grid-column:3; grid-row:1; margin:0; justify-self:end; }
.staff-hero .staff-portal, .staff-footer .staff-support { display:inline-flex; align-items:center; gap:8px; justify-self:start; width:fit-content; padding:9px 12px; border:1px solid #ffffff80; border-radius:7px; color:#fff !important; text-decoration:none !important; font:600 12px/1.4 'Segoe UI',Arial,sans-serif; }
.staff-hero .staff-portal:hover, .staff-footer .staff-support:hover { background:#ffffff20; }
.tb-hero .tb-hero-headtext { position:relative; }
.tb-hero .staff-test { position:absolute; top:0; left:150px; border-radius:4px; padding:1px 6px; background:#fff3d6; color:#79520c; font:600 10px/1.5 'Segoe UI',Arial,sans-serif; white-space:nowrap; }
.footer.staff-footer { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px; padding-left:5%; padding-right:5%; }
.staff-footer .container-footer { grid-column:2; padding:0; }
.staff-footer .staff-support { grid-column:3; justify-self:end; }
.app-navigation { flex-shrink:0; background:#fff; border-bottom:1px solid #dfe7e9; position:relative; z-index:20; }
.app-navigation-inner { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 5%; min-height:48px; }
.app-navigation-menu { display:flex; align-self:stretch; flex-wrap:wrap; min-width:0; gap:4px; }
.app-navigation-link { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 16px 12px; border-bottom:3px solid transparent; color:#596d73 !important; font:500 12px/1.4 'Segoe UI',Arial,sans-serif; text-decoration:none !important; white-space:nowrap; }
.app-navigation-link:hover { background:#f4f9f7; color:#087d70 !important; }
.app-navigation-link[aria-current], .app-navigation-link.is-active, .app-navigation-dropdown[open] summary { border-bottom-color:#087d70; color:#087d70 !important; background:#f4f9f7; font-weight:600; }
.app-navigation-actions { display:flex; align-items:center; gap:4px; flex-shrink:0; padding-left:14px; border-left:1px solid #e5ebed; }
.app-navigation-actions button { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border:1px solid transparent; border-radius:5px; color:#5e737a; background:transparent; cursor:pointer; }
.app-navigation-actions button:hover { background:#eaf5f1; color:#087d70; border-color:#d5e7de; }
.app-navigation-dropdown { position:relative; }
.app-navigation-dropdown summary { cursor:pointer; list-style:none; height:100%; }
.app-navigation-dropdown summary::-webkit-details-marker { display:none; }
.app-navigation-submenu { position:absolute; top:100%; left:0; z-index:1000; min-width:190px; padding:6px; background:#fff; border:1px solid #dfe7e2; border-radius:0 0 8px 8px; box-shadow:0 8px 20px #1c412d1f; }
.app-navigation-submenu a { display:block; padding:10px 12px; border-radius:4px; color:#4a6356 !important; font:12px/1.4 'Segoe UI',Arial,sans-serif; white-space:nowrap; text-decoration:none !important; }
.app-navigation-submenu a:hover, .app-navigation-submenu a[aria-current] { background:#eaf5f1; color:#087d70 !important; }
.app-navigation :focus-visible, .staff-hero a:focus-visible, .staff-footer a:focus-visible { outline:2px solid #b77c13; outline-offset:3px; }
@media(max-width:1100px) {
 .tb-hero.staff-hero { grid-template-columns:auto 1fr; gap:14px; }
 .staff-hero .tb-hero-row { grid-column:2; justify-content:flex-end; }
 .staff-hero .tb-hero-user { grid-column:1 / -1; grid-row:2; }
}
@media(max-width:700px) {
 .tb-hero.staff-hero { padding:12px 16px; }
 .staff-hero .tb-hero-row { grid-column:1 / -1; grid-row:2; justify-content:center; }
 .staff-hero .tb-hero-user { grid-row:3; justify-self:center; }
 .app-navigation-inner { padding:0 12px; gap:8px; flex-wrap:wrap; }
 .app-navigation-link { padding:12px 10px 10px; }
 .app-navigation-actions { margin:0 0 8px auto; }
 .footer.staff-footer { display:flex; flex-wrap:wrap; justify-content:center; padding:14px 16px; }
}

/* Keep the existing user identification on one row. */
.staff-hero .tb-hero-user { flex-direction:row; align-items:center; }
@media(min-width:1101px) and (max-width:1500px) { .tb-hero.staff-hero { gap:12px; padding-left:3%; padding-right:3%; }.staff-hero .tb-hero-subtitle { font-size:1.05rem !important; } }
/* Compact account area, shared by the three spaces. */
.tb-hero.staff-hero { overflow:visible; z-index:30; }
.staff-hero::before, .staff-hero::after { display:none; }
.staff-hero .refund-account { position:relative; top:auto; right:auto; overflow:visible; display:block; padding:0; background:#fff0cc; border:1px solid #e4bd68; border-radius:7px; color:#704609; }
.staff-hero .refund-account summary { display:flex; align-items:center; gap:8px; padding:9px 12px; color:#704609; font:600 12px/1.4 'Segoe UI',Arial,sans-serif; white-space:nowrap; }
.refund-account-menu { position:absolute; right:0; top:calc(100% + 8px); width:280px; max-width:calc(100vw - 32px); background:#fff; border:1px solid #e4dccb; border-radius:8px; padding:6px; box-shadow:0 8px 24px #16322430; text-align:left; z-index:1000; }
.refund-account-context { padding:10px; color:#6e6655; font:12px/1.5 'Segoe UI',Arial,sans-serif; overflow-wrap:anywhere; border-bottom:1px solid #eee7dc; margin-bottom:4px; }
.refund-account-menu a { display:flex; align-items:center; gap:8px; padding:10px; color:#46584d !important; text-decoration:none !important; border-radius:4px; font:13px/1.4 'Segoe UI',Arial,sans-serif; }
.refund-account-menu a:hover { background:#fff5df; color:#704609 !important; }
.staff-hero .tb-hero-user-nom { min-width:0; }
.staff-hero .tb-hero-user-nom > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media(max-width:1100px) {
 .tb-hero.staff-hero { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px 10px; }
 .staff-hero .staff-portal { grid-column:1; grid-row:1; max-width:100%; min-width:0; }
 .staff-hero .staff-portal span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
 .staff-hero .tb-hero-user { grid-column:2; grid-row:1; justify-self:end; max-width:100%; min-width:0; margin:0; }
 .staff-hero .tb-hero-user-logout { flex-shrink:0; }
 .staff-hero .tb-hero-row { grid-column:1 / -1; grid-row:2; justify-content:center; }
 .staff-hero .refund-account summary { gap:6px; padding:8px; font-size:11px; }
}
@media(max-width:450px) {
 .staff-hero .staff-portal { padding:8px; font-size:11px; gap:6px; }
 .staff-hero .tb-hero-user-nom { padding:8px; gap:5px; font-size:11px; }
 .staff-hero .tb-hero-user-logout { padding:8px; }
}