Compact admin sidebar controls

public/admin.css

@@ -69,21 +69,67 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
   border-right: 1px solid var(--line);
   background: var(--panel);
   display: grid;
-  grid-template-rows: auto auto auto minmax(0, 1fr);
+  grid-template-rows: auto auto minmax(0, 1fr);
   min-height: 0;
   overflow: hidden;
 }
-.brand, .sitebar {
+.brand {
   height: var(--topbar-height);
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 12px;
+  gap: 10px;
   padding: 14px;
   border-bottom: 1px solid var(--line);
 }
 .brand h1 { margin: 0; font-size: 20px; }
-.brand button, .sitebar button { background: #edf3ef; color: var(--ink); }
+.brand-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  flex: 0 0 auto;
+}
+.brand button { background: #edf3ef; color: var(--ink); }
+.icon-button {
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  display: grid;
+  place-items: center;
+}
+.icon-button svg {
+  width: 18px;
+  height: 18px;
+  fill: currentColor;
+}
+.logout-compact {
+  height: 32px;
+  padding: 0 10px;
+  font-size: 12px;
+}
+.online-dot-toggle {
+  width: 28px;
+  height: 32px;
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+}
+.online-dot-toggle input {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+.online-dot-toggle span {
+  width: 11px;
+  height: 11px;
+  border-radius: 50%;
+  background: #c9d4ce;
+  box-shadow: 0 0 0 4px rgb(201 212 206 / 25%);
+}
+.online-dot-toggle input:checked + span {
+  background: #2f9e44;
+  box-shadow: 0 0 0 4px rgb(47 158 68 / 16%);
+}
 .switch { display: flex; align-items: center; gap: 8px; }
 .switch input { width: auto; }
 .setting-switch {
@@ -399,15 +445,30 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
 .visitor-detail-popover {
   position: absolute;
   z-index: 20;
-  top: calc(100% + 8px);
+  top: calc(100% + 10px);
-  right: 0;
+  right: -8px;
-  width: min(520px, calc(100vw - 420px));
+  width: min(520px, 64vw);
+  max-width: calc(100vw - 380px);
+  max-height: calc(100vh - 118px);
+  overflow: auto;
   padding: 12px;
   border: 1px solid var(--line);
   border-radius: 8px;
   background: white;
   box-shadow: 0 14px 32px rgb(0 0 0 / 13%);
 }
+.visitor-detail-popover:before {
+  position: absolute;
+  top: -6px;
+  right: 12px;
+  width: 10px;
+  height: 10px;
+  transform: rotate(45deg);
+  border-left: 1px solid var(--line);
+  border-top: 1px solid var(--line);
+  background: white;
+  content: "";
+}
 .visitor-detail-grid {
   display: grid;
   grid-template-columns: 76px minmax(0, 1fr);

public/admin.html

@@ -23,14 +23,18 @@
         <aside class="sidebar">
           <div class="brand">
             <h1>MaalFlows</h1>
-            <button id="logoutButton" type="button">Odhlasit</button>
+            <div class="brand-actions">
-          </div>
+              <label class="online-dot-toggle" title="Online stav chatu" aria-label="Online stav chatu">
-          <div class="sitebar">
-            <label class="switch">
               <input id="onlineToggle" type="checkbox">
-              <span>Online</span>
+                <span></span>
-            </label>
+              </label>
-            <button id="settingsButton" type="button">Nastaveni</button>
+              <button id="settingsButton" class="icon-button" type="button" title="Nastaveni" aria-label="Nastaveni">
+                <svg viewBox="0 0 24 24" aria-hidden="true">
+                  <path d="M19.4 13.5c.1-.5.1-1 .1-1.5s0-1-.1-1.5l2-1.5-2-3.5-2.4 1a8 8 0 0 0-2.6-1.5L14 2h-4l-.4 2.5A8 8 0 0 0 7 6L4.6 5l-2 3.5 2 1.5a9.7 9.7 0 0 0 0 3l-2 1.5 2 3.5L7 18a8 8 0 0 0 2.6 1.5L10 22h4l.4-2.5A8 8 0 0 0 17 18l2.4 1 2-3.5-2-1.5ZM12 15.5a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7Z"></path>
+                </svg>
+              </button>
+              <button id="logoutButton" class="logout-compact" type="button">Odhlasit</button>
+            </div>
           </div>
           <div class="list-tools">
             <label>Filtr