/* Shared header: quiet navigation, a utility action, and one account control. */
.topbar.app-topbar { height: 76px; min-height: 76px; padding: 0 36px; gap: 24px; background: #fff; border-bottom: 1px solid #e3e9e4; }
.topbar-location { display: flex; align-items: center; gap: 12px; min-width: 0; font-size: 12px; }
.topbar-home { display: grid; place-items: center; flex: none; width: 34px; height: 34px; padding: 0; border-radius: 8px; color: #698078; background: #f3f6f3; }
.topbar-home .icon { width: 17px; height: 17px; }
.topbar-context { color: #72857c; white-space: nowrap; }
.topbar-separator { color: #bdc9c2; }
.topbar-page { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; font-weight: 600; color: #2c493e; }
.topbar-actions { display: flex; align-items: center; flex: none; gap: 20px; }
.topbar-dispatch { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 9px 12px; border-radius: 8px; font-size: 12px; white-space: nowrap; }
.topbar-dispatch .icon { width: 15px; height: 15px; }
.topbar.app-topbar .topbar-dispatch:hover { background: #d95022; }
.topbar-reconcile { display: flex; align-items: center; gap: 7px; min-height: 40px; padding: 8px 5px; background: transparent; border-radius: 6px; font-size: 12px; font-weight: 500; color: #5b7468; white-space: nowrap; }
.topbar-reconcile .icon { width: 17px; height: 17px; color: #799183; }
.topbar-divider { height: 26px; width: 1px; background: #e8ede9; }
.topbar-account { position: relative; min-width: 0; }
.topbar-account-trigger { display: flex; align-items: center; gap: 10px; min-height: 40px; max-width: 320px; padding: 6px 8px; margin-right: -8px; border-radius: 9px; list-style: none !important; cursor: pointer; color: #315544; -webkit-appearance: none; appearance: none; }
.topbar-account-trigger::-webkit-details-marker { display: none; }
.topbar-account-trigger::marker { content: none; display: none; font-size: 0; }
.topbar-account>summary { list-style: none !important; }
.topbar-account>summary::-webkit-details-marker { display: none; }
.topbar-account>summary::marker { content: none; display: none; font-size: 0; }
.topbar-identity { display: flex; align-items: center; min-width: 0; gap: 8px; text-align: left; }
.topbar-identity strong { min-width: 0; max-width: 10em; color: #294738; font-size: 13px; font-weight: 600; line-height: 1.4; }
.topbar-identity small { min-width: 0; max-width: 180px; padding: 3px 8px; border: 1px solid #dde7df; border-radius: 5px; background: #f1f5ef; color: #597260; font-size: 11px; font-weight: 400; line-height: 1.4; }
.topbar-identity strong,.topbar-identity small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-account-trigger>.icon { width: 16px; height: 16px; flex: none; color: #87988d; }
.topbar-account[open] .topbar-account-trigger { background: #f1f5ef; }
.topbar-account[open] .topbar-account-trigger>.icon { transform: rotate(180deg); }
.topbar-account-panel { position: absolute; top: calc(100% + 12px); right: -8px; width: 242px; max-width: calc(100vw - 32px); border: 1px solid #dfe7df; background: #fff; border-radius: 12px; box-shadow: 0 12px 32px #163b2d1a; padding: 6px; z-index: 30; }
.topbar-account-info { display: flex; flex-direction: column; gap: 6px; padding: 13px 12px 16px; border-bottom: 1px solid #edf0e9; margin-bottom: 5px; overflow-wrap: anywhere; }
.topbar-account-info small { font-size: 10px; color: #7f8e83; }
.topbar-account-info strong { font-size: 14px; color: #294738; font-weight: 600; }
.topbar-account-info>span { font-size: 11px; line-height: 1.7; color: #687d6e; }
.topbar-logout { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 42px; padding: 11px 12px; border-radius: 7px; background: transparent; color: #9b4d35; font-weight: 500; font-size: 12px; }
.topbar-logout .icon { width: 17px; height: 17px; }
.topbar.app-topbar button:hover,.topbar-account-trigger:hover { background: #f1f5ef; filter: none; }
.topbar.app-topbar .topbar-logout:hover { background: #fcf2ec; }
.topbar.app-topbar button:focus-visible,.topbar-account-trigger:focus-visible { outline: 2px solid #cb683e; outline-offset: 3px; }
@media(max-width:1100px) {
 .has-dispatch .topbar-account-trigger { max-width: 180px; }
 .has-dispatch .topbar-reconcile span { display: none; }
 .topbar.app-topbar { padding: 0 24px; gap: 14px; }
 .topbar-actions { gap: 12px; }
 .topbar-location { gap: 9px; }
 .topbar-context { display: none; }
 .topbar-separator { display: none; }
}
@media(max-width:700px) {
 .topbar.app-topbar.has-dispatch { height: auto; padding-top: 10px; padding-bottom: 10px; flex-wrap: wrap; gap: 6px; }
 .has-dispatch .topbar-location { width: 100%; }
 .has-dispatch .topbar-actions { width: 100%; gap: 8px; }
 .has-dispatch .topbar-dispatch { padding: 8px; font-size: 11px; gap: 4px; }
 .has-dispatch .topbar-account { min-width: 0; margin-left: auto; }
 .has-dispatch .topbar-account-trigger { margin-right: 0; }
 .topbar.app-topbar { height: 68px; min-height: 68px; padding: 0 16px; gap: 10px; }
 .topbar-actions { gap: 10px; }
 .topbar-home { display: none; }
 .topbar-page { font-size: 12px; }
 .topbar-reconcile { font-size: 11px; gap: 5px; padding: 8px 0; }
 .topbar-reconcile .icon { width: 15px; height: 15px; }
 .topbar-divider { display: none; }
 .topbar-account-trigger { max-width: 180px; gap: 7px; padding: 5px; margin-right: -5px; }
 .topbar-identity { gap: 6px; }
 .topbar-identity strong { max-width: 6em; font-size: 12px; }
 .topbar-identity small { max-width: 78px; padding: 3px 6px; font-size: 10px; }
 .topbar-account-panel { right: -5px; }
}
@media(max-width:360px) {
 .topbar-reconcile span { display: none; }
 .topbar-reconcile { padding: 8px 4px; }
 .topbar-account-trigger { gap: 4px; }
}