/* HORNET SWARM SIMULATOR - page styles (HORNET-V1.0.5.SIM) */
* { box-sizing: border-box; }
    body { margin: 0; background: #1e1e1e; font-family: Arial, sans-serif; color: #eee; overflow: hidden; }

    #topbar {
      height: 56px; display: flex; align-items: center; gap: 12px;
      padding: 0 16px; background: #252526; border-bottom: 1px solid #3a3a3a;
    }
    #topbar h1 { font-size: 18px; margin: 0; letter-spacing: 1px; color: #4caf50; }
    #topbar .spacer { flex: 1; }
    .tbtn {
      padding: 10px 20px; font-size: 14px; font-weight: bold; border-radius: 8px;
      border: none; cursor: pointer; color: #fff;
    }
    #btn-load  { background: #3a5a9a; }
    #btn-start { background: #2e7d32; }
    #btn-stop  { background: #8a2020; }
    .tbtn:hover { filter: brightness(1.2); }
    #filename { color: #9ab; font-size: 13px; }

    #blocklyDiv {
      position: absolute; top: 56px; bottom: 0; left: 0; right: 0;
      background: url('/Content/Style/Images/background.png') center/cover no-repeat #1e1e1e;
    }

    /* flyout: shift right so it clears the round menu */
    .blocklyFlyout { margin-left: 50px !important; }

    /* ===== Toolbox: round icon menu (self-contained, order-based) ===== */
    .blocklyToolboxDiv {
      width: 104px !important;
      margin-top: 100px !important;
      margin-left: 40px !important;
      height: 300px !important;
      overflow: hidden !important;
      border-radius: 50px !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      border: none !important;
      background: rgba(40,40,40,0.95) !important;
    }
    .blocklyTreeRow {
      display: flex !important;
      align-items: center !important;
      width: 74px !important;
      height: 74px !important;
      padding-left: 0 !important;
      border-radius: 50px !important;
      background-color: transparent !important;
      border: none !important;
      box-shadow: none !important;
      cursor: pointer !important;
    }
    .blocklyTreeLabel { display: none !important; }
    .blocklyToolboxCategory { padding-top: 10px !important; }
    #blocklyDiv .blocklyToolboxCategory:nth-child(1) .blocklyTreeRow::before,
    #blocklyDiv .blocklyToolboxCategory:nth-child(2) .blocklyTreeRow::before,
    #blocklyDiv .blocklyToolboxCategory:nth-child(3) .blocklyTreeRow::before {
      content: '' !important;
      display: inline-block !important;
      flex-shrink: 0 !important;
      width: 74px !important;
      height: 74px !important;
      vertical-align: middle !important;
      background-size: contain !important;
      background-repeat: no-repeat !important;
      background-position: center !important;
    }
    #blocklyDiv .blocklyToolboxCategory:nth-child(1) .blocklyTreeRow::before { background-image: url('/Content/Style/Images/core/D1Normal.png') !important; }
    #blocklyDiv .blocklyToolboxCategory:nth-child(1) .blocklyTreeRow:hover::before { background-image: url('/Content/Style/Images/core/D1Mouseover.png') !important; }
    #blocklyDiv .blocklyToolboxCategory:nth-child(2) .blocklyTreeRow::before { background-image: url('/Content/Style/Images/core/R1Normal.png') !important; }
    #blocklyDiv .blocklyToolboxCategory:nth-child(2) .blocklyTreeRow:hover::before { background-image: url('/Content/Style/Images/core/R1Mouseover.png') !important; }
    #blocklyDiv .blocklyToolboxCategory:nth-child(3) .blocklyTreeRow::before { background-image: url('/Content/Style/Images/core/L1Normal.png') !important; }
    #blocklyDiv .blocklyToolboxCategory:nth-child(3) .blocklyTreeRow:hover::before { background-image: url('/Content/Style/Images/core/L1Mouseover.png') !important; }