:root { --top-navbar-bg: #18a848; --top-navbar-fg: #ffffff; --top-navbar-hover-bg: rgba(255, 255, 255, 0.16); --top-navbar-active-bg: #ffffff; --top-navbar-active-fg: #111111; }
:root.top-navbar-active { --navbar-h: 2.5rem; }
.top-navbar { position: fixed; top: 0; right: 0; left: 0; z-index: 1300; display: flex; align-items: center; min-height: 2.5rem; padding: 0 1rem; background: var(--top-navbar-bg); color: var(--top-navbar-fg); box-shadow: inset 0 -1px 0 var(--top-navbar-bottom-border, transparent); font-family: var(--app-font-sans, system-ui, sans-serif); }
.top-navbar__links { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: .25rem; overflow: visible; }
.top-navbar__actions { display: flex; flex: 0 0 auto; align-items: center; gap: .5rem; margin-left: .65rem; padding-left: .65rem; border-left: 1px solid var(--top-navbar-divider); }
.top-navbar__actions .top-navbar__icon-btn, .top-navbar__theme-action, .top-navbar__user-menu .info-user-menu__trigger, .top-navbar__tenant-box { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 1.8rem; height: 1.8rem; padding: 0; border: 1px solid transparent; border-radius: .38rem; background: transparent; color: var(--top-navbar-fg); box-shadow: none; }
.top-navbar__actions .top-navbar__icon-btn, .top-navbar__theme-action, .top-navbar__user-menu .info-user-menu__trigger { cursor: pointer; }
.top-navbar__actions .top-navbar__icon-btn:hover, .top-navbar__actions .top-navbar__icon-btn:focus-visible, .top-navbar__actions .top-navbar__icon-btn[aria-expanded='true'], .top-navbar__theme-action:hover, .top-navbar__theme-action:focus-visible, .top-navbar__theme-action[aria-expanded='true'], .top-navbar__user-menu .info-user-menu__trigger:hover, .top-navbar__user-menu .info-user-menu__trigger:focus-visible, .top-navbar__user-menu[open] .info-user-menu__trigger { background: var(--top-navbar-hover-bg); color: var(--top-navbar-fg); }
.top-navbar .top-navbar__links .top-navbar__link--icon { width: 2rem; height: 2rem; border: 1px solid transparent; border-radius: .3rem; background: transparent; color: var(--top-navbar-fg); box-shadow: none; }
.top-navbar .top-navbar__links .top-navbar__link--icon:hover, .top-navbar .top-navbar__links .top-navbar__link--icon:focus-visible, .top-navbar .top-navbar__links .top-navbar__link--icon[aria-expanded='true'], .top-navbar .top-navbar__apps-menu[open] > .top-navbar__link--icon { border-color: transparent; background: var(--top-navbar-hover-bg); color: var(--top-navbar-fg); outline: none; }
.top-navbar .top-navbar__links .top-navbar__link--icon.top-navbar__link--active, .top-navbar .top-navbar__links .top-navbar__link--icon.top-navbar__link--active:hover, .top-navbar .top-navbar__links .top-navbar__link--icon.top-navbar__link--active:focus-visible { background: var(--top-navbar-active-bg); color: var(--top-navbar-active-fg); }
.top-navbar__user-menu .info-user-menu__trigger { width: auto; min-width: 1.8rem; padding: 0 .45rem 0 .35rem; border-color: transparent; background: var(--top-navbar-active-bg); color: var(--top-navbar-active-fg); }
.top-navbar__user-menu .info-user-menu__trigger:hover, .top-navbar__user-menu .info-user-menu__trigger:focus-visible, .top-navbar__user-menu[open] .info-user-menu__trigger { background: var(--top-navbar-active-bg); color: var(--top-navbar-active-fg); }
.top-navbar__tenant-menu { position: relative; }
.top-navbar__tenant-menu > summary { list-style: none; }
.top-navbar__tenant-menu > summary::-webkit-details-marker { display: none; }
.top-navbar__tenant-box { flex: 0 0 1.8rem; background: var(--top-navbar-active-bg); color: var(--top-navbar-active-fg); }
.top-navbar__tenant-box:hover, .top-navbar__tenant-box:focus-visible, .top-navbar__tenant-menu[open] .top-navbar__tenant-box { background: var(--top-navbar-active-bg); color: var(--top-navbar-active-fg); outline: none; }
.top-navbar__tenant-icon { display: block; width: 1.18rem; height: 1.18rem; object-fit: contain; border-radius: .2rem; }
.top-navbar__tenant-dropdown { position: absolute; top: calc(100% + .5rem); right: 0; z-index: 20; display: flex; width: min(18rem, calc(100vw - 1rem)); flex-direction: column; gap: .25rem; padding: .45rem; border: 1px solid #e5e7eb; border-radius: .7rem; background: #ffffff; color: #111827; box-shadow: 0 14px 28px rgba(17, 24, 39, .16); }
.top-navbar__tenant-option { display: grid; grid-template-columns: 2rem minmax(0, 1fr) 1.2rem; align-items: center; gap: .55rem; min-height: 2.65rem; padding: .35rem .45rem; border: 1px solid transparent; border-radius: .5rem; color: #111827; text-decoration: none; }
.top-navbar__tenant-option:hover, .top-navbar__tenant-option:focus-visible { border-color: #d1d5db; background: #f9fafb; color: #111827; outline: none; }
.top-navbar__tenant-option.is-active { border-color: #bbf7d0; background: #f0fdf4; }
.top-navbar__tenant-option-icon { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: .45rem; background: #f3f4f6; }
.top-navbar__tenant-option-icon img { display: block; width: 1.35rem; height: 1.35rem; object-fit: contain; border-radius: .2rem; }
.top-navbar__tenant-option-copy { min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.top-navbar__tenant-option-name { overflow: hidden; color: #111827; font-size: .8rem; font-weight: 750; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.top-navbar__tenant-option-code { overflow: hidden; color: #6b7280; font-size: .68rem; font-weight: 700; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
.top-navbar__tenant-option-check { color: #16a34a; font-size: 1rem !important; }
.top-navbar__tenant-empty { padding: .65rem .75rem; color: #6b7280; font-size: .78rem; font-weight: 700; }
.top-navbar__user-chevron { margin-left: -0.1rem; font-size: 0.95rem !important; transition: transform 0.16s ease; }
.top-navbar__user-menu[open] .top-navbar__user-chevron { transform: rotate(180deg); }
.top-navbar__user-menu .info-user-menu__name { color: inherit; }
.top-navbar__apps-menu { position: relative; }
.top-navbar__apps-menu > summary { list-style: none; }
.top-navbar__apps-menu > summary::-webkit-details-marker { display: none; }
.top-navbar__apps-dropdown { position: absolute; top: calc(100% + .5rem); left: 0; z-index: 20; width: max-content; min-width: 15rem; padding: .65rem; border: 1px solid #e5e7eb; border-radius: .7rem; background: #ffffff; color: #111827; box-shadow: 0 14px 28px rgba(17, 24, 39, .16); }
.top-navbar__apps-title { margin: 0; padding: .1rem .25rem .5rem; color: #6b7280; font-size: .68rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.top-navbar__apps-grid { display: grid; grid-template-rows: repeat(2, minmax(6.25rem, auto)); grid-auto-flow: column; grid-auto-columns: 7rem; gap: .5rem; }
.top-navbar__apps-card { position: relative; min-width: 0; min-height: 6.25rem; }
.top-navbar__apps-item { --top-navbar-app-color: #374151; --top-navbar-app-soft: #f3f4f6; display: flex; width: 100%; height: 100%; min-width: 0; min-height: 6.25rem; flex-direction: column; align-items: center; justify-content: center; gap: .55rem; padding: .75rem .5rem; border: 1px solid #e5e7eb; border-radius: .6rem; background: #f9fafb; color: #374151; cursor: pointer; font: inherit; font-size: .78rem; font-weight: 750; line-height: 1.2; text-align: center; text-decoration: none; }
.top-navbar__apps-item--nextcloud { --top-navbar-app-color: #0082c9; --top-navbar-app-soft: #e6f5fc; }
.top-navbar__apps-item--calendar { --top-navbar-app-color: #059669; --top-navbar-app-soft: #e6f7f0; }
.top-navbar__apps-item--chat { --top-navbar-app-color: #4f46e5; --top-navbar-app-soft: #eeedff; }
.top-navbar__apps-item--webmail { --top-navbar-app-color: #dc5a35; --top-navbar-app-soft: #fff0eb; }
.top-navbar__apps-item--meetings { --top-navbar-app-color: #0284c7; --top-navbar-app-soft: #e8f6fd; }
.top-navbar__apps-item--calls { --top-navbar-app-color: #7c3aed; --top-navbar-app-soft: #f2ebff; }
.top-navbar__apps-item:hover, .top-navbar__apps-item:focus-visible { border-color: var(--top-navbar-app-color); background: var(--top-navbar-app-soft); color: #111827; outline: none; }
.top-navbar__apps-item-icon { display: inline-flex; flex: 0 0 3.25rem; align-items: center; justify-content: center; width: 3.25rem; height: 3.25rem; padding: 0; border-radius: .8rem; background: var(--top-navbar-app-soft); color: var(--top-navbar-app-color); font-size: 2.25rem !important; font-variation-settings: 'FILL' 0, 'wght' 350, 'GRAD' 0, 'opsz' 40 !important; line-height: 1 !important; text-align: center; }
.top-navbar__apps-pin { position: absolute; top: .3rem; right: .3rem; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 1.55rem; height: 1.55rem; padding: 0; border: 0; border-radius: .4rem; background: rgba(255, 255, 255, .88); color: #64748b; cursor: pointer; }
.top-navbar__apps-pin:hover, .top-navbar__apps-pin:focus-visible, .top-navbar__apps-pin[aria-pressed='true'] { background: #ffffff; color: #111827; box-shadow: 0 1px 5px rgba(15, 23, 42, .16); outline: none; }
.top-navbar__apps-pin .material-symbols-outlined { font-size: 1rem; line-height: 1; }
.top-navbar__app-badge, .top-navbar__apps-card-badge { position: absolute; display: inline-flex; align-items: center; justify-content: center; min-width: 1.05rem; height: 1.05rem; padding: 0 .28rem; border: 2px solid var(--top-navbar-bg); border-radius: 999px; background: #dc2626; color: #ffffff; font-size: .62rem; font-weight: 800; line-height: 1; box-shadow: 0 1px 4px rgba(15, 23, 42, .18); }
.top-navbar__app-badge { top: -.28rem; right: -.28rem; }
.top-navbar__apps-card-badge { top: .42rem; left: .42rem; border-color: #ffffff; }
.top-navbar__app-badge[hidden], .top-navbar__apps-card-badge[hidden] { display: none; }
.top-navbar__pinned-apps { display: contents; }
.top-navbar__notifications .info-notifications__badge, .top-navbar__actions .app-chat-sidebar-toggle__badge { border-color: var(--top-navbar-bg); }
.top-navbar__notifications .info-notifications__badge { top: -.15rem; }
.top-navbar__link { flex: 0 0 auto; padding: .42rem .62rem; border-radius: .3rem; color: var(--top-navbar-fg); font-size: .78rem; font-weight: 700; line-height: 1; text-decoration: none; transition: background-color .15s ease, color .15s ease; }
.top-navbar__link--button { font: inherit; cursor: pointer; }
.top-navbar__link:hover, .top-navbar__link:focus-visible { background: var(--top-navbar-hover-bg); color: var(--top-navbar-fg); }
.top-navbar__link--active { background: var(--top-navbar-active-bg); color: var(--top-navbar-active-fg); }
.top-navbar__link--active:hover, .top-navbar__link--active:focus-visible { background: var(--top-navbar-active-bg); color: var(--top-navbar-active-fg); }
.top-navbar__link--icon, .top-navbar__theme-action { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; }
.top-navbar__links > :is(.top-navbar__link--icon, .top-navbar__theme-action) + :is(.top-navbar__link--icon, .top-navbar__theme-action)::before { content: ''; position: absolute; top: 50%; left: -0.13rem; width: 1px; height: 0.9rem; transform: translateY(-50%); background: var(--top-navbar-divider); opacity: 0.8; }
.top-navbar__link--icon .material-symbols-outlined, .top-navbar__theme-action .material-symbols-outlined, .top-navbar__icon-btn .material-symbols-outlined, .top-navbar__user-menu .material-symbols-outlined { font-size: 1.08rem; font-variation-settings: 'FILL' 0, 'wght' 350, 'GRAD' 0, 'opsz' 20; opacity: .9; }
.top-navbar__link--icon[data-tooltip], .top-navbar__theme-action[data-tooltip], .top-navbar__icon-btn[data-tooltip], .top-navbar__tenant-box[data-tooltip] { position: relative; }
.top-navbar__link--icon[data-tooltip]::after, .top-navbar__theme-action[data-tooltip]::after, .top-navbar__icon-btn[data-tooltip]::after, .top-navbar__tenant-box[data-tooltip]::after { content: attr(data-tooltip); position: absolute; top: calc(100% + 0.45rem); left: 50%; z-index: 2; width: max-content; max-width: 12rem; transform: translateX(-50%) translateY(-0.2rem); border-radius: 0.35rem; background: #111827; color: #ffffff; padding: 0.36rem 0.5rem; font-size: 0.72rem; font-weight: 700; line-height: 1; opacity: 0; pointer-events: none; transition: opacity 0.1s ease, transform 0.1s ease; }
.top-navbar__link--icon[data-tooltip]:hover::after, .top-navbar__link--icon[data-tooltip]:focus-visible::after, .top-navbar__theme-action[data-tooltip]:hover::after, .top-navbar__theme-action[data-tooltip]:focus-visible::after, .top-navbar__icon-btn[data-tooltip]:hover::after, .top-navbar__icon-btn[data-tooltip]:focus-visible::after, .top-navbar__tenant-box[data-tooltip]:hover::after, .top-navbar__tenant-box[data-tooltip]:focus-visible::after { transform: translateX(-50%) translateY(0); opacity: 1; }
:root.top-navbar-active .app-main--fullscreen { min-height: calc(100vh - var(--navbar-h)); }
html.top-navbar-active .app-main { margin-top: var(--navbar-h) !important; }

@media (max-width: 640px) {
  .top-navbar__actions { gap: .3rem; margin-left: .35rem; padding-left: .35rem; }
}