/* The frame: top bar, workspace columns and panel stacks, bottom bar, menu drawer. */

/* Top bar */
#navbar { position: absolute; left: 0; top: 0; right: 0; height: 40px; padding: 4px; }
.navInner { height: 32px; display: flex; align-items: center; justify-content: space-between; background: var(--theme); }
.navLeft, .navRight { display: flex; align-items: center; height: 32px; }
.navTrigger { display: flex; align-items: center; height: 24px; padding: 4px 8px; border-radius: 4px; color: #fff; cursor: pointer; white-space: nowrap; }
.navTrigger:hover, .navTrigger.open { background: rgba(255, 255, 255, 0.1); }
.navMenuButton { height: 28px; background: rgba(255, 255, 255, 0.1); margin-top: 0; }
.navMenuButton:hover { background: rgba(255, 255, 255, 0.2); }
.navShortcut { margin-left: 4px; padding: 2px 4px; border-radius: 2px; font-size: 11px; letter-spacing: 0.005em; color: rgba(255, 255, 255, 0.5); }
.navLogo { width: 32px; height: 32px; margin-left: 8px; padding: 4px; border-radius: 4px; }
.navLogo svg { width: 24px; height: 24px; display: block; }
.navSeparator { width: 1px; height: 32px; margin: 0 12px; background: #fff; opacity: 0.1; }
.navRight .navSeparator { margin: 0 8px; }
.navTrigger .title { color: #fff; }
.navTrigger .iconLeft { display: flex; margin-right: 4px; }
.navTrigger .iconRight { display: flex; margin-left: 4px; opacity: 0.6; }
.navRight .navTrigger + .navTrigger { margin-left: 3px; }

/* Workspace */
#page { position: absolute; left: 0; top: 40px; right: 0; bottom: 28px; padding: 4px 0; display: flex; background: rgba(255, 255, 255, 0.1); }
.column { display: flex; flex-direction: column; min-width: 0; height: 100%; }
#clmLeft { width: 471px; padding-left: 4px; flex: none; }
#clmMain { flex: 1; }
.columnHandle { width: 8px; flex: none; cursor: col-resize; }

.stack { display: flex; flex-direction: column; min-height: 0; padding-bottom: 8px; }
.stack.expanded { flex: 1 1 0; }
.stack.collapsed { flex: none; padding: 4px 0; }
.stackHeader { position: relative; height: 30px; flex: none; }
.stackTabs { display: flex; height: 30px; }
.stackTab { display: flex; align-items: center; height: 30px; padding-left: 8px; border-radius: 4px 4px 0 0; color: #fff; cursor: pointer; white-space: nowrap; }
.stackTab > a { opacity: 0.75; }
.stackTab:hover > a { opacity: 1; }
.stackTab .tabMenu { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; opacity: 0; }
.stackTab.selected { background: var(--gray-50); color: var(--gray-900); }
.stackTab.selected > a { opacity: 1; }
.stackTab.selected .tabMenu { opacity: 0.5; }
.stackTab.selected .tabMenu:hover { opacity: 1; }
.stack.collapsed .stackTab.selected { border-radius: 4px; padding-right: 24px; }
.stack.collapsed .stackTab.selected .tabMenu { display: none; }
.stackToggle { position: absolute; right: 0; top: 0; width: 32px; height: 30px; display: flex; align-items: center; justify-content: center; color: #fff; cursor: pointer; border-radius: 2px 2px 0 0; }
.stackBody { position: relative; flex: 1; min-height: 0; background: #fff; border-radius: 0 4px 4px 4px; overflow: hidden; }
.stack.collapsed .stackBody { display: none; }
.panel { position: absolute; inset: 0; display: flex; flex-direction: column; }
.stackResize { height: 8px; margin-top: -8px; cursor: row-resize; position: relative; z-index: 2; }

/* Bottom bar */
#dock { position: absolute; left: 0; right: 0; bottom: 0; height: 28px; display: flex; align-items: center; background: rgba(5, 28, 44, 0.25); color: #fff; font-size: 11px; }
.dockTabs { display: flex; align-items: flex-end; height: 28px; padding: 2px 0 0 4px; gap: 8px; }
.dockTab { height: 24px; padding: 0 6px; display: flex; align-items: center; border-radius: 4px 4px 0 0; cursor: default; }
.dockTab .dockText { opacity: 0.75; }
.dockTab.open { background: var(--gray-50); color: var(--gray-900); cursor: pointer; }
.dockTab.open .dockText { opacity: 1; }
.dockRight { margin-left: auto; display: flex; align-items: center; height: 28px; }
.dockTime { padding: 0 8px; }
.dockBell { width: 24px; height: 24px; margin-right: 12px; display: flex; align-items: center; justify-content: center; border-radius: 4px; background: rgba(255, 255, 255, 0.1); opacity: 0.4; }
.dockDots { width: 24px; height: 20px; padding: 0 8px; font-size: 15px; line-height: 10px; cursor: pointer; }
.dockJobs { min-width: 17px; height: 20px; padding: 1px 4px; margin-right: 12px; border: 1px solid rgb(117, 117, 117); border-radius: 10px; background: rgb(160, 160, 160); color: rgb(103, 103, 103); text-align: center; }
.dockMute { width: 25px; height: 16px; margin-right: 5px; opacity: 0.3; display: flex; }

body.dockTop #dock { top: 40px; bottom: auto; }
body.dockTop #page { top: 68px; bottom: 0; }
body.dockTop .dockTabs { align-items: flex-start; padding: 0 0 2px 4px; }
body.dockTop .dockTab { border-radius: 0 0 4px 4px; }

/* Main menu drawer */
#drawer { position: absolute; left: 0; top: 44px; bottom: 0; width: 300px; background: #fff; border-radius: 0 4px 4px 0; box-shadow: var(--shadow-md); transform: translateX(-310px); transition: transform 0.15s ease-out; z-index: 900; display: flex; flex-direction: column; }
#drawer.open { transform: none; }
.drawerSearchRow { height: 41px; padding: 4px; border-bottom: 1px solid var(--line); flex: none; }
.drawerSearch { height: 32px; padding: 0 8px; display: flex; align-items: center; border-radius: 4px; color: var(--gray-400); }
.drawerSearch input { flex: 1; margin-left: 5px; border: 0; outline: 0; height: 18px; color: var(--gray-900); }
.drawerSearch input::placeholder { color: var(--gray-700); }
.drawerContent { flex: 1; padding: 4px; overflow: auto; }
.drawerItem { height: 32px; margin-bottom: 8px; padding: 8px; display: flex; align-items: center; border-radius: 2px; cursor: pointer; }
.drawerItem:hover { background: var(--gray-50); }
.drawerItem .dIcon { width: 28px; padding: 0 8px; display: flex; }
.drawerItem .dTitle { flex: 1; }
.drawerItem .dChevron { width: 28px; padding: 0 8px; display: flex; }
.drawerFooter { flex: none; padding: 4px; border-top: 1px solid var(--line); }
.drawerFooter .drawerItem:last-child { margin-bottom: 0; }

/* Menus: drop-downs and right-click menus */
.menu { position: absolute; z-index: 1000; min-width: 160px; background: #fff; border-radius: 4px; box-shadow: var(--shadow-md); }
.menu li { position: relative; height: 32px; }
.menu li.divider { height: 33px; border-top: 1px solid var(--line); }
.menu li > a { display: flex; align-items: center; height: 32px; padding: 8px 32px; white-space: nowrap; cursor: pointer; }
.menu li:hover > a, .menu li.openSub > a { background: var(--gray-50); }
.menu li:first-child > a { border-radius: 4px 4px 0 0; }
.menu li:last-child > a { border-radius: 0 0 4px 4px; }
.menu li.disabled > a { color: var(--gray-400); cursor: default; }
.menu li > a { min-height: 32px; }
.menu .mIcon { position: absolute; left: 10px; top: 10px; display: flex; }
.menu li.divider .mIcon { top: 11px; }
.menu .mCheck { position: absolute; left: 12px; top: 10px; display: flex; }
.menu .mArrow { position: absolute; right: 10px; top: 10px; display: flex; color: var(--gray-700); }
.menu.vehicleMenu { width: 243px; }
.menu.subMenu { width: 243px; }
.menu .mFilter { padding: 6px 8px 2px; }
.menu .mAllNone { padding: 6px 12px 4px; font-weight: 600; }
.menu .mAllNone span { cursor: pointer; }
.menu.groupsMenu { width: 250px; max-height: 840px; overflow: auto; }
.menu.groupsMenu li > a { padding-left: 36px; }

/* Floating windows */
.win { position: absolute; z-index: 800; display: flex; flex-direction: column; background: #fff; border-radius: 4px; box-shadow: var(--shadow-xl); overflow: hidden; }
.winTitlebar { height: 32px; flex: none; display: flex; align-items: center; background: var(--theme); color: #fff; cursor: move; }
.winTitle { margin: 0 0 0 8px; font-size: 12px; font-weight: 400; flex: 1; }
.winButton { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.winButton:hover { background: rgba(255, 255, 255, 0.15); }
.winContent { flex: 1; min-height: 0; display: flex; flex-direction: column; }