/* Copyright (c) 2026, The Isaac Lab Project Developers (https://github.com/isaac-sim/IsaacLab/blob/main/CONTRIBUTORS.md).
 * All rights reserved.
 *
 * SPDX-License-Identifier: BSD-3-Clause
 */

@import url("../../v6/css/browser-demo.css");

.browser-demo-boundary-note { display: block; margin-top: .75rem; color: #536b74; font-size: .75rem; }

isaaclab-browser-demo [hidden] { display: none !important; }
.browser-demo-franka-mode { position: absolute; top: 12px; left: 12px; display: flex; gap: 3px; padding: 3px; border: 1px solid #fff9; border-radius: 11px; background: #ffffffa0; backdrop-filter: blur(8px); box-shadow: 0 2px 8px #192e3610; }
.browser-demo-franka-mode button { min-width: 70px; min-height: 34px; padding: .35rem .75rem; border: 0; border-radius: 8px; background: transparent; color: #40565e; font-size: .8rem; }
.browser-demo-franka-mode button[aria-pressed="true"] { background: #eff8e6; color: #375c00; box-shadow: 0 1px 4px #213b0015; font-weight: 600; }
.browser-demo-franka-mode button[aria-pressed="true"]:last-child { background: #e4f3f8; color: #066f92; }
.browser-demo-franka-help { position: absolute; bottom: 12px; left: 12px; max-width: calc(100% - 24px); padding: .5rem .65rem; border: 1px solid #fff8; border-radius: 8px; background: #ffffffa0; backdrop-filter: blur(6px); color: #40565e; font-size: .72rem; pointer-events: none; }
[data-control-mode="manual"] .browser-demo-franka-help { max-width: calc(100% - 195px); }
.browser-demo-franka-grip { position: absolute; bottom: 12px; right: 12px; min-height: 40px; padding: .5rem .75rem; border: 1px solid #fff9; border-radius: 9px; background: #ffffffbd; backdrop-filter: blur(6px); color: #244957; font-size: .8rem; }
.browser-demo-franka-shortcut { margin-left: .6rem; padding: .1rem .3rem; border: 1px solid #24495725; border-radius: 4px; font: inherit; font-size: .7rem; }
.browser-demo-viewport canvas:focus-visible { outline: 2px solid #168aaf; outline-offset: -2px; }
.browser-demo-franka-pad { display: none; }
.browser-demo-franka-settings { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem 1.5rem; width: 100%; }
.browser-demo-franka-settings > strong { flex-basis: 100%; color: #536b74; font-size: .8rem; }
.browser-demo-franka-material { width: 100%; font-size: .82rem; }
.browser-demo-franka-material summary { color: #536b74; cursor: pointer; }
.browser-demo-franka-material > div { padding-top: .8rem; }
@media (max-width: 600px) {
  .browser-demo-franka-mode button { min-width: 65px; min-height: 40px; }
  [data-control-mode="manual"] .browser-demo-franka-help { display: none; }
  .browser-demo-franka-pad { position: absolute; bottom: 12px; left: 12px; display: grid; grid-template-columns: repeat(4, 44px); gap: 4px; }
  .browser-demo-franka-pad button { min-width: 44px; min-height: 44px; padding: 0; border: 1px solid #fff9; border-radius: 9px; background: #ffffffbd; backdrop-filter: blur(6px); color: #244957; font-size: .82rem; touch-action: none; }
  .browser-demo-franka-pad button:active { background: #d9edf5; }
  .browser-demo-franka-grip { min-height: 44px; font-size: .75rem; }
  .browser-demo-franka-shortcut { display: none; }
  .browser-demo-franka-pad [data-key="KeyA"] { grid-area: 2 / 1; }
  .browser-demo-franka-pad [data-key="KeyW"] { grid-area: 1 / 2; }
  .browser-demo-franka-pad [data-key="KeyD"] { grid-area: 2 / 3; }
  .browser-demo-franka-pad [data-key="KeyS"] { grid-area: 2 / 2; }
  .browser-demo-franka-pad [data-key="KeyR"] { grid-area: 1 / 4; }
  .browser-demo-franka-pad [data-key="KeyF"] { grid-area: 2 / 4; }
}