/* Global application navigation: isolated from Bootstrap, legacy and POS styles. */
.app-header { position: sticky; top: 0; z-index: 1040; display: flex; align-items: center; gap: 24px; width: 100%; height: 49px; min-height: 49px; padding: 0 16px; box-sizing: border-box; background: #fff; border-bottom: 1px solid #dedede; color: #323130; font: 14px/20px "Segoe UI", Arial, sans-serif; }
.app-header * { box-sizing: border-box; }
.app-header a, .app-header button, .app-header summary { color: #323130; font: inherit; text-decoration: none; }
.app-header .app-brand { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 650; }
.app-brand-mark { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 4px; background: #0078d4; color: white; font-size: 22px; }
.app-header .app-menu { position: relative; margin: 0; }
.app-header summary { display: flex; align-items: center; gap: 8px; list-style: none; cursor: pointer; padding: 8px; border-radius: 3px; }
.app-header summary::-webkit-details-marker { display: none; }
.app-header summary:hover, .app-header .app-menu-panel a:hover, .app-header .app-menu-panel button:hover { background: #f0f0f0; text-decoration: none; }
.app-header .app-account { margin-left: auto; }
.app-header .app-account summary > span:nth-child(2) { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-header .app-menu-panel { position: absolute; left: 0; top: calc(100% + 4px); min-width: 210px; padding: 4px; background: #fff; border: 1px solid #dedede; border-radius: 4px; box-shadow: 0 4px 12px #0002; }
.app-header .app-account .app-menu-panel { left: auto; right: 0; }
.app-header .app-menu-panel a, .app-header .app-menu-panel button { display: block; width: 100%; padding: 8px 12px; text-align: left; border: 0; background: transparent; border-radius: 2px; cursor: pointer; transform: none; }
.app-header form { margin: 0; }
.app-header .app-user-mark { color: #0078d4; }
.app-header :focus-visible { outline: 2px solid #0078d4; outline-offset: 2px; }
.app-header .app-sidebar-toggle { display: none; border: 0; background: transparent; padding: 4px; }
@media(max-width: 767px) { .app-header { gap: 8px; padding: 0 8px; } .app-header .app-sidebar-toggle { display: block; } .app-header .app-account summary > span:nth-child(2) { max-width: 90px; } }
.app-dashboard { max-width: 1100px; margin: 40px auto; padding: 0 24px; }
.app-dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 24px; }
.app-dashboard-card { display: block; padding: 24px; background: white; border: 1px solid #dedede; border-radius: 5px; }
.app-dashboard-card:hover { border-color: #0078d4; text-decoration: none !important; }
.app-dashboard-card h2 { font-size: 20px; }.app-dashboard-card p { color: #605e5c; margin: 12px 0 0; }